vue中tinyMce富文本使用

背景

使用我也选择了这个富文本编辑器，在开始使用的时候我在网上找了很多的文档，最终我放弃了那些零碎的东西，去tinyMce官网看官方文档（官方才是王道），在这其中我也是踩了很多坑。再加上网上没有什么全面的文档，使用我处于分享和记录，做了这篇文章

使用方式选择

第一种方式需要到官网申请秘钥，否则每次打开都会报一个警告，相当的不友好 第一种方式：通过npm方式

npm install --save @tinymce/tinymce-vue

第二种方式：下载tinymce包放到项目内部

官网下载

(语言包下载)

开鲁

这里主要说说第二种下载到本地的这种方式，第一种方式差别不大注意下细节就行

• 下载包放到项目目录在（我是放在根目录的public下的）

• 在index.html中引入(我这里引入了语言包，注意引入顺序，当然报错了就知道为什么是这个顺序了)

    <script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="/tinymce/langs/zh_CN.js"></script>

• 使用

定义的textarea标签的id在每次加载渲染时都不能一样，我这里是在后面加了时间戳。为什么这样嘞，因为二次渲染问题，这里我遇见了一个恶心的问题，也就是二次渲染失败。找个各种办法，看了很多文档，没作用。最后我妥协了，要是大家有更好的办法处理还请多多指教。废话不说上代码

<template>
    <div class="components-richtext-tinymce">
        <textarea :id="textareaKey" />
        <a-button type="primary" @click="addImage">
            Primary
        </a-button>
    </div>
</template>

<script >
export default {
    name: 'Tinymce',
    data() {
        return {
            textareaKey: 'componentsTinymce' + new Date().getTime(),
            tinymce: null,
        }
    },
    created() {},
    methods: {
        addImage() {
            //向鼠标位置插入内容
            window.tinymce.activeEditor.selection.setContent(`<img style='max-width:100%;' src='你的图片地址' />`)
        },
        async init() {
            if (this.tinymce) return
            this.tinymce = await window.tinymce.init({
                selector: '#' + this.textareaKey,
                language: 'zh_CN',  //设置语言
                width: '100%',
                plugins: [
                    'advlist autolink link image lists charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                    'table emoticons template paste help myImageUpdate',
                ],
                toolbar:
                    'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
                    'bullist numlist outdent indent | link  | print preview media fullpage | ' +
                    'forecolor backcolor emoticons | help',
                menu: {
                    help: { title: 'help', items: 'help | myCustomMenuItem' },
                    insert: {
                        title: 'Insert',
                        items:
                            'myCustomMenuItem link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime',
                    },
                },
                menubar: ' file edit view insert format tools table help',
                content_css: 'css/content.css',

                help_tabs: [
                    'shortcuts', // the default shortcuts tab
                    // 'keyboardnav', // the default keyboard navigation tab
                    'plugins', // the default plugins tab 当要修改组建时此项说明文档建议打开，可以通过此文档跳转到对应说明
                ],
                // media_alt_source: false,
                // draggable_modal: true,
                setup: (editor) => { //这是自定义的图片组件 ，原图片组件是image，可以将上面的myCustomMenuItem换成image这样后可以使用原组件
                    editor.ui.registry.addMenuItem('myCustomMenuItem', {  
                        text: '图片导入',
                        icon: 'image',
                        onAction: () => {
                            alert("图片组件");
                        },
                    })
                },
            })
        },
    },
    mounted() {
        this.init()
    },
    destroyed() {
        window.tinymce.editors = []
    },
}
</script>

这里面的工具栏具体配置官方文档很全面，建议看官网文档。

希望大家多给建议