I have a CKEditor widget resembling a tab-module.
As editables I have defined a span.title and div.content.
When I am in editing mode inside a span.title and then paste something using CTRL+V, the span gets broken and I have two spans. As if it gets divided on whatever position I paste.
When I am in editing mode inside a div.content and then paste something using CTRL+V, the contents of the clipboard are correctly inserted into that div.
Is it because span is an inline-element and div is a block-element and CKEditor doesnt allow pasting into inline-elements?
Can I somehow change this behaviour?
CKEditor allows pasting of block and inline elements (keep in mind that content filtering (ACF) can be used which also affects pasting) so it is probably not the issue in this case.
I would also make sure that the content which you are trying to paste does not contain any HTML which may cause the behavior you described.
If you could provide widget HTML/template or code which you are using I will be glad to investigate this issue in more depth.
I had this issue when trying to have a <cite> element as an editable. Trick was to tweak the CKEDITOR.dtd properties.
// This prevents the pasting from splitting parent element.
delete CKEDITOR.dtd.$removeEmpty.cite;
// This tells the editor to allow editing in this element.
CKEDITOR.dtd.$editable.cite = 1;
I imagine this would affect the behavior of all <cite> elements in any editor currently loaded. Not ideal in all cases for most elements, but for our requirements for a blockquote/pullquote widget, the <cite> element is only allowed inside our <blockquote> elements in any editor.
Related
With HTML editors such as ckeditor, there seems to be a convention to distinguish between editing HTML inside <textarea/> content, and »inline« editing via contenteditable.
When doing the latter, the editor automatically recognizes the difference between elements that allow flow content (i.e. <div/>) and such ones that only allow phrasing content (i.e. <p/>) and allows only valid elements inside the respective contenteditable.
I need a way to edit HTML inside of a <textarea/> with ckeditor, while allowing only phrasing content. Is there a way to achieve this?
I found a bit of a hack way of doing this. I looked up CKEDITOR.inline() in the source tree in ckeditor-dev/core/creators/inline.js. The existing code automatically creates a <div/> tag if you want to inline-edit a <textarea/>
Then I monkey patched it to accept an additional string argument, which determines the name of the automatically created contenteditable element, which is otherwise hardcoded to be a <div/>.
With CkEditor, When I create an A tag and later apply some custom formatting (like color text for instance), the resulting source looks like this:
<p><span style="color:#1abc9c;">some text</span></p>
As you can see, the formatting is around the text but INSIDE the A tag.
I have a personal plugin that outputs a SPAN tag with a specific class. In the wysiwyg editor, when I select the text and apply the same formatting, I get this:
<p><span style="color:#1abc9c;"><span class="command3d">Some text</span></span></p>
This time, the formatting is not simply around the text. It is applied around the SPAN tag.
How can I control this behaviour? I would like to get this result instead:
<p><span class="command3d"><span style="color:#1abc9c;">Some text</span></span></p>
Thanks
Unfortunately there is no ability to control the order of inline styles (based on span tags) inside editor's instance. The only sensible way to achieve desired result is to start with applying text color and then apply your custom style.
However there are two methods to convert output of the editor to the correct format. The first is to add custom handler to editor's data processor via toDataFormat event to check ancestors of span.command3d and swap them in places if necessary. However it's a little bit troublesome as you must traverse through all content, therefore it's easier way: add element callback to editor's filter. Example.
I am writing a CKEDITOR plugin that needs to wrap certain pieces of text in a tag. From a webservice, I have an array of items that need to be wrapped. The array is just the plain text strings. Such as:
"[best buy", "horrible migraine", "eat cake"]
I need to find the instances of this text in the editor and wrap them in a span tag.
This is further complicated because the text may be marked up. So the HTML for "best buy" might be
"<strong>best</strong> buy"
but the text returned from the web service is stripped of any markup.
I started trying to use a CKEDITOR.htmlParser() object, and that seems like it is moderately successful. I am able to catch the parser.onText event and check if the text contains anything in my array.
But then I cannot modify that text. Modifications are not persisted back to the source html. So I think using the htmlParser() is a dead-end.
What is the best way to accomplish this task?
Oh, and as a bonus, I also do not want to lose my user's current cursor position when the changes are displayed.
Here is what I wound up doing and it seems to be working so far.
I created a text filter rule that searches through my array of items for any item that is contained (or partially contained) in the text. If so, it wraps the element in my span.
A drawback here is that I wind up with two spans for items with markup. But in my usecase, this is tolerable.
Then I set the results using:
editor.document.getBody().setHtml(results);
Because of this, I also have to strip this markup back out when this text gets read. I do this using an elements filter on editor.dataProcessor.htmlFilter.
This seems to be working well for my (so far limited) test cases.
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
CKeditor apparently automatically creates matching end tags when you enter a start tag. Is there a way to turn this behavior off?
I have a situation where I am creating two blocks of text in an admin program using CKeditor, then I'm using these to paint a page with the first block, some static content, and then the second block. Now I've got a case where I want to wrap the static content in a table. I was thinking, No problem, I'll just put the <table> tag in the first block and the </table> tag in the second block, and the static content will be inside the table. But no, CKeditor insists on closing the table tag in the first block.
In general, I can go to source mode and enter HTML directly, but CKeditor then decides to reformat my tagging. This seems to rather defeat the purpose of having a source mode. (I hate it when I tell the computer what I want and it tells me, No, you're wrong, I know better than you what you want!)
CKEditor produces valid HTML. Valid HTML has to include both - start and end tags. There's no way to change this behaviour without hacking editor. Note that even if you'll force editor to produce content without one of these tags it will then try to fix this and won't do this as you expect. E.g. load:
<p>foo</p></td></tr></table>
And you'll completely loose this table so only regexp based fix on data loading could help. In the opposite case:
<table><tr><td><p>foo</p>
You'll end up with paragraph wrapped with table, so it's better. But what if someone would remove this table from editor contents?
Therefore you should do this integration outside editor - prepend table to contents of one editor and append to contents of second one. You simply cannot force editor to work on partial HTML.