CODEWITHSUNDEEP
htmlckeditor
Scotty Waggoner
Scotty Waggoner

Reputation: 3380

How can I have 2 CKEditor instances on the same line without causing problems?

I have a section of HTML that I would like to be editable with CKEditor but in 2 different pieces.

Ideally I would want my HTML to look like:

<div class="page-header">
  <h1>
    <span>Heading</span>
    <small>Subheading</small>
  </h1>
</div>

where the subheading would be displayed on the same line as the heading and each are editable separately. This looks fine without CKEditor enabled.

One attempt was to hack the editor to enable span and small tags: (Enable CKEditor4 inline on span and other inline tags)

CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();

http://jsfiddle.net/OzzieOrca/PCH9z/1/

This mostly works but if you double click the Header (to select everything) and start typing, it deletes the subheading and you can't get it back until you refresh the page

I tried using <div style="display: inline"> instead of the small and span but when CKEditor is instantiated, it changes the styling of the div and the subheader drops below the header.

I will try see if there is anything else I can do with CKEditor or see if I have any other HTML layout or styling ideas but any suggestions would be appreciated.

(I had the same issue with TinyMCE so I tried CKEditor and I think I like it better so I decided to keep using it but I still have this same problem)

Edit:

I finally tried this:

<div class="page-header">
  <h1 class="pull-left">Header</h1>
  <h1 class="pull-left">
    <small class="padding-left">Subheader</small>
  </h1>
  <div class="clearfix"></div>
</div>

but then realized that this wouldn't wrap the subheader but just moves it to a new line if it is too long. I submitted this bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=6354 which includes this example of what I want to do and what is not working http://jsfiddle.net/OzzieOrca/jKmZ7/

Upvotes: 0

Views: 277

Answers (1)

Aaron Digulla
Aaron Digulla

Reputation: 328604

First, make sure the editor doesn't attach itself to the <h1> element.

If that works correctly, then I suggest to wrap the elements that you want to edit in a block element during edit and restore the DOM when editing stops.

I don't know why CKEeditor might distinguish between inline and block elements but it's quite possible that it never occurred to the author that someone might want to edit only part of a block.

Upvotes: 1

Related Questions