在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片

近日我在百度文库上发现有人搬运我这篇文章去盈利，接下来我改成vip文章了，我自己免费分享，别个赚钱，十分不爽

1.安装 

# npm install tinymce -S

2.把node_modules\tinymce里面的文件 包括tinymce文件夹 全部复制到static文件夹下面，如下图

3.在mian.js中引入tinymce（也可以在组件中引入）

import Tinymce from 'tinymce'
Vue.prototype.$tinymce = Tinymce; 

4.完整代码

<template>
    <div class="SEditor">
        <textarea class="my_editor" id="Editor"  v-model="Editortext"></textarea>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            Editortext:'',
            }
        },
        mounted() {
        this.tinymce();
        },

        beforeDestroy() {

//这个必须要加，不然初始化的时候会有问题
            this.$tinymce.remove()
        },
        methods: {
            tinymce() {
                let _this = this;

                //这一句代码是重点 不写会报错theme.js:1 Uncaught SyntaxError: Unexpected token <
                _this.$tinymce.baseURL = '/static/tinymce'

                _this.$tinymce.init({
                    selector: "#Editor",
                    language_url: '../../../../static/tinymce/zh_CN.js',//设置中文
                    language: 'zh_CN',
                    plugins: [ //配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的
                        'advlist autolink link image lists charmap  preview hr anchor pagebreak ',
                    ],
                    //工具框，也可自己随意配置
                    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ',
                    image_advtab: true,
                    table_default_styles: {
                        width: '100%',
                        borderCollapse: 'collapse'
                    },
                    image_title: false, // 是否开启图片标题设置的选择，这里设置否
                    automatic_uploads: true,
                    // 图片异步上传处理函数
                    images_upload_handler: (blobInfo, success, failure) => {
                        var formData;
                        formData = new FormData();
                        formData.append('images',blobInfo.blob(), blobInfo.filename());
                            // _this.$api.uploadScenicFace这个是我调用后台图片上传接口的函数
                            _this.$api.uploadScenicFace(formData, _this.token, function(data) {
                                // 图片上传成功以后调用success,图片就可以在富文本编辑器中显示了
                                success(data.url);
                            });
                    },
                    init_instance_callback: function(editor) {
                        editor.on('keyup', () => {
                            // 获取富文本编辑器里面的内容
                            _this.Editortext = editor.getContent();
                        });
                    }
                }).then(resolve => {
                    // 初始化富文本编辑器里面的内容
                    resolve[0].setContent(_this.Editortext)
                });
            },

            }
    }
</script>

5.纠错

theme.js:1 Uncaught SyntaxError: Unexpected token <

设置一下baseURL

_this.$tinymce.baseURL = '/static/tinymce'

更多功能配置可以到官方网站上进行查看tinymce | Docs | TinyMCE
完整实例：tinymce: 在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片

新封装的vue-tinymce

传送门：在vue中使用tinymce富文本编辑器+tinymce富文本编辑器插入图片+自定义菜单按钮封装+vue-tinymce富文本_vip.khan的博客-优快云博客