0

我在使用我的客户插件将 HTML 插入 WYSYWIG 时遇到问题 我见过的有关此主题的所有互联网链接都说您应该使用

FCK.InsertHtml();

但是使用它我遇到了以下问题：InsertHtml() 之前的 HTML 内容：

<div>
<em>
<strong>
<font size="5">
<font face="Georgia">

123

</font>
</font>
</strong>
</em>
</div>

然后我选择字符'2'并使用 FCK.InsertHtml(); 插入一个 html；并获得以下信息：

<div>
<em>
<strong>
<font size="5">
<font face="Georgia">

1

</font>
</font>
</strong>
</em>

<a class="subscribeNow" href="#ORDER_FORM_LINK#">2</a>

<em>
<strong>
<font size="5">
<font face="Georgia">

3

</font>
</font>
</strong>
</em>
</div>

正如你所见，WYSYWIG 会自动关闭一些标签，结果模型被破坏了。有没有人知道如何在没有这些额外的源操作的情况下插入 html？

4

1 回答 1

0

首先 - FCKEditor 是 CKEditor 的前身，它的支持在几年前就被放弃了。我的回答对 CKEditor 有效，但我不确定是否也适用于 FCKeditor。

editor#insertHtml是一种在用户粘贴内容时大量使用的方法——这是它的主要功能。在当前的 CKEditor 版本中，此方法基于浏览器中实现的本机 HTML 插入算法工作。所以事实上我们，CKEditor 的开发者，对这些算法没有太多要说的——我们不能改变它们。但是，除了我们不太喜欢的浏览器之间的许多差异之外，我们接受这些算法，因为它们的行为或多或少是正确的。

为什么是正确的？假设您在 MSWord 中有粗体文本。您复制了它并将其粘贴到带下划线的文本中。怎么了？您粘贴的文本没有下划线，只是加粗。这是因为 MSWord 假定您想要保留复制内容的样式。CKEditor 的工作原理完全相同。

您的解决方案将是使用editor#insertElement无需这些特殊操作即可插入数据（一个元素）的方法。如果您想一次插入更多元素，那么您必须在循环中执行此操作。

这是示例用法insertElement（您可以在将编辑器的内容设置为并将插入符号代替之后在http://ckeditor.com/demo上对其进行测试）：<p><strong>te^xt</strong></p>^

var editor = CKEDITOR.instances.editor1,
    element = CKEDITOR.dom.element.createFromHtml( '<u>xxx</u>' );

editor.insertElement( element ); // result: <p><strong>te<u>xxx</u>xt</strong></p>
editor.insertHtml( '<i>yyy</i>' ); // result: <p><strong>te<u>xxx</u></strong><i>yyy</i><strong>xt</strong></p>

如果您在 Chrome 浏览器之外进行测试，结果可能会有所不同。

PS。在新的 CKEditor 版本中，插入内容而不保留样式将被简化，因为我们已经意识到了这个问题。

于 2012-07-14T16:39:42.443 回答