当前位置：文江博客话题详情

如何使用外部文件设置Tinymce Init配置

发布于 2025-02-11 17:57:30 字数 60 浏览 2 评论 0原文

我想使用多个编辑器。将定义一个全局Tinymce Init配置。我想根据要求在每个编辑器中覆盖此基本设置。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿咻 2025-02-18 17:57:31

因此，您需要一个Global Tinymce Config，然后根据需要在每个附加编辑器中需要覆盖全局配置？

如果是这种情况，一种方法是使用全局，Tinymce Init Config设置一个通用配置变量。然后，您可以对此进行以下操作之一：

只需将通用配置用作编辑器实例即可。
您可以使用更多JS扩展通用配置。
忽略CommonConfig并根据需要创建新的编辑器（本质上是覆盖它）。

公共配置：

//filename: script.js

let commonConfig = {
    plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
    menubar: false,
    inline: true,
    toolbar_persist: true,
    object_resizing: false,
    mobile: {
        toolbar_mode: 'floating'
    },
    spellchecker_language: 'en',
    spellchecker_active: true
}

和html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TinyMCE Common Config</title>
        <script src="commonEditor.js"></script>
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            tinymce.init({
                selector: "#editor-description-content",
                toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
                fixed_toolbar_container: '#editor-description-toolbar',
                placeholder: "Add a description",

                setup: (editor) => {

                    editor.on('focus', () => {
                        document.getElementById('editor-description-wrap').classList.add('enabled');
                    });
                  },
                  ...commonConfig
            });

            //Script without common config
            tinymce.init({
                selector: "#editor",
                plugins: "autocorrect powerpaste tinymcespellchecker",
                menubar: true
            });
        </script>
    </head>
    <body>
        <h2>Textarea 1 with common config</h2>
        <div name="" id="editor-description-content" cols="30" rows="10">A tinyMCE editor with a common config</div>
        <h2>Textarea 2 without common config</h2>
        <textarea name="" id="editor" cols="30" rows="10"></textarea>
    </body>
</html>

So you need one, global TinyMCE config, and then override the global config if needed in each additional editor based on what you need?

If that's the case, one way to do this is to set up a common config variable with the global, TinyMCE init config. Then you can do one of the following with it:

Just use the common config as your editor instance.
you could extend the common config with more js.
Ignore the commonconfig and create a new editor as needed (essentially overwriting it).

The common config:

//filename: script.js

let commonConfig = {
    plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
    menubar: false,
    inline: true,
    toolbar_persist: true,
    object_resizing: false,
    mobile: {
        toolbar_mode: 'floating'
    },
    spellchecker_language: 'en',
    spellchecker_active: true
}

And the HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TinyMCE Common Config</title>
        <script src="commonEditor.js"></script>
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            tinymce.init({
                selector: "#editor-description-content",
                toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
                fixed_toolbar_container: '#editor-description-toolbar',
                placeholder: "Add a description",

                setup: (editor) => {

                    editor.on('focus', () => {
                        document.getElementById('editor-description-wrap').classList.add('enabled');
                    });
                  },
                  ...commonConfig
            });

            //Script without common config
            tinymce.init({
                selector: "#editor",
                plugins: "autocorrect powerpaste tinymcespellchecker",
                menubar: true
            });
        </script>
    </head>
    <body>
        <h2>Textarea 1 with common config</h2>
        <div name="" id="editor-description-content" cols="30" rows="10">A tinyMCE editor with a common config</div>
        <h2>Textarea 2 without common config</h2>
        <textarea name="" id="editor" cols="30" rows="10"></textarea>
    </body>
</html>

回复收藏 0 原文

~没有更多了~