CODEWITHSUNDEEP
webkitckeditorsmartywysiwyg
Strae
Strae

Reputation: 19445

How to prevent CKEditor insertHtml to wrap element within <p> in webkit browsers?

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?

Upvotes: 3

Views: 5817

Answers (3)

Louis
Louis

Reputation: 46

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

Upvotes: 3

Felix Geenen
Felix Geenen

Reputation: 2707

in the main ckeditor config-file there is an option to disable automatic <p> inserts. try to change the value of CKConfig.EnterMode and CKConfig.ShiftEnterMode for example to 'br'.

Felix

Upvotes: 0

JoshuaDavid
JoshuaDavid

Reputation: 9519

Looks like you're using jQuery also... why don't you force the inclusion of the p tag within CKEditor's .insertHtml function, then follow it up with jQuery's .unwrap to always remove the p tags?

Upvotes: 0

Related Questions