在使用很多富文本编辑器后，个人还是觉得 tinymce 最好用。

本文介绍一下 tinymce-vue 与 Vue 的整合。

说明一下，这里使用的是官方文档的方式，需要注册 tinymce 账号，获取 api-key，是免费的。

 

官方GitHup地址：点此

官方文档地址：点此

官网后台地址：点此

 

一、注册账号

官网地址：https://www.tiny.cloud/

注册一个账号，然后登录，在后台可以获取到 API key



 

二、关键代码

1、下载依赖

在终端执行以下命令，会自动往 package.json 里添加一行记录

npm install --save @tinymce/tinymce-vue

 

2、整合 tinymce 编辑器代码

① 在 script 里引入库

import Editor from '@tinymce/tinymce-vue'

 

② 在 components 里加入 Editor

components: {
    'editor': Editor
},

 

③ data里设置变量

data() {
    return {
        tinymceFlag: 1,
        tinymceInit: {},
        form: {
            content: "",
        }
    };
},

 

④ 引入编辑器

<editor api-key="你的API Key"
        :init="tinymceInit" :key="tinymceFlag" v-model="form.content"/>

 

⑤  初始化配置

mounted() {
    this.tinymceInit = {
        language: "zh_CN",
        height: 600,
        theme: "silver",
        browser_spellcheck: true, // 拼写检查
        branding: true, // 去水印
        // elementpath: false,  //禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: true, // 隐藏最上方menu
        fontsize_formats:
            "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px",
        plugins:
            "print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount  imagetools  contextmenu colorpicker textpattern help code",
        toolbar:
            "formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link image  | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat| code",
        paste_webkit_styles: true,
        paste_data_images: true,  //  设置为允许粘帖图片
        //    上传方式1：填写images_upload_url和images_upload_base_path
        images_upload_url: '/upload/file/tinymce', //  图片上传地址
        contextmenu: `inserttable | cell row column deletetable`,
        relative_urls: false,
        remove_script_host: false,
    };
    this.tinymceFlag++;
},

 

三、完整代码

下面是一个文章发布页面的完整代码，博主删除了其他不相关的东西，只保留了标题和编辑器。

<template>
    <div>
        <Card>
            <Row>
                <Form ref="form"
                      :model="form"
                      :rules="formValidate"
                      style="position:relative"
                      label-position="top">

                    <FormItem prop="title">
                        <Input v-model="form.title" placeholder="请输入标题"/>
                    </FormItem>

                    <FormItem prop="content" class="form-wangEditor">
                        <editor api-key="有的API Key"
                                :init="tinymceInit" :key="tinymceFlag" v-model="form.content"/>
                    </FormItem>

                    <Form-item class="br">
                        <Button
                                type="primary"
                                @click="handelSubmit"
                                style="width:100px">发布
                        </Button>

                    </Form-item>

                </Form>
            </Row>
        </Card>
    </div>
</template>

<script>
    import {addArticle} from "@/api/index";
    import Editor from '@tinymce/tinymce-vue'

    export default {
        name: "blog-article-add",
        components: {
            'editor': Editor
        },
        data() {
            return {
                tinymceFlag: 1,
                tinymceInit: {},
                form: {
                    // 添加或编辑表单对象初始化数据
                    title: "",
                    content: "",
                },
                formValidate: {
                    // 表单验证规则
                    title: [{required: true, message: "标题不能为空", trigger: "blur"}],
                },
                backRoute: "",
            };
        },
        methods: {
            init() {
                this.handleReset();
                this.backRoute = this.$route.query.backRoute;
            },
            handleReset() {
                this.$refs.form.resetFields();
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        addArticle(this.form).then(res => {
                            if (res.success) {
                                this.$Message.success("操作成功");
                                this.handleReset();
                                this.submited();
                                this.closeCurrentPage();
                            }
                        });
                    }
                });
            },
            // 关闭当前页面
            closeCurrentPage() {
                this.$router.push({
                    name: this.backRoute
                });
            },
            submited() {
                this.$emit("submited", true);
            },

        },
        mounted() {
            this.init();

            this.tinymceInit = {
                language: "zh_CN",
                height: 600,
                theme: "silver",
                browser_spellcheck: true, // 拼写检查
                branding: true, // 去水印
                // elementpath: false,  //禁用编辑器底部的状态栏
                statusbar: false, // 隐藏编辑器底部的状态栏
                paste_data_images: true, // 允许粘贴图像
                menubar: true, // 隐藏最上方menu
                fontsize_formats:
                    "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px",
                plugins:
                    "print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount  imagetools  contextmenu colorpicker textpattern help code",
                toolbar:
                    "formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link image  | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat| code",
                paste_webkit_styles: true,
                paste_data_images: true,  //  设置为允许粘帖图片
                images_upload_url: '/upload/file/tinymce', //  图片上传地址
                contextmenu: `inserttable | cell row column deletetable`,
                relative_urls: false,
                remove_script_host: false,
            };
            this.tinymceFlag++;
        },
        activated() {
            this.tinymceFlag++;
        }
    };
</script>

 

四、补充

1、上传图片

需要配置 images_upload_url 为后台接口URL，POST 请求，传参为 file

需要返回JSON格式为

{ "location": "folder/sub-folder/new-location.png" }

后台代码

@RequestMapping(value = "/file/tinymce", method = RequestMethod.POST)
public Map<String, String> tinymceFileUpload(MultipartFile file) {
    Map<String, String> resultMap = new HashMap<>();
    // TODO 文件上传操作
    String url = "";
    resultMap.put("location", url);
    return resultMap;
}

 

2、切换路由后，编辑器被清空，不能操作

这个问题，上面代码已经解决，通过配置 activated，让它重新渲染

详情参考这篇文章解决