是否可以在 CkEditor 或 TinyMce 中将工具栏或菜单栏与编辑器分开？答案

【问题标题】：Is it possible in CkEditor or TinyMce to split the toolbar or menu bar from editor?是否可以在 CkEditor 或 TinyMce 中将工具栏或菜单栏与编辑器分开？
【发布时间】：2018-06-24 18:43:47
【问题描述】：

我在我的网站中使用富文本编辑器 ckeditor，它工作正常，但我希望它看起来像博主使用的文本编辑器，如下图所示。怎么可能？

this is how i want it to be

【问题讨论】：

您希望在编辑器工具之间使用竖线。对吗？
不，我想将工具栏与编辑器分开，使其比编辑器更宽，如图所示

标签： javascript html ckeditor tinymce richtextbox

【解决方案1】：

CKEditor 4.x 你有sharedspace 插件，它允许你在指定元素中锚定编辑器工具栏，并将它用于你网页上的所有编辑器。

您可以在此处找到带有源代码的共享空间插件演示：https://sdk.ckeditor.com/samples/sharedspace.html

关于将所有工具栏项移动到一行中。请打开standard 或full 示例并使用Toolbar Configurator。如果删除行分隔符，您将获得单行工具栏。接下来，您只需复制工具栏配置并将其粘贴到config.js（如果您想将其用于所有编辑器）或编辑器实例配置（如果您想将其用于单个编辑器）。

注意：该示例中的可用空间太小，无法将所有按钮放在一行中，但当然在您的网页上，可用空间可能会更宽。

【讨论】：

【解决方案2】：

如果您使用 TinyMCE 的内联模式，您可能会得到类似的结果。 https://www.tinymce.com/docs/get-started/use-tinymce-inline/

【讨论】：

【解决方案3】：

如果您使用 TinyMCE 的内联编辑选项，您可以为其工具栏/菜单栏定义一个固定位置：

https://www.tinymce.com/docs/configure/editor-appearance/#fixed_toolbar_container

根据您的图片，您可以将其放置在位于页面顶部的 div 中，它将显示在那里，而不是“附加”编辑器。

【讨论】：