富文本编辑器

下载tinymce

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

tinymce富文本编辑器配置，此版本需要将tinymce依赖放到plugins目录中

<template>
    <div class="tinymce">
        <editor id="tinymce" v-model="myValue" :disabled="disabled" :init="init" ></editor>
    </div>
</template>

<script>
    import tinymce from "tinymce/tinymce";
    import Editor from "@tinymce/tinymce-vue";
    import "tinymce/themes/silver";
    // import 'tinymce/icons/default';
    import 'tinymce/plugins/image';
    import 'tinymce/plugins/link';
    import 'tinymce/plugins/code';
    import 'tinymce/plugins/table';
    import 'tinymce/plugins/lists';
    import 'tinymce/plugins/contextmenu';
    import 'tinymce/plugins/wordcount';
    import 'tinymce/plugins/colorpicker';
    import 'tinymce/plugins/textcolor';
    import 'tinymce/plugins/searchreplace';
    import 'tinymce/plugins/quickbars';
    import 'tinymce/plugins/codesample';
    import 'tinymce/plugins/emoticons';
    import 'tinymce/plugins/media';
    import 'tinymce/plugins/anchor';
    import 'tinymce/plugins/preview';
    import 'tinymce/plugins/insertdatetime';
    import 'tinymce/plugins/hr';
    import 'tinymce/plugins/advlist';
    import 'tinymce/plugins/pagebreak';
    import 'tinymce/plugins/fullscreen';
    export default {
        name: 'tinymce',
        components: {
            Editor
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: String,
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            const toolbar = this.disabled ?
                false :
                'undo redo | bold italic | fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent'
            const statusbar = !this.disabled
            return {
                myValue: this.value,
                init: {
                    language_url: "/tinymce/langs/zh_CN.js",
                    language: "zh_CN",
                    skin_url: "/tinymce/skins/ui/oxide",
                    content_css: '/tinymce/skins/content/default/content.css',
                    plugins: 'searchreplace link lists advlist table wordcount image code codesample emoticons media anchor preview insertdatetime hr pagebreak fullscreen',
                    // images_upload_url: 'http://192.168.1.84:8081/upload/admin',
                    // images_upload_base_path: '/demo',
                    toolbar: [
                        'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo  removeformat subscript superscript code codesample',
                        'hr bullist numlist link image preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen ',
                    ],
                    images_upload_handler: function(blobInfo, success, failure) {
                        if (blobInfo.blob().size / 1024 / 1024 > 2) {
                            failure("上传失败，图片大小请控制在 2M 以内");
                        } else {
                            let params = new FormData();
                            params.append("file", blobInfo.blob());
                            params.append("sourceTable", 'harmonize_knowledge_article')
                            //自己后台的上传接口
                            let xhr = new XMLHttpRequest();
                            xhr.withCredentials = false;
                            xhr.open("POST", "http://192.168.1.84:8081/upload/admin");
                            xhr.send(params)
                            xhr.onload = function() {
                                let json;
                                json = JSON.parse(xhr.responseText);
                                success(json.url);
                            };
                        }
                    }
                }
            }
        },
        mounted() {
            tinymce.init({})
        },
        watch:{
            myValue(newV, oldV) {
                this.$emit('change', this.myValue)
            },
            value(val){
                this.myValue = val
            }
        },
        methods: {

        }
    }
</script>