CODEWITHSUNDEEP
javascripthtmlckeditor
jcisio
jcisio

Reputation: 507

Insert atomic content into CKEditor

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

For example I want to insert <h1>Test</h1> just after "B" in <p>A B 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>A B 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.

Upvotes: 1

Views: 301

Answers (2)

bluetoft
bluetoft

Reputation: 5443

header tags (h1-6) are block level elements which cannot be nested inside a <p> tag...

Upvotes: 0

Reinmar
Reinmar

Reputation: 22023

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 e.g. 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 );

Upvotes: 2

Related Questions