I'm having the following problem that I can't figure out. I'm wondering if what I am trying to do is even possible within the ckeditor architecture.
Here's my business use case:
1) Listen to any keyup events on the editor
2) When a URL is detected (e.g. "ckeditor.com"), automatically insert HTML formatting to update the editor using setData call. This can be as simple as just writing "<a>ckeditor.com</a>" to render with the link plugin
Here's a simplified version of the code:
main: function() { var self = this $(document).ready(function () { CKEDITOR.replace("post-message", { removePlugins: "scayt,tabletools,contextmenu,toolbar,menubutton,elementspath", allowedContent: true, on: { key: self.updateMessage } }); }); } updateMessage: function(evt) { var text = CKEDITOR.instances["post-message"].getData(); //Parse text and insert <a> tags... console.log(text); //Verify the text is changed CKEDITOR.instances["post-message"].setData(text); }
The problem is that the getData() function on the first invocation returns a blank string and the caret position in the editor is always reset to the beginning of the editor after the call to setData. As a result, anything I type into the editor never gets displayed.
If I remove the call to setData I can see the console.log(text) statement showing my expected HTML formatted string.
My question is whether this approach even works or should I be listening to another event in the editor altogether (e.g. afterSetData and then somehow change updateMessage function to use some other way to update the editor contents)? Should I somehow figure out how to intercept where the text/HTML gets written to the editor and apply my URL filtering there?
I'm wondering now if this is even possible or if the architecture for ckeditor requires one to manually select text and then invoke a plugin button to apply the formatting?
Any help will be appreciated! Thanks in advance!
Promising path...
Okay so if I do the following:
The text now appears, but obviously the URLs I'm formatting will now not be rendered properly. I feel like I'm close. What can I call in my callback function above to tell ckeditor to now apply the plugin rule formatting?
htmlDataProcessor or toHtml
Still hacking away at this. I see a toHtml event function triggered by the htmlDataProcessor and so now I'm trying to use the editor.dataProcessor property... hope this is a better path.
uggh I just don't think this is possible about to give up
My latest research leads me to attempt to use a custom plugin to override the dataProcessor attribute of the editor. I then supply a toHtml function. To my knowledge and the scant documetation and lack of examples, it's the function to override to format HTML before it gets sent to the editor. The only problem seems to be that toHtml is called via setData (see the source code there). However, the problem w/ calling setData without the third parameter set to true (mark it as internal) is that I get the problem stated in the original post.
Can anyone shed some light? Has anyone run across a use case like this before?