Problems with a custom self-closing tag in CKEditor

Question

I have a plugin to insert a <cut /> into text. It works fine, the result is expected, but in the editor window <cut /> converted to <cut></cut> , wraps the paragraphs below and prevents further changes.

GIF - http://gyazo.com/dd7c36ba7cb7bc7cb00186cfb83e5fbc

Any ideas how to fix this?

 CKEDITOR.plugins.add('pagecut', { lang: 'de,en,ru', onLoad: function(){ var css = ('display:block;clear:both;width:100%;border-top:#999 1px dotted;padding:0;height:1px;cursor:default;'); var cssBefore = ( 'content:"";' + 'background: url(' + CKEDITOR.getUrl( this.path + 'images/image.png' ) + ') no-repeat right center;' + 'height:14px;width:25px;position:relative;display:block;top:-8px;float:right;' ); CKEDITOR.addCss( 'cut{' + css + '} cut:before{' + cssBefore + '}' ); }, init: function(editor) { CKEDITOR.dtd['cut'] = {}; CKEDITOR.dtd.$empty['cut'] = 1; CKEDITOR.dtd.$nonEditable['cut'] = 1; CKEDITOR.dtd.$object['cut'] = 1; editor.addCommand('insertPagecut', { exec: function(editor) { var element = CKEDITOR.dom.element.createFromHtml('<cut />'); editor.insertElement(element); } }); editor.ui.addButton('Pagecut', { label: editor.lang.pagecut.toolbar, command: 'insertPagecut', icon: this.path + 'images/icon.png', toolbar: 'links' }); } }); 

Answer 1

I am sure that I explained this in detail in some question, but I can not find it, so here is another explanation: D.

There are two important things to understand before trying to edit tags other than HTML in CKEditor:

• CKEditor is an HTML editor.

  Of course, custom tags are becoming increasingly popular in HTML. You can also say that XML is a kind of generalization of HTML (although not exactly because it has different rules), so if CKEditor processes HTML, why doesn't it process other tags equally well. Well, the answer is simple - because HTML tags make sense , and CKEditor knows that. But he does not know the meaning of your custom tags. And the meaning of tags (which list, that it has elements, that they are block elements, etc.) is crucial for the implementation of editing algorithms.

  Fair enough, you could say. But why was the CKEditor configuration not configured (e.g. CKEDITOR.dtd ), so can the value of each possible tag be configured? As each generalization increases complexity, and editing HTML is already quite complicated.

  So why does the CKEDITOR.dtd object exist at all? Because some CKEditor components are configured to some extent. DTD has the greatest impact on the CKEditor HTML parser (which is used mainly during data processing ), so this is the most customizable component. Other algorithms, such as processing the enter key, backspace / deleting, editing lists (this is a very difficult task) are slightly customizable, and there is no guarantee that they will work with your custom tags.

• editing takes place in browsers and is partially processed by browsers.

  This fact is important because it means that browser capabilities also affect CKEditor restrictions. The browser should be able to analyze and display your tags (fortunately, this part works well in modern browsers - IE8 is the last with huge problems) and should be able to edit it. This means: make a carriage, select a handle, process backspace , enter , etc. As browsers are not easily extensible, and their implementation of contentEditable highly contradictory, incompatible and buggy, from release to release CKEditor increasingly redefines their native behavior. Not everything (in fact - he will never cancel everything, because it can be catastrophic for certain reasons), but a significant amount. For example, all the behavior of the enter keys is normal, in Webkit and Blink CKEditor, backspace and delete are handled in many scenarios due to unresolved errors ( 1 and 2 ), it implements its own cancellation system, intercepts inserted and deleted content, and performs custom HTML insertion (I remember that when we implemented it, it closed a huge number of tickets), etc. etc.

  One of the biggest efforts to ensure consistent, customizable, and powerful editing is the widget system . It is full of hacks inside, but it provides the developer with a clean and fairly powerful API and very consistent behavior for the end user. This allows you to implement "special rich content units, which are groups of elements that are considered as a single object within the editor." In this way, the widget system can encapsulate some of your content and isolate it from browsers.

After this brief introduction, I can finally answer your question. You need to implement the <cut> as a widget . You have already configured DTD well (you just forgot to indicate in which elements the <cut> element can exist and whether it is larger as a block or inline element), so the parser will accept it and treat it as an empty tag. Now you need to wrap it with widgets to isolate it so that it does not break the editing work. That should do the trick.