tinymce超简单配置

效果

配置

该配置基本上只保留基本的几个小功能，适合做微信小程序的web端后台文章编辑器

    //编辑器初始化
    tinymce.init({
        selector: '#mytextarea',
        //语言包
        language: 'zh_CN',
        //高度，要想自定义编辑区高度，设置为auto自己通过css修改
        height: 'auto',
        //提示文字
        placeholder: '文章内容...',
        //皮肤
        skin: 'oxide',

        //翻译过来就是禁止解析的标签
        invalid_elements : 'textarea,em,input',
        menubar: false,
        plugins: [
            ' autolink lists advlist link image charmap print preview',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table image paste ',
            'emoticons codesample hr textpattern pagebreak   '
        ],

        //工具栏的模式
        toolbar_mode: "scrolling",
        //pc端工具栏
        toolbar: 'myCustomToolbarButton code  preview   undo redo ' +
            ' removeformat  bold italic underline strikethrough  blockquote subscript superscript hr codesample forecolor  backcolor  alignleft aligncenter alignright alignjustify ' +
            'bullist numlist  ' +
            ' charmap  emoticons   ' +
            ' link   ',
        //移动端工具栏
        lists_indent_on_tab: false,
        mobile: {
            menubar: false,
            toolbar: 'myCustomToolbarButton undo redo bold italic underline strikethrough'
        },
        //原生鼠标右键菜单开关 true:编辑区域鼠标无法右键
        contextmenu_never_use_native: false,
        //编辑器鼠标右键菜单
        contextmenu: false,
        //编辑器内容样式
        content_style: `
html, body {
    overflow-x: hidden;
}
p,h1{
margin:0 !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 4px
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .1)
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .25)
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .25)
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, .25)
}
img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
`,
        //换行是否保存当前行样式
        keep_styles: false,
        //自动获取焦点
        auto_focus: true,
        //禁止拖动
        resize: false,
        //不显示有tiny驱动
        branding: false,
        //禁用下角的当前标签路径
        elementpath: true,
        //隐藏底部的状态栏
        statusbar: false,
        forced_root_block:"p",
        object_resizing : false,
        resize_img_proportional: false,

        //开启复制粘贴以及拖动桌面图片图片上传
        paste_as_text:true,
        paste_data_images: true,
        //限制可以拖动到编辑器的图片类型
        images_file_types: 'jpg,png',
        // paste_auto_cleanup_on_paste : true,
        // paste_remove_styles: true,
        // paste_remove_styles_if_webkit: true,
        // paste_strip_class_attributes: true,

        // paste_postprocess: function (pluginApi, data) {
        //     console.log(data.node, data.mode, data.source);
        //     // Apply custom filtering by mutating data.node
        //     const additionalNode = document.createElement('div');
        //     additionalNode.innerHTML = '<p>This will go before the pasted content.</p>';
        //     data.node.insertBefore(additionalNode, data.node.firstElementChild);
        //     setTimeout(function () {
        //         data.node.insertBefore(additionalNode, data.node.firstElementChild);
        //     },5000)
        // },
        // paste_auto_cleanup_on_paste : true,
        // paste_remove_styles: true,
        // paste_remove_styles_if_webkit: true,
        // paste_strip_class_attributes: true,

        // paste_preprocess: function(plugin, args) {
        //   //   console.log(args.content);
        //   // args.content = "<img src=\"http://images.meishij.net/p/20100811/879b7feee7d6866f1a665c1e36ed2e21.jpg\">";
        //     args.content = strip_tags(args.content,'<img />');
        //
        // },
        //自定义标记
        // textpattern_patterns: [
        //     {start: '*', end: '*', format: 'italic'},
        //     {start: '**', end: '**', format: 'bold'},
        //     {start: '1. ', cmd: 'InsertOrderedList'},
        //     {start: '* ', cmd: 'InsertUnorderedList'},
        //     {start: '- ', cmd: 'InsertUnorderedList'}
        // ],
        //初始化完成
        init_instance_callback: function (editor) {

            // tinymce.editors['mytextarea']
            // editor.ui.disable();

            // mceInsertContent
            editor.on('ExecCommand', function(e) {

                let length =  editor.getContent({'format': 'text'}).length;


                if (length > 4000) {
                    $('.wordnum').html(`<span style='font-weight: bold;color: #ff0007'>${length}</span>`);
                } else {
                    $('.wordnum').text(length);
                }

            });

        },

        setup: function (editor) {
            editor.ui.registry.addButton('myCustomToolbarButton', {
                text: '保存文章',
                onAction: function () {
                    alert('敬请期待!');
                }
            });

            // editor.on('paste', function (e) {
            //     let pastedData = e.clipboardData.getData('text/plain');
            //     let content = editor.getContent({'format': 'text'});
            //     let contentLength = content.length;
            //     if (contentLength > 0) {
            //         contentLength = contentLength - 15
            //     }
            //     if (contentLength + pastedData.length > 4000) {
            //         e.preventDefault();
            //         e.stopPropagation();
            //         Toast.fire({
            //             icon: 'error',
            //             title: "内容长度超出篇幅限制,或复制内容过多"
            //         })
            //     }
            // });
            editor.on('keyup', function (e) {






                let length =  editor.getContent({'format': 'text'}).length;


                if (length > 4000) {
                    $('.wordnum').html(`<span style='font-weight: bold;color: #ff0007'>${length}</span>`);
                } else {
                    $('.wordnum').text(length);
                }


            });
            editor.on('keydown', function (e) {
                // let length = editor.getContent().length;
                // if (length > 10) {
                //     e.preventDefault();
                //     e.stopPropagation();
                // }

                if (e.keyCode == 9) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (e.shiftKey) {
                        //editor.execCommand('Outdent');
                    } else {
                        //editor.execCommand('Indent');
                    }
                }
                if (e.which === 27) {
                    editor.execCommand('removeformat');
                }
                if (e.ctrlKey == true && e.keyCode == 83) {
                    e.preventDefault();
                    e.stopPropagation();


                    //发送ajax 保存数据

                    //获取标题
                    let title = $.trim($('.title').val());

                    //获取内容
                    let content = editor.getContent();

                    $.ajax({
                        url: "/article",
                        type: 'POST',
                        data: {
                            aid,
                            title,
                            content,

                        },
                        dataType: 'json',
                        success: ({msg, data, code}) => {
                            if (code === 200) {
                                //清除掉编辑器的内容


                            } else {

                            }
                        }
                    })
                }
            });

        },
        // images_upload_url: '/upload.php',
        //图片上传自定义
        images_upload_handler: function (blobInfo, succFun, failFun) {
            let formData = new FormData();
            formData.set('file', blobInfo.blob());
            //发送ajax到后台进行操作
            //发送请求
            $.ajax({
                url: "/aaa",
                type: 'POST',
                data: formData,
                //禁止数据序列化,不加这几个数据接收不到
                processData: false,
                contentType: false,
                cache: false,
                success: function () {
                    failFun('HTTP Error: ' + 500);
                    return;
                }
            })
        },

        file_picker_callback: function (callback, value, meta) {
            alert("aaa");
            //文件分类
            let filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
            //后端接收上传文件的地址
            let upurl = '/demo/upfile.php';
            //为不同插件指定文件类型及后端地址
            switch (meta.filetype) {
                case 'image':
                    filetype = '.jpg, .jpeg, .png, .gif';
                    upurl = 'upimg.php';
                    break;
                case 'media':
                    filetype = '.mp3, .mp4';
                    upurl = 'upfile.php';
                    break;
                case 'file':
                default:
            }
            //模拟出一个input用于添加本地文件
            let input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);
            input.click();
            input.onchange = function () {
                let file = this.files[0];

                let xhr, formData;
                console.log(file.name);
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', upurl);
                xhr.onload = function () {
                    let json;
                    if (xhr.status != 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                    }
                    json = JSON.parse(xhr.responseText);
                    if (!json || typeof json.location != 'string') {
                        failure('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    callback(json.location);
                };
                formData = new FormData();
                formData.append('file', file, file.name);
                xhr.send(formData);
                //下方被注释掉的是官方的一个例子
                //放到下面给大家参考
                /*var reader = new FileReader();
                reader.onload = function () {
                    // Note: Now we need to register the blob in TinyMCEs image blob
                    // registry. In the next release this part hopefully won't be
                    // necessary, as we are looking to handle it internally.
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);

                    // call the callback and populate the Title field with the file name
                    callback(blobInfo.blobUri(), { title: file.name });
                };
                reader.readAsDataURL(file);*/
            };
        },
        // urlconverter_callback: (url, node, on_save, name) => { //设置白名单
        //     return "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190624%2F13%2F1561354063-zdlGYeaIKh.jpeg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628128864&t=f7a3e64e2385ade1411509b6cea41eca";
        // },
    });

可能需要用到的样式

    .tox-toolbar--scrolling {
        overflow-x: hidden;
    !important;
    }

    /*.tox .tox-toolbar__group {*/
    /*    border: 1px solid red;*/
    /*    width: 100%;*/
    /*    justify-content: space-around;*/
    /*}*/

    .tox.tox-tinymce {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }