将原子内容插入CKEditor

Question

Is it possible to insert "atomic" block content into CKEditor?

For example I want to insert <h1>Test</h1> just after "B" in <p>AB C</p> . Currently with CKEDITOR.currentInstance.insertHtml('<h1>Test</h1>') , the block tag is removed and it becomes <p>A BTest C</p> (cursor it just after "B"). I want it to be inserted at the end of the P block where the cursor is, like <p>AB C</p><h1>Test</h1>

Here is a working example http://jsfiddle.net/T49Pf/3/ . When the caret is anywhere in the first paragraph and I click "Insert", I don't have the h1 tag inserted. But when the caret is in the second (empty) paragraph, I do have the h1 block element. Now I'd like when I click "Insert" anywhere, the content is inserted in a place that keep it atomic (don't lost the h1 tag). It is similar to the "magic line" plugin.

Answer 1

I assume that you're using editor.insertHtml method. This method's behaviour was designed to work with pasted code and your case is most often means that single line or part of it was copied so it should be handled as a text - not as a format.

In your case I'd recommend the editor.insertElement method which is for different purposes (like eg image insertion) so it will preserve your element.

Sample from documentation:

var element = CKEDITOR.dom.element.createFromHtml( '<img src="hello.png" border="0" title="Hello" />' );
CKEDITOR.instances.editor1.insertElement( element );

Answer 2

标头标签（h1-6）是块级元素，不能嵌套在<p>标签内...