tinymce-vue的使用

原创
01/07 16:03
阅读数 2.4K

tinymce-vue可以单独引用,不用再引用tinymce

封装:

<template>
    <div>
        <Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue"  ></Editor>
    </div>
</template>

<script>
    //引入tinymce-vue
    import Editor from '@tinymce/tinymce-vue'
     //公共的图片前缀
    import Global from "./Global";
    export default {
        components: {Editor},
        props: {
            //编号
            id:{
                type:String
            },
            //内容
            value: {
                type: String,
                default: ''
            },
            //是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            //插件
            plugins: {
                type: [String, Array],
                default: 'advlist autolink link image lists charmap print preview'
            },
             //工具栏
            toolbar: {
                type: [String, Array],
                default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
            }
        },
        data() {
            let that = this;
            return {
                tinymceId: this.id || 'vue-tinymce'+ Date.parse(new Date()),
                myValue :this.value,
                init:{
                    //汉化,路径是自定义的,一般放在public或static里面,汉化文件要自己去下载
                    language_url: '/tinymce/zh_CN.js',
                    language: 'zh_CN',
                    //皮肤
                    skin: 'oxide',
                    //插件
                    plugins: this.plugins,
                    //工具栏
                    toolbar: this.toolbar,
                    //高度
                    height: 500,
                    //图片上传
                    images_upload_handler: function (blobInfo, success, failure) {
                        //文件上传的formData传递,忘记为什么要用这个了
                        let formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        //上传的api,和后端配合,返回的是图片的地址,然后加上公共的图片前缀
                        that.$api.system.uploadImage(formData).then(res=>{
                            var url = Global.baseUrlImg + res;
                            console.log(url)
                            success(url)
                        }).catch(res => {
                            failure('图片上传失败')
                        });
                    }
                }
            }
        },
        methods:{

        },
        watch: {
            //监听内容变化
            value(newValue) {
                this.myValue = newValue
            },
            myValue(newValue) {
                this.$emit('input', newValue)
            }
        }
    }
</script>
<style>
    //没有申请key的话会出现一个弹窗要去申请key,在这里把那个弹窗隐藏,当然也可以自己申请key再使用
    .tox-notifications-container{
        display: none;
    }
    //在页面正常使用时不用加这个样式,在弹窗使用时,要加这个样式,因为使用弹窗,z-index层数比较低,工具栏的一些工具不能使用,要将z-index层数提高。
    .tox-tinymce-aux{
        z-index: 5000 !important;
    }
</style>

引用:

html:

<TinymceEditor :value="content" @input="newContent"></TinymceEditor>

js:

import TinymceEditor from "@/components/editor"
export default {
    components: {
        TinymceEditor
    },
    data() {
        return {
            content:""
        }
    },
    methods: {
    //获取富文本的内容
    newContent(val){
        Vue.set(this.currInfo,"content",val);
    }
}

遇到的问题:

1.根据百度的方法找到的封装有同时引入两个插件的,然后同时引入tinymce会出现空白,感觉是两个插件有冲突,我的解决办法是不要同时引入。

只要引用tinymce-vue就可以了,初始化到官网上去看。

2.在弹窗中引用,出现工具栏的工具不能使用的情况时增加样式:

.tox-tinymce-aux{ z-index: 5000 !important; }

版本如下:

"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.1.5",

其它的版本自己找到控制的z-index的样式覆盖,一般f12->搜索tox-tinymce就可以找到

 

展开阅读全文
打赏
0
0 收藏
分享

作者的其它热门文章

Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部