TinyMCE使用笔记

建议使用者使用官网查看，很详细：TinyMCE中文文档中文手册 (ax-z.cn)

function renderTinymce(hid){
            /*** 示例插件
            tinymce.PluginManager.add('example', function(editor, url) {
                var openDialog = function () {
                    return editor.windowManager.open({
                        title: '这里是弹窗标题',
                        body: {
                            type: 'panel',
                            items: [{
                                type: 'input',
                                name: 'title',
                                label: 'Title'
                            }]
                        },
                        buttons: [{
                            type: 'cancel',
                            text: 'Close'
                        },
                        {
                            type: 'submit',
                            text: 'Save',
                            primary: true
                        }],
                        onSubmit: function (api) {
                            var data = api.getData();
                            // 将输入框内容插入到内容区光标位置
                            editor.insertContent('插入的文字是: ' + data.title);
                            api.close();
                        }
                    });
                };
                // 注册一个工具栏按钮名称
                editor.ui.registry.addButton('example', {
                    text: '工具栏按钮名',
                    onAction: function () {
                        openDialog();
                    }
                });
                // 注册一个菜单项名称 menu/menubar
                editor.ui.registry.addMenuItem('example', {
                    text: 'Example菜单名',
                    onAction: function() {
                        openDialog();
                    }
                });
                return {
                    getMetadata: function () {
                        return  {
                            //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
                            name: "Example plugin",//插件名称
                            url: "http://exampleplugindocsurl.com", //作者网址
                        };
                    }
                };
            });
            */
            // 自定义答题点插件
            tinymce.PluginManager.add('insertAnswer', function(editor, url) {
                // 注册一个工具栏按钮名称
                editor.ui.registry.addButton('insertAnswer', {
                    text: '答题点',
                    onAction: function () {
                        console.log("插入一个答题点");
                        console.log(editor, url);
                        editor.insertContent('<b>插入内容</b>');
                    }
                });
            });

            tinymce.init({ 
                selector: '#'+hid,  // 绑定id区域
                language:'zh_CN',// 汉化,注意大小写
                skin: 'oxide-dark',  // 皮肤
                //inline:true,  // 设置内联模式

                plugins: 'image table insertAnswer',  // 注如果后面要用到image，需要生命引用插件

                /*
                // 上传图片处理
                images_upload_url:null,  // 指定上传图片的后端处理程序的URL。
                images_upload_base_path:null,  // 给返回的相对路径指定它所相对的基本路径。
                images_upload_credentials:false,  // 对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false。
                images_upload_handler:null,  // 此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。
                */

                //toolbar:false,  // 去除工具栏
                toolbar: [
                    'newdocument undo redo cut copy paste | bold underline italic subscript superscript strikethrough removeformat | lineheight alignleft aligncenter alignright alignjustify outdent indent blockquote | forecolor backcolor',
                    'image insertAnswer | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
                ],
                menubar:false,  // 去除菜单栏
                /*
                // 自定义菜单配置
                menu: {
                    file: {title: '文件', items: 'newdocument'},
                    edit: {title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall'},
                    insert: {title: '插入', items: 'link media | template hr'},
                    view: {title: '查看', items: 'visualaid'},
                    format: {title: '格式', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
                    table: {title: '表格', items: 'inserttable tableprops deletetable | cell row column'},
                    tools: {title: '工具', items: 'spellchecker code'}
                },*/

                promotion:false,  // 去掉Upgrade 按钮
                //branding: false,  // 隐藏编辑器界面右下角的“Powered by Tiny”（官方汉化为：由Tiny驱动）字样。
                //elementpath: false,  // 设为false时，可隐藏底栏的元素路径
                statusbar: false,  // 状态栏指的是编辑器最底下、左侧显示dom信息、右侧显示Tiny版权链接和调整大小的那一条。默认是显示的，设为false可将其隐藏。
                //resize: 'both',  // 用于从下拉菜单中移除某些菜单项。当配合menu来创建动态菜单时此选项可能有用。
                //contextmenu: "bold copy ",  // 右键菜单
                // 指定菜单栏及下拉菜单上放置的项目（其还提供创建自定义标题菜单的方法）。其值是一个包含菜单项目的对象，由 菜单项:{标题,子菜单项} 组成。
                placeholder: '请输入篇章内容',  // 内容预展示文本
            });
        }

 

问题收录：

Add by 2024-12-28

问题一：报{"line":2182,"column":44,"sourceURL":"file:///D:/JavaCode/TJR/target/classes/PlugIn/tinymce/tinymce.min.js"}错误。即：Promise.allSettled报错

原因是：是ECMAScript 2020（ES11）中引入的一个新特性，它返回一个在所有给定的promise都已经fulfilled或rejected之后解析的promise，并且结果数组中的每个元素都描述了对应的promise是如何结束的（fulfilled或rejected，以及相应的值或原因）

解决详情请参照：tinymce Promise.allSettled is not a function报错解决方案-CSDN博客

<script type="text/javascript">
        function handlePromise(promiseList) {
            return promiseList.map(promise =>promise.then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err })));
        }
        // {"line":2182,"column":44,"sourceURL":"file:///D:/JavaCode/TJR/target/classes/PlugIn/tinymce/tinymce.min.js"}
        Promise.allSettled = function (promiseList) {
            return Promise.all(handlePromise(promiseList));
        };
    </script>

End by 2024-12-28