As CKEditor documentation is really poor, I couldn't find an answer to this question anywhere.
Is it possible to configure CKeditor so that toolbar would be draggable in inline editing mode?
I'd like to be able to move it around.
If so, how is it possible to set that?
Thanks!
There's no such option available by default. However, you can achieve that by placing toolbar in your own container and adding a drag&drop handler to it, for example using some jQuery UI feature.
To be able to move toolbar to your own container you need to use the sharedspace plugin (build CKEditor package with it) and set the config.sharedSpaces option as is described in the so poor documentation.
Related
I want to use CKEditor 5, insert image with URL dialog, instead of its default file upload dialog. how to do this in CKEditor 5 Classic?
There is, as far as I know, no such feature officially provided.
There is, however, a tutorial provided in the documentation on how to write such a feature: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
There is also a separate project on github for the same purpose, which appears to be a bit more stylish: https://github.com/khanhna/ckeditor5-image-via-url
Both approaches require to configure a modified build, and both appear to lack an important component: a button in the image's toolbar to edit that URL later on.
So, a more simple approach that does achieve practically the same is to just drag the images into the editor from some browser window.
i have added below configuration to hide the toolbar onload of ckeditor.
config.toolbarStartupExpanded = false;
is there any configuration or any workaround available to show the toolbar once the user clicks on the editing area and then hides it once user clicks out of the editing area.
You can try to use inline version of editor, it might be sufficient for you in this case.
Take a look into this sample how it works: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/inlineall.html.
You need to remember to initialise editor with CKEDITOR.inline instead of CKEDITOR.replace. More about it you can find in documentation
Another option might be dynamically create and destroy editor, but this approach might be a little bit more laggy, for the user. Example how it works you can find here: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/ajax.html
I'm new to CKEditor development. I have written a plugin to insert custom tag element ( pre ) and update its attributes.
I want to open the plugin dialog( dialog name is snippet ) once user clicks the pre tag element, And i want to fill the textarea with clicked element innerHTML in dialog.
I have two questions.
How to invoke the plugin dialog dynamically?
How to access the elements inside the dialog?
Enjoy the official plugin development tutorial – there you'll find all the answers. You'll not be able to re-use another plugin's dialog easily though. You need another dialog.
But don't worry, you can copy&paste the source code of Source Dialog plugin's dialog, which is very simple, and use it for your plugin. Code Snippet dialog is also pretty straightforward.
Also
You may find Developer Tools plugin useful.
You can observe various events with the API of the editor easily (including click).
The behavior of the tooltip in the inline editor is so annoying while typing or moving cursor around. : How do I remove it or change the its behavior?
I want to show the image but have not enough reputation. :) http://ckeditor.com/forums/CKEditor/How-do-I-remove-the-inline-editor-tooltip
This issue will be resolved in CKEditor 4.2. You can use proposed solution if you wish to have it immediately or just wait a couple of weeks for stable 4.2.
apparently the ckeditor team didn't think this was important or easily achievable:
http://dev.ckeditor.com/ticket/9896
Don't give up, i think if you find the right element within the CKEDITOR iframe, you could disable it using JQuery.
You could always give it a go:
How to disable tooltip in the browser with jQuery?
Besides that it's not more than a title attribute to the editor.
I was testing a different feature, and I somehow, accidentally dropped an image that I had rendered "draggable" with jQuery UI, into a CKEditor (jQuery version) window. The source in the editor was updated accordingly. Serendipity!
But it was like I had just seen a unicorn -- It only happened once, and I was not able to replicate the effect.
Has anyone else been able to get those two tools to work together? If so, what's the trick?
I believe you don't need to make an image "draggable" with jquery to drag it into CkEditor. It works out of the box with any image of the page.