title: Inserting "placeholders" with an FCKeditor plugin to be later replaced with dynamic content
body: <p>I'm writing a plugin for FCKeditor that's meant to insert placeholders for dynamic content into the HTML. The interface look like this:</p>
  
  <p><img src="https://i.imgur.com/2hXu3.png" alt="Interface"></p>
  
  <p>Currently, the plugin inserts the following HTML:</p>
  
  <pre><code>&lt;div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>The snippet of Javascript in my plugin that accomplishes the actual insertion of these placeholders is this:</p>
  
  <pre><code>function insertNewDiv() {
      var divNode = oEditor.FCK.EditorDocument.createElement('div');
      oEditor.FCK.InsertElement(divNode);
      oEditor.FCK.Focus();
      oEditor.FCK.Events.FireEvent('OnSelectionChange');
      return divNode;
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>.dynamicelement:before {
      content: attr(title);
  }
  </code></pre>
  
  <p>Anyway, other than the styling, FCKeditor treats these <code>div</code> elements no differently than any other <code>div</code> element in its window. This is not good for me. </p>
  
  <p><strong>I need these placeholders to have the following traits:</strong></p>
  
  <ul>
  <li>Insertion of content into the placeholder is not allowed.</li>
  <li>Clicking it should select it as a whole. </li>
  <li>Tapping the delete key when it's selected should delete it.</li>
  <li>The only way to edit it (apart from deleting it) is to select it, then click the toolbar button to open an edit dialog.</li>
  <li>It should always be considered a block-level element</li>
  <li>It doesn't matter if the HTML output uses a custom tag name or not (<code>&lt;dynamicelement&gt;</code> instead of <code>&lt;div class="dynamicelement"&gt;</code>).</li>
  </ul>
  
  <p>Does the FCKeditor API provide a way to give it command like, "Treat every element that matches the selector 'div.dynamicelement' the following way: ..." ?</p>
  
  <p>Also, is there another FCKeditor plugin that does a similar thing that I can refer to that I might have overlooked in my research?</p>
  
  <p>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..</p>