是否可以在 CkEditor 或 TinyMce 中从编辑器中拆分工具栏或菜单栏？

Question

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

this is how i want it to be

Answer 1

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

Answer 2

如果您使用 TinyMCE 的内联编辑选项，您可以为其定义一个固定位置 toolbar/menubar:

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

根据您的图片，您可以将其放置在位于页面顶部的 div 中，它会出现在那里而不是 "attached" 编辑器。

Answer 3

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

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

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

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