如何像谷歌文檔一樣配置 TinyMCE 編輯器

Question

我想用 TinyMCE 制作一個像 google docs（具有基本功能）這樣的軟件。 我試圖給出與谷歌文檔相同的外觀。

但是，問題是，如果我添加多個頁面（在同一頁面中初始化多個編輯器），它會為每個可編輯區域顯示多個工具欄。

但是，我希望所有可編輯區域都有一個相同的工具欄，或者顯示相應的可編輯區域是焦點的工具欄。 怎么做？

這是我的配置代碼...

  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
  });

提前致謝。

Answer 1

不幸的是，這既不容易也不直接，並且需要您了解 Javascript。

一般來說，您必須：

1. 您需要使用內聯模式，這意味着您不會使用 iframe，而是直接在頁面上編輯 HTML。 這意味着您必須自己重新創建紙張外觀。

2. 使用fixed_toolbar_container選項在自定義 div 內呈現 TinyMCE 工具欄。 所有工具欄都應該指向這個 div。

3. 使用toolbar_persist選項讓所有工具欄在頁面加載時呈現並始終保持可見。 您現在可以在屏幕上看到多個工具欄

4. 這是復雜的部分。 創建用於 focus 和 blur 的事件，然后使用TinyMCE.editor.ui.hide 和 TinyMCE.editor.ui.show創建您自己的手動邏輯來打開和關閉正確的工具欄。

遠非即插即用的解決方案，但希望這提供了一個起點......