Call Equation Editor plugin when custom button is clicked - javascript

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.

Related

Tinymce, Vuetify dialog, can't write in source code editor or insert code sample

I have a problem with vuetify dialog and tinymce editor.
When I open the dialog with the editor in it, the editor does not work as intended, especially the plugins like Edit source code or Insert code sample.
When I open one of them (one of the plugins) I can't focus on the textarea created by the plugin it focuses every time on the input from the dialog
I attached here (codesandbox) the working example code.
Full description is on their Github issue page.
Any ideas how to fix the problem?
Thank you
The problem here is that Vuetify (and many other modal dialog implementations) will trap the focus within the dialog and prevent it moving to any other popups, such as those used by TinyMCE. To disable this you'll need to add the retain-focus prop as noted in the documentation: https://vuetifyjs.com/en/api/v-dialog/#props
Here's a working codesandbox: https://codesandbox.io/embed/tinymce-vue-forked-ec670?file=/src/App.vue

Hide/Show CKEditor buttons on an onclick event

I am developing a simple tool for sending emails.
I am using CKEditor for my textarea formatting.
I want a scenario, whereby by default whereby the formatting buttons do not show till the user clicks on "Show Formatting buttons"
How can I achieve this with CKEditor without using two textareas.
You can use this link as an example:
Create and destroy CKEditor instances on the fly
In the example they use a div, but you can just as easily use a standard textarea, and it will do the plain text / rich text tradeoff you are looking for.

How to reload format-box in CKEDitor 4 dynamically?

I want to populate the format-box in CKEditor toolbar dynamically (depending on what the user selects in another select box).
Is it possible to change the options of the format-combo box dynamically , without reloading the whole CKEditor ?
The shortest answer is: no. However...
The plugin responsible for this box is the format plugin. It gathers all the data during the init function called when editor is being initialized. If you want to have this thing dynamically populated, you need to change some logic of this plugin on your own.
You might be interested in onRender callback for rich combos which is used by the plugin to dynamically change the value of the combo. Another handful thing might be add() method of rich combo used by format plugin. I'm pretty sure you got to extend the richcombo plugin to remove items.
Good luck anyway!

Javascript: TinyMCE + Highcharts

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.

Make TinyMCE follow anchors within textarea

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.

Categories