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).
Related
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 have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).
I'm creating some project using HippoCMS 10 and I need to add RichText editor as part of the page, so that customer can use it and fill something there. This editor must act exactly the same way as in Document Editor (customer can click Image button in toolbar and select image from ImagePicker dialog box).
Can't find anything about it in HippoCMS official documentation. I learned how to create custom plugins and how to integrate CKEditor into page separately, but for image picking, I need default behaviour as in Hippo.
How can I achieve this? Any help will be appreciated!
I think your question was answered on the community group. The answer there was:
"it should be quite easy to have a CKEditor in the website.
However, it doesn't really make sense to me to have site visitors able to pick CMS documents and images from the site. The picker dialogs are designed to work inside the CMS only. You should be able to create your own picker dialog that can read from a REST service that exposes the images/documents.
I don't think it will be possible to reuse the CMS picker dialog in the site."
and
"your use case is fine, when I said "it doesn't really make sense", I was really referring to the technical limitations of the pickers. You should be able to achieve what you want with a custom dialog that plugs into a REST service though. Unfortunately there is no quick solution for this that I can think of."
Just adding this for future reference.
I am using the CKEditor module for Drupal7.
I want to customize the Table dialog window.
I saw this thread, But I am not clear where to add the code that #oleq added.
Here is the URL: Set default table properties for CKEditor?
In what file should I add the code?
Thanks.
If you're using the regular ckeditor module (ie not through wysiwyg module), then you can just add it to the bottom of:
sites/all/modules/contrib/ckeditor/ckeditor.config.js
If you're using wysiwyg module and ckeditor library, then it's more complicated, and I'll post it as a separate question since a few people have asked this.
I have a news-type website that I am looking to create using N2CMS, but besides the regular operations (being able to see a calendar, viewing lists of news, viewing news details etc.), part of the content in the website is displayed in "modal" popups (similar to the ModalPopupExtender from the AjaxToolkit) inside the page (for example if you click Login, a popup panel appears with the login controls).
My question is: is there a way of adding a handler for a link, and displaying a "modal" popup when the link is clicked? If so, can this be done from the template GUI editor (and how)?
Thank you
N2CMS doesn't have any built-in handlers to create modal pop-ups for links. However, N2CMS does ship with the Jquery JavaScript library. My suggestion would be to use JavaScript in your site template to select and format the desired links with modal dialogs -- but that can't be done from the GUI editor, you'd need to do it in the template code directly.