Question

我正在使用Ckeditor作为Chrome浏览器中文本输入的丰富编辑器。我还添加了一些html id标签，以便在系统获取数据后通过bs4轻松解析。

以下是我在html中的设置：

CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})

在config.js中：

config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];

// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';

// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';

// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';

config.allowedContent = True;

};

虽然我已经按照说明允许在config.jd中使用config.allowedContent = *;保留所有html标记内容。但是，它似乎不起作用，因为我在获取数据时获得了以下结果（CKEDITOR.instances.editor.getData()）：

<span style='font-size:11.0pt;'> content </span>

而不是我想要的：

<span id="news_content" style='font-size:11.0pt;'> content </span>

换句话说，它仍然删除了我添加的所有html标签。

当我检查源代码时，我发现相同的textarea内容产生了两次，其中一个标签被置于隐藏格式，即

<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">

编辑器在真正的textarea中生成另一个允许我编辑的版本。但是，这是没用的，因为所有的html标签都被剥离了。

所以，我的问题是，如何在真正的textarea中保留html标签，这样我就可以在编辑和提交后用id标签解析html。有人可以就此提出建议吗？非常感谢。

Answer 1

我可能无法回答我自己的问题，但我喜欢与遇到类似情况的人分享我的解决方案。

简而言之，最后我放弃使用ckeditor或任何插件编辑器，因为他们中的许多人都会删除html标签，这对我来说在后续过程中是必不可少的。

感谢html5，我的解决方案是使用可编辑的div。设置非常简单如下：

的CSS：

#my-content {
  box-shadow: 0 0 2px #CCC;
  min-height: 150px;
  overflow: auto;
  padding: 1em;
  margin: 5px;
  resize: vertical;
  outline: none;
}

HTML：

<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>

js script：

$('.editable').each(function(){
    this.contentEditable = true;
});

到目前为止，我很满意它，它显示了html代码显示和保留我添加的所有标签的确切内容。唯一的缺点是它没有提供任何格式编辑工具栏。我的解决方案是为它制作一个，通过以下链接，您可以获得一个非常好的教程，以制作一个带有即用型演示的工具栏作为插图。

https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657

希望这会有所帮助。

Ckeditor允许html标签的内容

1 个答案: