I'm trying to write a custom plugin for CKEditor. What i need is a non editable element. So this should be an inline element, that is not editable by the user. The element would be a placeholder that will be replaced in the following steps of my application by some data. I allready found out how to customize the editors CSS, so that i can change the look of this element, but my real problem, is that there is no really non-editable element, that i could found.
I tried out:
img: is resizable and has a right-click menu
hr: is not editable, but looks strange if declared as inline; breaks up paragraphs if declared as inline-block
div: editable content
span: editable content
So now i think of 2 ways of acomplishing what i want:
a) use img and disable resizing and right click menu for img's with my special class like <img class="placeholder">
b) use div or span and prevent editing by using javascript events
But i don't really know where to begin... Someone an idea?
I tried out:
img: is resizable and has a right-click menu
hr: is not editable, but looks strange if declared as inline; breaks up paragraphs if declared as inline-block
div: editable content
span: editable content
So now i think of 2 ways of acomplishing what i want:
a) use img and disable resizing and right click menu for img's with my special class like <img class="placeholder">
b) use div or span and prevent editing by using javascript events
But i don't really know where to begin... Someone an idea?
Re: Non-Editable Element?
Hi Jeff,
This feature is a feature under our consideration, please stay tuned with this ticket.
FYI, FCKEditor did have a placeholder plugin with similar functionality as you requested, which was used at MediaWiki, I hope it could be a reference for you.
Re: Non-Editable Element?
so i assume, that this plugin was developed by CKSource? is that right? Is it planned to upgrade this plugin to the new ckeditor 3?
Re: Non-Editable Element?
In short: You can disable the menu with a bad hack.
Re: Non-Editable Element?
hm... how did you disabled the right click menu? can you post the code?
i used an img with custom class-attribute and would like to disable resising... so quite the opposite of yours
Re: Non-Editable Element?
From my memory:
With the contextmenu there's a addListener method. This stores the listeners in this._.listeners or something like that. So I used getContextMenu()._.listeners and I iterated through the listeners. Those are functions, but a String(fn) will give you the possibility to get the source code as a string. Then you have to look for something special inside the code to identify that this is the right handler (you have to check different browsers and remember that it could be minified).
When you've found the right handler remove it from the listeners and add a new listener which calls the original listener only if it's not your component.
That's a bad hack, but I think that there's currently no API do do otherwise.
use that
element.contentEditable = false;
thats make the dom elements not editables