如何配置TinyMCE编辑器，例如Google文档

问题描述

我想用TinyMCE制作类似google docs（具有基本功能）的软件。我尝试给出与Google文档相同的外观。

但是，问题是，如果我添加多个页面（在同一页面中初始化多个编辑器），则每个可编辑区域都会显示多个工具栏。

但是，我希望所有可编辑区域都使用相同的工具栏，或者显示该工具栏对应的可编辑区域为焦点。该怎么做？

这是我的配置代码...

  tinymce.init({
    mode: 'specific_textareas',editor_selector : 'mytextarea',// inline: true
    height: '100vh',plugins: ['print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons'],toolbar: ['undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | insertfile image link'],menubar: 'favs file edit view insert format tools table help',content_css: 'css/content.css',content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',toolbar_mode: 'floating',toolbar_sticky: true,branding: false,resize: false,statusbar: false
  });

谢谢。

解决方法

不幸的是，这既不容易也不简单，需要您了解Java语言。

一般而言，您必须：

您需要使用内联模式，这意味着您将不会使用iframe，而是直接在页面上编辑HTML。这意味着您必须自己重新创建纸张外观。
使用fixed_toolbar_container选项在自定义div中渲染TinyMCE工具栏。所有工具栏都应指向该div。
使用toolbar_persist选项可使所有工具栏在页面加载时呈现并始终保持可见状态。现在，您将在屏幕上看到多个工具栏
这是复杂的部分。 Create events for focus and blur，然后使用TinyMCE.editor.ui.hide and TinyMCE.editor.ui.show创建自己的手动逻辑来打开和关闭正确的工具栏。

即插即用解决方案远非如此，但希望这可以提供一个起点...

javascript tinymce wysiwyg