动态更改TinyMCE配置

TinyMCE 是一个流行的基于 JavaScript 的富文本编辑器，允许用户在网页上进行文本编辑。动态更改 TinyMCE 的配置可以通过多种方式实现，具体取决于你需要更改的配置项和应用场景。以下是一些常见的方法：

方法 1: 重新初始化 TinyMCE

一种简单的方法是销毁现有的 TinyMCE 实例，然后使用新的配置重新初始化它。这种方法适用于需要大规模更改配置的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE Dynamic Configuration</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <textarea id="mytextarea">Hello, World!</textarea>
    <button id="changeConfig">Change Config</button>

    <script>
        // 初始化 TinyMCE
        tinymce.init({
            selector: '#mytextarea',
            plugins: 'lists link image',
            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image'
        });

        document.getElementById('changeConfig').addEventListener('click', function() {
            // 销毁现有的 TinyMCE 实例
            tinymce.get('mytextarea').remove();

            // 使用新的配置重新初始化 TinyMCE
            tinymce.init({
                selector: '#mytextarea',
                plugins: 'code',
                toolbar: 'code'
            });
        });
    </script>
</body>
</html>

方法 2: 动态更改特定配置项

对于某些配置项，可以直接通过 TinyMCE 的 API 动态更改，而不需要重新初始化。例如，可以动态更改工具栏的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE Dynamic Configuration</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <textarea id="mytextarea">Hello, World!</textarea>
    <button id="changeToolbar">Change Toolbar</button>

    <script>
        // 初始化 TinyMCE
        tinymce.init({
            selector: '#mytextarea',
            plugins: 'lists link image',
            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image'
        });

        document.getElementById('changeToolbar').addEventListener('click', function() {
            // 获取 TinyMCE 实例
            var editor = tinymce.get('mytextarea');

            // 动态更改工具栏配置
            editor.ui.registry.addToolbarButton('mybutton', {
                text: 'My Button',
                onAction: function () {
                    editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
                }
            });

            editor.ui.registry.addContextToolbar('textselection', {
                predicate: function (node) {
                    return !editor.selection.isCollapsed();
                },
                items: 'mybutton | bold italic | link',
                position: 'selection',
                scope: 'node'
            });

            editor.ui.registry.addContextToolbar('image', {
                predicate: function (node) {
                    return node.nodeName.toLowerCase() === 'img';
                },
                items: 'alignleft aligncenter alignright | imageoptions',
                position: 'node',
                scope: 'node'
            });

            // 重新渲染工具栏
            editor.ui.registry.addContextToolbar('textselection', {
                predicate: function (node) {
                    return !editor.selection.isCollapsed();
                },
                items: 'mybutton | bold italic | link',
                position: 'selection',
                scope: 'node'
            });
        });
    </script>
</body>
</html>

方法 3: 使用 TinyMCE API 动态更改内容

你还可以使用 TinyMCE 的 API 动态更改编辑器的内容和其他属性。例如，动态更改编辑器的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE Dynamic Configuration</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <textarea id="mytextarea">Hello, World!</textarea>
    <button id="changeContent">Change Content</button>

    <script>
        // 初始化 TinyMCE
        tinymce.init({
            selector: '#mytextarea'
        });

        document.getElementById('changeContent').addEventListener('click', function() {
            // 获取 TinyMCE 实例
            var editor = tinymce.get('mytextarea');

            // 动态更改编辑器内容
            editor.setContent('<p>This is the new content!</p>');
        });
    </script>
</body>
</html>