当前位置：首页 > article >正文

【Tinymce】富文本编辑器在vue项目中的使用；引入付费格式刷，上传视频、图片

article 2024/10/20 3:24:08

引言

富文本编辑器有很多，对比了一下，还是决定用tinymce（号称宇宙最强），基础的插件确实好用，但是一些更好用的插件，比如格式刷等都是高级版（付费），当然也有人说去找不付费的富文本编辑器，那就考虑替换成本了

传送门：
tinymce中文文档

api英文版
本文项目的完整代码

在这里插入图片描述

基础概念&优势：

在这里插入图片描述
如何引入vue直接看文档就行

话不多说，先看效果图：

在这里插入图片描述

预览效果：

在这里插入图片描述

完整配置代码放在传送门&文末

一、如何使用免费格式刷

找到 tinymice 的配置文件，分别在二维数组 plugins 、toolbar 安原有格式增加工具单词名 formatpainter

在这里插入图片描述

下载格式刷 js 文件：传送门
将格式刷文件 (包含下载的目录), 放到如下目录项目 \public\vendor\dcat-admin\dcat\plugins\tinymce\plugins
大功告成：

二、上传视频图片配置

先看效果:

图片上传
在这里插入图片描述
视频上传

代码展示：

 // 图片上传
    const example_image_upload_handler = (blobInfo, progress) =>
        new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            const url = `${process.env.BASE_URL}` + `api/upload/multipartFile`
            xhr.withCredentials = false;
            xhr.open("POST", url);

            xhr.upload.onprogress = (e) => {
                progress((e.loaded / e.total) * 100);
            };
            xhr.onload = () => {
                if (xhr.status === 403) {
                    reject({
                        message: "HTTP错误：" + xhr.status,
                        remove: true
                    });
                    return;
                }

                if (xhr.status < 200 || xhr.status >= 300) {
                    reject("HTTP错误：" + xhr.status);
                    return;
                }

                const json = JSON.parse(xhr.responseText);

                if (!json || typeof json.location != "string") {
                    reject("无效的JSON格式： " + xhr.responseText);
                    return;
                }
                const location = `${process.env.BASE_URL}` + `api/static` + json.location
                // http: //192.168.10.231:8080/static
                // resolve(json.location);
                resolve(location);
            };
            xhr.onerror = () => {
                reject("由于XHR传输错误，图像上传失败。错误代码 " + xhr.status);
            };

            const formData = new FormData();
            formData.append("file", blobInfo.blob(), blobInfo.filename());

            xhr.send(formData);
        });

    const example_file_picker_callback = (callback, value, meta) => {
        if (meta.filetype === "media") {
            const input = document.createElement("input");
            input.setAttribute("type", "file");
            const that = this;
            input.onchange = async function () {
                const file = this.files[0];
                const isValid = await validateVideo(file);
                if (isValid) {
                    var formData = new FormData();
                    formData.append('file', file); // 假设file变量是你的视频文件

                    $.ajax({
                        url: `${process.env.BASE_URL}` + `api/upload/multipartFile`,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            callback(`${process.env.BASE_URL}` + `api/static` + response.location);
                        },
                        error: function (xhr, status, error) {
                            callback(error);
                        }
                    });
                } else {
                    callback();
                }
            };

            input.click();
        }
    }

三、自定义具体的菜单栏–格式

有一个需求是要去除默认是字体选项（fontfamily）
效果图如下：
在这里插入图片描述
具体配置：

menu: {
            format: {
                title: 'Format',
                // blocks fontfamily
                items: 'bold italic underline strikethrough superscript subscript codeformat | styles fontsize align lineheight | forecolor backcolor | language | removeformat'
            },

        },

四、完整的项目初始化配置

主要要展示 plugins 和 toolbar 、 menu
在这里插入图片描述

 tinyMCE.init({
        selector: "#mytextarea", // 选择器，要初始化的textarea的ID
        // 其他配置项
        auto_focus: true,
        branding: false,
        language_url: window.PPATH + "/libs/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        toolbar: true, //工具栏
        menubar: true, //菜单栏
        branding: false, //右下角技术支持
        inline: false, //开启内联模式
        elementpath: false,
        min_height: 400, //最小高度
        max_height: 500, //高度
        skin: "oxide",
        toolbar_sticky: true,
        visualchars_default_state: true, //显示不可见字符
        image_caption: true,
        paste_data_images: true,
        relative_urls: false,
        // remove_script_host : false,
        removed_menuitems: "newdocument", //清除“文件”菜单
        plugins: "formatpainter,lists, advlist,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,pagebreak,preview,searchreplace,table,visualchars,wordcount", //依赖lists插件
        toolbar1: "undo redo | blocks | bold italic indent outdent  alignleft aligncenter alignright | bullist numlist ",
        toolbar2: "formatpainter emoticons alignjustif fullscreen  image insertdatetime media  preview  searchreplace textcolor wordcount",

        menu: {
            format: {
                title: 'Format',
                // blocks fontfamily
                items: 'bold italic underline strikethrough superscript subscript codeformat | styles fontsize align lineheight | forecolor backcolor | language | removeformat'
            },

        },
         images_upload_handler: example_image_upload_handler,
             // 视频上传----
         file_picker_callback: example_file_picker_callback,
         setup: function (editor) {
  // 省略。。。。
            
        },
       
    });