I'm using CKeditor for editing content full of various scriptlets and non-HTML code. I've successfully added "config.protectedSource" regular expressions to have such code non-editable in editor, switching between editor and source is flawless.
What I'd like to achieve is display image placeholders for such code in editor. Since the code is not regular ML tags and it is treated as protected source, I cannot simply create fake elements (I have no realElement!).
I've figured out the protected source is treated as comments.
What I'm doing is the following. Add dataFilter rules to dataProcessor
This way I can handle "spans" via CSS and display a placeholder.
Now, the question is... with adding a dataProcessor.htmlRule, I can find my "span" elements and retrieve the original code from the "realElement" attribute.
But how do I insert it back into the HTML code without it being processed/HTML encoded?
I can manually strip the "{cke_protected}" tag, but it feels wrong.
Is there a way with using createFakeParserElement?
Is there a way to reinstate the "protected" comment back, so CKeditor would process it internally as originally intended?
I added dataProcessor.htmlFilter rule this way:
But this does not work! Later on, CKeditor reports some error of not finding functions... I guess the problem is that it expects an element object but gets a comment object and hence the problem.
I've managed to retrieve the original scriptlet code, insert it as text but it gets HTML encoded.
What can be done?
What I'd like to achieve is display image placeholders for such code in editor. Since the code is not regular ML tags and it is treated as protected source, I cannot simply create fake elements (I have no realElement!).
I've figured out the protected source is treated as comments.
What I'm doing is the following. Add dataFilter rules to dataProcessor
addRules( { comment : function(element) { if (element.substring(0,15) == '{cke_protected}') { return CKEDITOR.htmlParser.fragment.fromHtml('<span class="myScriptlet" realElement="'+element+'"></span>'); } return element; } }, 5);
This way I can handle "spans" via CSS and display a placeholder.
Now, the question is... with adding a dataProcessor.htmlRule, I can find my "span" elements and retrieve the original code from the "realElement" attribute.
But how do I insert it back into the HTML code without it being processed/HTML encoded?
I can manually strip the "{cke_protected}" tag, but it feels wrong.
Is there a way with using createFakeParserElement?
Is there a way to reinstate the "protected" comment back, so CKeditor would process it internally as originally intended?
I added dataProcessor.htmlFilter rule this way:
addRules( { elements: { 'span' : function(element) { // *******meta code*********** //* detect if this is my span via class name or existence of realElement attribute //* strip {cke_protected} tag from if or strip {C} marker... var realElement = attributes['realElement'] return CKEDITOR.htmlParser.comment(realElement); } return element; } } }, 5);
But this does not work! Later on, CKeditor reports some error of not finding functions... I guess the problem is that it expects an element object but gets a comment object and hence the problem.
I've managed to retrieve the original scriptlet code, insert it as text but it gets HTML encoded.
What can be done?