如何防止在webkit浏览器中CKEditor的insertHtml方法将元素包裹在<p>标签内？

Question

我正在尝试构建一个前端页面，让我的用户使用ckeditor所提供的所见即所得编辑器来构建smarty模板。

我使用insertHtml函数添加了一个带有特殊属性的按钮（需要在后端将其解析为Smarty变量）。

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

这在Firefox、IE8和Opera上运行良好，但在Chrome/Chromium/Safari上，按钮被插入到<p>元素之间。是否有避免这种情况的方法，或者我可以使用回调函数来删除段落吗？

- Strae

Answer 1

我也遇到过这个问题。我的解决方法是...

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

- Louis

---

当我通过insertHtml或insertElement插入HTML时，我插入的代码不会在编辑器中保留。如果我在插入新的HTML后立即点击显示源代码按钮，它就会出现，但是当我关闭源代码按钮时，我插入的HTML就会丢失。您知道如何解决这个问题吗？ - Rodrigo Manguinho

Answer 2

看起来你也在使用jQuery...为什么不强制在CKEditor的.insertHtml函数中包含p标签，然后跟随jQuery的.unwrap始终删除p标签呢？

- JoshuaDavid

Answer 3

在主要的ckeditor配置文件中，有一个选项可以禁用自动插入<p>。 尝试更改CKConfig.EnterMode和CKConfig.ShiftEnterMode的值，例如改为'br'。

Felix

- Felix Geenen

---

尝试过了，它确实阻止了 ckeditor 插入 <p>，但它仍然插入了一些  ，破坏了 HTML 布局（我也不需要 br！）好吧，我想这是正确的答案，即使它没有解决我的问题 ;( - Strae