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");
}
}
}
});