Search code examples
javascripthtmldomwysiwygfckeditor

Inserting "placeholders" with an FCKeditor plugin to be later replaced with dynamic content

I'm writing a plugin for FCKeditor that's meant to insert placeholders for dynamic content into the HTML. The interface look like this:

Interface

Currently, the plugin inserts the following HTML:

<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar">&nbsp;</div>

The snippet of Javascript in my plugin that accomplishes the actual insertion of these placeholders is this:

function insertNewDiv() {
    var divNode = oEditor.FCK.EditorDocument.createElement('div');
    oEditor.FCK.InsertElement(divNode);
    oEditor.FCK.Focus();
    oEditor.FCK.Events.FireEvent('OnSelectionChange');
    return divNode;
}

To make it look nice in the FCKeditor window, I'm applying some CSS to the FCKeditor window, including the following, that writes the title in there:

.dynamicelement:before {
    content: attr(title);
}

Anyway, other than the styling, FCKeditor treats these div elements no differently than any other div element in its window. This is not good for me.

I need these placeholders to have the following traits:

  • Insertion of content into the placeholder is not allowed.
  • Clicking it should select it as a whole.
  • Tapping the delete key when it's selected should delete it.
  • The only way to edit it (apart from deleting it) is to select it, then click the toolbar button to open an edit dialog.
  • It should always be considered a block-level element
  • It doesn't matter if the HTML output uses a custom tag name or not (<dynamicelement> instead of <div class="dynamicelement">).

Does the FCKeditor API provide a way to give it command like, "Treat every element that matches the selector 'div.dynamicelement' the following way: ..." ?

Also, is there another FCKeditor plugin that does a similar thing that I can refer to that I might have overlooked in my research?

EDIT: By the way, I already know about CKeditor. I'm using FCKeditor for a couple of reasons: it's working for my CMS, the configuration options I'm using are perfect for my clients (except, obviously, for the placeholder thing), etc..

Solution

  • I solved this by duplicating the code that makes the "Page Break" button work.

    While wading through the source code, I learned that FCKeditor has a native method for inserting placeholders.

    1. Create a "fake image" and insert it into the editor DOM. You can style the image however you want.
    2. Using Javascript, connect it to the div in question.
    3. Hide the div (it still appears in the source and in your output though).

    While in WYSIWYG mode, you're playing with this fake image, and the changes are being carried over to the div.

    There a few bits and pieces that need to be in the plugin to make this work. If you grep for FCK__PageBreak, you will find them all in the source, ready to be copied into your plugin. FCK__PageBreak is the class name of the Page Break's fake image.