Plugin Editor's Clip does not insert the exact html

2

I'm testing the Editor plugin to insert snippets of code in my editor.

p>

However, when trying to insert a snippet of code following some templates of Twitter Bootstrap the plugin or the Editor 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 you insert 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 <div> above the second <h2> and placed the paragraph at the end of the html. Because? I do not 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();
  }

Editor: 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");
        }
      }
    }
  });
    
asked by anonymous 11.04.2014 / 19:35

1 answer

1

I found the problem: The insertHtml() function used in the clips, which is part of the Editor's API for some reason makes my HTML change. >

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

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