Redactor clips plugin does not insert exact html

Question

I’m testing the plugin clips of the editor Writer to insert code snippets in my editor.

However, when trying to insert a code snippet following some models of Twitter Bootstrap the plugin or Redactor is changing the html to be inserted ("the clip"), example:

This is one of the clips:

<li>
  <a href="#" class="redactor_clip_link">Template 2 Colunas</a>

  <div class="redactor_clip" style="display: none;">
    <div class="row">
      <div class="span4">
        <h2>Digite o titulo aqui</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sequi ea rerum minima dolor ratione cumque vero repellendus ipsam! Porro, quasi repellat modi. Doloremque, quis, error neque molestias fugit natus modi ducimus? Error, tenetur, rerum debitis ipsa aspernatur sed sequi.</p>
      </div>
      <div class="span5">
        <h2>Digite o titulo aqui</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sequi ea rerum minima dolor ratione cumque vero repellendus ipsam! Porro, quasi repellat modi. Doloremque, quis, error neque molestias fugit natus modi ducimus? Error, tenetur, rerum debitis ipsa aspernatur sed sequi.</p>
      </div>
    </div>
  </div>
</li>

When inserting it, the return is as follows:

<div class="row">
    <div class="span4">
        <h2>Digite o titulo aqui</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sequi ea rerum minima dolor ratione cumque vero repellendus ipsam! Porro, quasi repellat modi. Doloremque, quis, error neque molestias fugit natus modi ducimus? Error, tenetur, rerum debitis ipsa aspernatur sed sequi.
        </p>
    </div>
    <div class="span5">
        <h2>Digite o titulo aqui</h2>
    </div>
</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sequi ea rerum minima dolor ratione cumque vero repellendus ipsam! Porro, quasi repellat modi. Doloremque, quis, error neque molestias fugit natus modi ducimus? Error, tenetur, rerum debitis ipsa aspernatur sed sequi.
</p>

As you can see, he closed all the <div> above the second <h2> and put the paragraph at the end of html. Why? I don’t know.

---

Clips: function that inserts html code

insertClip: function(html)
  {
    this.selectionRestore();
    this.insertHtml($.trim(html));
    // this.insertHtmlAdvanced($.trim(html)); // doesn't work
    this.modalClose();
  }

---

Redactor: call in view

  $('#PageDescription').redactor({
    minHeight: 300,
    plugins: ['clips'],
    convertDivs: false,
    lang: 'pt_br',
    deniedTags: ['h1'],
    buttons: ['html', '|', 'formatting', '|', 'bold', 'italic', 'deleted', '|', 'unorderedlist', 'orderedlist', 'outdent', 'indent', '|', 'image', 'video', 'file', 'table', 'link', '|', '|', 'alignment', '|', 'horizontalrule'],
    imageUpload: '/admin/pages/upload_image',
    fileUpload: '/scripts/file_upload.php',
    keyupCallback: function (obj, event) {
      var max = $('#PageDescription').prop('maxlength');
      if (typeof max !== "undefined" && max > 0) {
        var current = obj.currentTarget.innerText.length;
        var $box = $('#PageDescription').parent(".redactor_box");
        var $redactor_indicator = $(".redactor_indicator", $box);
        if ($redactor_indicator.size() === 0) {
          $box.append($("<div class='redactor_indicator'><span class='current'>" + (current - 3) + "</span> of <span class='max'>" + max + "</span> caracteres restantes</div>"));
        } else {
          $(".current", $redactor_indicator).text(current - 3);
          $(".max", $redactor_indicator).text(max);
        }
        if (current >= max) {
          $box.css("border", "1px solid #ff0000");
          $redactor_indicator.css("color", "#ff0000");
        } else {
          $box.css("border", "1px solid #DDDDDD");
          $redactor_indicator.css("color", "#000000");
        }
      }
    }
  });

Answer 1

I found the problem: the function insertHtml() used in clips, which is part of the API of the Redactor for some reason it changes my HTML.

Searching in the API found the function set(), and when using it in the plugin (removing the function insertHtml(), everything worked as expected.

  insertClip: function(html)
  {
    this.selectionRestore();
    this.set($.trim(html)); // <---- change insertHtml() to set()
    this.modalClose();
  }