Please, give me some technical advice on how to implement the following in javascript.
I need to integate highcharts into tinyMCE in the following scenario:
User chooses "Add chart" from tinyMCE menu,
chooses chart (it's chartId is stored in variable),
and the chart is rendered to tinyMCE's iframe (using backbone view, that is able to get chart info using chartId and render a chart, using its id, which is already implemented).
Also note that all this is happening inside extJS application.
This chart should be:
sizeable and editable, e.g. like an image,
but user is not able to put caret inside highchart and update text inside it, e.g. it's entirely selected like an image.
when right-clicked, the tinyMCE's popup menu is shown, like for image, where i can set width-height-style etc.
I also need that when actual markup is received from tinyMCE, instead of the whole chart I would get a placeholder, e.g. tag "chart dataId="chartId"" or other format.
What is already done:
I have attached tinyMCE to extJS and render it as a form.field
I have added custom button to tinyMCE's toolbar
I implemented rendering of chart into virtual , and then adding this div to tinyMCE's iframe dom, but the chart is rendered only partially and text inside chart is selectable, which is not accepted.
Eventually, the main questions are:
How to make chart render correctly into tinyMCE's iframe?
How to make chart in tinyMCE selectable and editable in an image like mode?
How to replace chart, when retrieving markup from tinyMCE, with some placeholder?
Thanks for the advice!
I have developed some solutions for requirements like that. Here is the plugin that allows you to create/edit your own charts, it's free and has MIT license (charts as well), I using Chartist there, it has a MIT license also.
How it works? Just puts SVG to your content or you can add some custom uploader - push file to your server and add IMG tag into your text.
Link: https://github.com/Axel186/charts-tinymce-plugin
Hope it will be useful, if someone have any questions, feel free to ask me.
Related
BLUEBEAM AND ADOBE ARE BOTH PDF VIEWERS THAT HAVE A LOT OF SIMILARITIES
Hello, I am trying to figure out how to link a form answer to some markups (tools).
Custom Columns that are created In Bluebeam:
When I create a new tool I can manually fill out all of these custom columns under the "Custom" section within the settings of a tool:
Then I can save that tool and all of the data will be repeated for every copy of that tool. However, the circled columns in the first picture would be changing on every page. Which means I would have to make a new tool for every page. (FYI I would be making ~20 tools for this, so I would have to update 20 tools every single page ;_;) Therefore, I want to create a dropdown/textbox on each page with those columns. When a user fills out the dropdown/textbox, the markups are automatically updated with that info, which means the custom columns are also updated.
Does anyone have an idea of how to link these?
As of now I have been able to create a code that creates a popup if a user selects a certain drop down. This shows me that you can grab the data from a user. I just don't know how to connect that data to all the markups (tools). I know each markup has a special ID, but I'm curious if you can somehow link to the tools "subject" property to do this.
Bluebeam provided me with their JavaScript API if that is any help.
https://i.stack.imgur.com/yEdU1.jpg (I got this image from this post JavaScript Library with Bluebeam)
UPDATE
I found another document with potential accepted scripts for Bluebeam. Please note this one will require people to have Bluebeam Revu eXtreme
https://support.bluebeam.com/wp-content/uploads/2019/08/Bluebeam-Script-Reference-2018.pdf
This version actually has a markup section (which are the things I am more or less wanting to have the custom columns be updated for with the user input)
This document seems to be relevant only for the Bluebeam Script Editor. You can open it by looking in the folder for Bluebeam from your start window.
There are 2 issues I have with this though. I haven't figured out how to run the codes I have in the script inside of Bluebeam yet and I am curious if there is a way to not need the markupID's and/or a way to get them without having to download the markups
I've been lurking on stack for so long, I finally have something to contribute...
I work with custom columns and toolsets all the time. I think you're missing a basic understanding of what the markup list is. Or maybe I am. The markup list is the table of data at the bottom of Bluebeam, where you're trying to change column headings.
The markup list is basically a table of data, what you're trying to do will change the column headers per page, which would change it for all entries. From what I know about Bluebeam, these are static, just like any database or table in any application like Excel. If you need to have different column headings, you need to just stack them all and use what you need on each page or from tool to tool. Or create different profiles with different custom columns, but this gets messy having multiple profiles accessing a single document. Maybe java can help show and hide these per what's relevant on the page within the custom field. But... I think the java is limited to be used within PDF form fields and some basic PDF actions such as print, save, etc. I don't think the level of coding you're looking for exists within Bluebeam.
I use profiles to manage custom columns per process, not the actual tool. It's kind of unclear exactly why the custom columns can follow the tools without the actual profile though.
What I do to accomplish complex tasks is export the markup list and build something within Excel VBA to tabulate data and export reports with relevant information. I'm sure you could use basically any coding language to accomplish this after the table is exported from Bluebeam.
I have a very basic text editor that uses CKEditor. The default CKEditor toolbar is hidden because for editing I need only image upload (which is completely custom) and Equation Editor plugin for formulas.
My goal is to use a custom button for the Equation Editor and call the plugin on click. So, somewhere in the UI of the editor, I would have this:
Insert formula
Clicking on the button should open the Equation Editor.
How do I achieve this?
Note: I have multiple CKEditor instances on the page.
You should use CKEDITOR.editor.execCommand() like this
CKEDITOR.instances.myEditorInstance.execCommand( 'mathjax' )
And this is where you'll find how to do this.
You can list available commands of the CKEditor instance by browsing CKEDITOR.instances.myEditorInstance.commands object.
When the user hovers over the Telerik.Web.UI.RadUpload input button a tooltip appears showing the current path of the file to be uploaded or a 'No file chosen' text.
AFAIK and from the official documentation for that component, it is necessary to load the localization related content from a .resx file, but I need to set that info via codebehind because the application I'm working on loads localization data from a cache.
A different approach could be to use the event raised whenever the cursor gets over the input button but I couldn't find neither an event nor an specific control holding that text.
Is there any other option letting me to set the content for that tooltip?
I didn't comment that the situation happens in Chrome, not in IE10. It seems that the problem is related to webkit and has nothing to do with telerik. So this problem is solved as suggested here and here. By solution I mean to disable the tooltip.
I am trying to find a method of making TinyMCE follow anchor links within the textarea. I am trying to make a table of contents, and would like the ability for users to skip the the desired section in the editor. Is this possible?
Thanks.
You will need to write an own plugin for that setting the cursor position using methods from the tinymce class Selection. The newest tinymce version contains the method setCursorLocation which may be used for example.
I have a text area and when the user clicks a button say something like insert an image button the user selects the image to be uploaded and then i would like to add this image to the text area and the user can continue editing the text area, just like what orkut does. How do we achieve such functionality?
You can't display an image directly inside a textarea control.
The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.
Perhaps a writable div (content editable) would suit your purposes better.
I don't believe this is possible. You should look into using a content editable div.
I don't think Orkut actually does what you are talking about either. Looks like they are doing the same thing that stackoverflow does - using a wysiwyg editor, albeit a nicely dressed up or homegrown version. TinyMCE and FCKeditor are the two I'm most familiar with. There are a few leads on this page too: html editor alternative besides tinyMCE