博客

效果：能够实现上传图片等功能

第一步：引入vue和tinymce

• tinymce需要从官网上下载到本地，官网地址
  
http://tinymce.ax-z.cn/download-all.php


 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 <script src='./lib/tinymce/js/tinymce/tinymce.min.js'></script>

第二步：封装组件

   components: {
                tinymce: {
                    props: ['value'],
                    data() {
                        return {
                            flag: true
                        }
                    },
                    watch: {
                        value(val) {
                            if (this.flag) {
                                tinyMCE.activeEditor.setContent(val);
                                console.log('val', val);
                            }
                            this.flag = true;
                        }
                    },
                    mounted: function () {
                        var component = this;
                        tinymce.init({
                            target: this.$el.children[0],
                            language: "zh_CN",//汉化版，需要先下载插件
                            menubar: false,//隐藏菜单栏
                            branding: false,
                            forced_root_block: '',//不默认添加p标签
                            // elementpath: false,//隐藏底栏的元素路径
                            // 允许使用的标签，不要设置，太坑了
                            // valid_elements: 	"p[style],span[style],ul,ol,li,strong/b,em,h1,h2,h3,h4,h5,h6,img[style]",
                            // // 允许使用的css，不要设置，太坑了
                            // valid_style: {
                            //     "*": "color,font_size,text-align,line-height,src,width,height"
                            // },
                            // lineheight 行高设置 ，使用前需要先引用插件
                            plugins: "code,textcolor,lists,fullscreen,image,searchreplace,table,charmap,hr",
                            toolbar: [
                                'undo redo | formatselect | charmap bold italic forecolor fontsizeselect | alignleft aligncenter alignright | bullist numlist lineheightselect | code removeformat | image searchreplace table hr |  fullscreen  '
                            ],
                            // removeformat 删除格式    searchreplace  查找替换
                            images_upload_handler: function (blobInfo, succFun, failFun) {
                                var xhr, formData;
                                var file = blobInfo.blob();//转化为易于理解的file对象
                                xhr = new XMLHttpRequest();
                                xhr.withCredentials = false;
                                //上传图片的路径，需要后端提供结构
                                 xhr.open('POST', '/admin/ExamUpload/imageUp.php');
                                xhr.onload = function () {
                                    var json;
                                    json = JSON.parse(xhr.responseText);
                                    succFun(json.data.src);
                                };
                                formData = new FormData();
                                formData.append('file', file, file.name);//此处与源文档不一样
                                xhr.send(formData);
                            },

                            setup: function (editor) {
                                editor.on('change input undo redo execCommand image', function (e) {
                                    component.flag = false;
                                    component.$emit('input', editor.getContent());
                                })
                            },
                        });
                    },
                    template: `<div><textarea  style="height:300px;width:800px" v-model="value"></textarea></div>`
                }
       }

第三步：使用组件

 <div class="demo">
        <tinymce v-model="question_title">请填写试题标题</tinymce>
</div>