Question

Im trying to build a front-end page to allow my users to build smarty templates with ckeditor wysiwyg editor.

Im using the insertHtml function to add a button with special attributes (needed to parse it into an smarty variable in the back-end):

// initialize ckeditor
$('textarea.editor').ckeditor({
    contentsCss: '/css/test.css'
});
// get ckeditor instance
ckeditorInstance = $('textarea.editor').ckeditorGet();
// Use some elements (outside the textarea) to add buttons/tokens
// to wysiwyg textarea
$("a.tinymce.tinymce-insert-var").click(function(){
    ckeditorInstance.insertHtml(
        '<input type="button" readonly="readonly" var="{$user-&gt;name}" '
        + 'class="placeholder" value="User Name" />'
    );
});

This works fine on Firefox, IE8 and opera, but with Chrome/Chromium/Safari the button is inserted between a <p> element.

Is there a way to avoid this, or a callback that i can use to remove the paragraph?

Answer 1

I had this problem as well. This is how I did it…

var editor = $('textarea[name=content]').ckeditorGet();
var element = CKEDITOR.dom.element.createFromHtml( '<p>I am a new paragraph</p>' );
editor.insertElement( element );