Vue中使用TinyMce的一些问题记录

前言：

TinyMCE 是一个开源的(LGPL 授权协议)富文本编辑器，有关详细介绍下面有相关中文、英文官网说明：

英文官网：https://www.tiny.cloud/docs/

中文官网：http://tinymce.ax-z.cn/

本文的所使用的环境如下:

1 、"@tinymce/tinymce-vue": "^3.2.1"

2、 "tinymce": "^5.4.1"

3 、 "vue": "^2.6.11"

正文：

步骤一：在Vue中引入TinyMce

npm install @tinymce/tinymce-vue -S

步骤一：引入TinyMce到你的子组件

import Editor from "@tinymce/tinymce-vue"

步骤三：注册tinymce-vue到当前子组件中

// 注册tinymce组件
  components: {
    "editor": Editor
  }

步骤四：渲染到templete中去

<template>
<div>
    <editor id="tinymce" v-model="content" :init="init"></editor>
</div>
</template>

editor提供三个必要的参数：

id: 编辑器初始化时的渲染容器

content: 编辑器所导出来的编辑内容（富文本格式）

init: 编辑器初始化配置参数

以下提供 初始化配置参数（仅供参考），可根据自己的需求进行删减配置：

 init: {
                // 选择器
                selector: "#tinymce",
                theme: "silver", //设置主题
                suffix: ".min",
                branding: false, //隐藏右下角
                paste_data_images: true, // 允许粘贴图像
                contextmenu: "bold copy", //上下文菜单
                width: "100%", //编辑器宽度
                height: 710, //编辑器高度
                auto_focus: true, // 自动获取光标
                toolbar_mode: "wrap", //工具栏布局
                language: "zh_CN", //中文语言
                language_url: "/tinymce/langs/zh_CN.js", //语言包
                skin_url: "/tinymce/skins/ui/oxide", //主题色
                plugins: "link template lists preview advlist insertdatetime emoticons codesample charmap autolink autosave anchor fullscreen image code help table wordcount ", // 插件列表
                // 工具栏列表
                toolbar1: "codesample code undo redo cut | alignleft aligncenter alignright alignjustify outdent indent |insertdatetime copy paste image preview |forecolor backcolor bold italic underline strikethrough link anchor  restoredraft |blockquote subscript superscript removeformat  emoticons table fullscreen",
                toolbar2: `charmap  help bullist numlist | styleselect formatselect fontselect fontsizeselect`,
                codesample_global_prismjs: true, //全局使用代码高亮js
                content_css: "/css/prism.css", //代码高亮css
                codesample_languages: [{
                        text: "HTML/XML",
                        value: "markup"
                    },
                    {
                        text: "JavaScript",
                        value: "javascript"
                    },
                    {
                        text: "CSS",
                        value: "css"
                    },
                    {
                        text: "Sql",
                        value: "sql"
                    },
                    {
                        text: "Nginx",
                        value: "nginx"
                    },
                    {
                        text: "PHP",
                        value: "php"
                    },
                    {
                        text: "Ruby",
                        value: "ruby"
                    },
                    {
                        text: "Python",
                        value: "python"
                    },
                    {
                        text: "Java",
                        value: "java"
                    },
                    {
                        text: "C",
                        value: "c"
                    },
                    {
                        text: "C#",
                        value: "csharp"
                    },
                    {
                        text: "C++",
                        value: "cpp"
                    },
                    {
                        text: "Dart",
                        value: "dart, "
                    }
                ],
                // 自定义特殊符号
                charmap_append: [
                    [0x2615, "morning coffee"],
                    [0x2600, "sun"],
                    [0x2601, "cloud"]
                ],
                menubar: "file edit insert view format table tools help", //菜单栏
                fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", //字体预设大小
                images_upload_handler: (blobInfo, success, failure) => {
                    let formData = new FormData();
                    const imgFile = blobInfo.blob();
                    formData.append("file", imgFile);
                    upLoadFile("/upload", formData)
                        .then(res => {
                            if (res.success) {
                                let imgSrc = res.data.url;
                                success(imgSrc);
                                return;
                            }
                            failure: (res) => {
                                console.log(res.message)
                            }
                        })
                        .catch(err => {
                            console.log(err); 
                        });
                }
            }

以上配置包含了图片上传到后台服务的示例，配置效果图如下：

（有人说那个看板娘是咋回事?，编辑器还自带看板娘？ NO!NO!NO! 那是我全局配置的看板娘，作为你一个宅男程序猿，这种二次元的东西怎么少得了呢，手动滑稽~）

配置到这儿你以为差不多了？to young to simple?，配置到这儿还没有汉化，官方提供的是英文版的，需要我们自行汉化，tinymce-vue需要自费购买的(土豪请绕过) ，在这儿我们需要去下载tinymce安装包

npm install tinymce -S

下载完成之后，我们在node_modules包管理文件中找到tinymce文件夹，把tinymce拷贝放到你项目当中的静态资源文件当中去(我这儿用的是Vue-cli4,静态资源文件是放在根目录下的public文件夹当中的，如下图)

然后参考我上面的配置文件引入语言包就行了，汉化包下载地址