tinymce-vue的自定义组件，实现多图上传

1.首先安装依赖

npm install tinymce-vue
npm install tinymce

2.组件中引入tinymce-vue

import Editor from 'tinymce-vue'

3.初始化tinymce

                {
                    selector: '#tinymce',
                    media_live_embeds: false,
                    language_url: '../../assets/tinymce/langs/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: '/tinymce/skins/ui/oxide',
                    height: 600,
                    plugins: 'link lists image table wordcount fullscreen hr media',
                    toolbar: [
                    'fullscreen bold italic underline strikethrough hr | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent lineheight blockquote | undo redo',
                    'link unlink image axupimgs media formatpainter removeformat'
                    ]
                }

4.通过tinymce的setup注册按钮事件

                {
                    selector: '#tinymce',
                    media_live_embeds: false,
                    language_url: '../../assets/tinymce/langs/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: '/tinymce/skins/ui/oxide',
                    height: 600,
                    plugins: 'link lists image table wordcount fullscreen hr media',
                    toolbar: [
                    'fullscreen bold italic underline strikethrough hr | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent lineheight blockquote | undo redo',
                    'link unlink image axupimgs media formatpainter removeformat'
                    ],
                    //修改默认属性
                    setup: function (editor) {
                        // 注册一个icon
                        editor.ui.registry.addIcon(
                            "more-img",
                            `<svg viewBox="0 0 1024 1024" width="26" height="26"><path d="M395.264 634.368l-62.976-87.04c-8.192-11.264-22.016-11.264-30.208 0L186.368 707.584c-8.192 11.264-3.584 20.992 11.264 20.992h530.432c14.336 0 19.456-9.216 10.752-20.992L555.52 456.704c-8.704-11.776-22.016-11.264-30.208 0L395.264 634.368z m16.896-262.656c0 28.16 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2-23.04-51.2-51.2-51.2-51.2 23.04-51.2 51.2z" p-id="2140"></path><path d="M118.784 244.736h688.128c-7.168 0-12.8-5.632-12.8-12.8v560.64c0-7.168 5.632-12.8 12.8-12.8H118.784c7.168 0 12.8 5.632 12.8 12.8v-560.64c0 6.656-5.632 12.8-12.8 12.8zM80.896 792.064c0 20.992 16.896 38.4 38.4 38.4h688.128c20.992 0 38.4-17.408 38.4-38.4V231.936c0-20.992-16.896-38.4-38.4-38.4h-688.64c-20.992 0-38.4 17.408-38.4 38.4v560.128z" p-id="2141"></path><path d="M832 333.312h79.36c-6.144 0-10.752-4.608-10.752-10.752v466.944c0-5.632 4.608-10.752 10.752-10.752H832c6.144 0 10.752 4.608 10.752 10.752V322.56c0 6.144-5.12 10.752-10.752 10.752z m-31.744 456.192c0 17.408 14.336 31.744 31.744 31.744h79.36c17.408 0 31.744-14.336 31.744-31.744V322.56c0-17.408-14.336-31.744-31.744-31.744H832c-17.408 0-31.744 14.336-31.744 31.744v466.944z" p-id="2142"></path></svg>`
                        );
                        // 注册一个自定义的按钮
                        editor.ui.registry.addButton("axupimgs", {
                            icon: `more-img`,
                            onAction: function (_) {
                                that.saveImgs = true
                                that.editor = editor
                            }
                        });
                    },
                }

5.实现多图上传组件，使用的是element-UI的el-upload实现

6.将图片插入到富文本中（注意editor对象需要在，注册事件的时候赋值给全局变量  that.editor = editor，不然拿不到插入html的方法insertContent）

            saveImgList() {
                let html = '';
                this.seeting.fileList.forEach(item => {
                    html += `<img src="` + item.url + `" width="300" height="auto" alt="">`
                })
                this.editor.insertContent(html);
                this.saveImgs = false
            }

结语：

1.初始化的时候通过setup注册事件

2.通过this.editor.insertContent(html)插入数据

附加：获取svg代码的方法

通过阿里巴巴矢量图标库获取

标签：fullscreen,vue,zh,自定义,media,tinymce,html,editor
来源： https://blog.csdn.net/QAEARQ/article/details/113618104