vue 使用tinymce富文本編輯器

　　如題，之前使用的wangeditor，雖然挺簡單的，但是功能太少，太單一了，不合適，因此，今天拿出了一天時間仔細研究了一下tinymce編輯器，代碼貼出來，方便別人查看，也方便自己查看。

1、安裝tinymce

 npm install  tinymce -S

　　

$ npm install --save @tinymce/tinymce-vue

　　

2、在tinymce官網下載中文漢化包，並放到/public/tinymce/langs/zh_CN.js，再在插件中引用生效

 

在/src/components/tinymce2 中新建index.vue，代碼如下

<template>
    <div class="tinymce-box">
        <editor v-model="myValue" :init="init" @onClick="onClick">
        </editor>
    </div>
</template>

<script>
    import tinymce from 'tinymce/tinymce' //tinymce默認hidden，不引入不顯示
    import 'tinymce/icons/default/icons.min.js' //不引入所有的icon樣式不出現
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    import 'tinymce/plugins/advlist'
    import 'tinymce/plugins/anchor'
    import 'tinymce/plugins/autolink'
    import 'tinymce/plugins/autoresize'
    import 'tinymce/plugins/autosave'
    import 'tinymce/plugins/bbcode'
    import 'tinymce/plugins/charmap'
    import 'tinymce/plugins/code'
    import 'tinymce/plugins/codesample'
    import 'tinymce/plugins/colorpicker'
    import 'tinymce/plugins/contextmenu'
    import 'tinymce/plugins/directionality'
    import 'tinymce/plugins/emoticons'
    import 'tinymce/plugins/emoticons/js/emojis'
    import 'tinymce/plugins/fullpage'
    import 'tinymce/plugins/fullscreen'
    import 'tinymce/plugins/help'
    import 'tinymce/plugins/hr'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/imagetools'
    import 'tinymce/plugins/importcss'
    import 'tinymce/plugins/insertdatetime'
    import 'tinymce/plugins/legacyoutput'
    import 'tinymce/plugins/lineheight/plugin'
    import 'tinymce/plugins/link'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/media'
    import 'tinymce/plugins/nonbreaking'
    import 'tinymce/plugins/noneditable'
    import 'tinymce/plugins/pagebreak'
    import 'tinymce/plugins/paste'
    import 'tinymce/plugins/preview'
    import 'tinymce/plugins/print'
    import 'tinymce/plugins/quickbars'
    import 'tinymce/plugins/save'
    import 'tinymce/plugins/searchreplace'
    import 'tinymce/plugins/spellchecker'
    import 'tinymce/plugins/tabfocus'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/template'
    import 'tinymce/plugins/textpattern'
    import 'tinymce/plugins/toc'
    import 'tinymce/plugins/visualblocks'
    import 'tinymce/plugins/visualchars'
    import 'tinymce/plugins/wordcount'
    import '@/utils/bdmap/plugin' //放在node_modules下不方便配置，自己定義位置，並且還要將bdmap下的文件map.html和bd.html修改掉
    import axios from "axios";
    import global from '@/utils/global'
    export default {
        components:{
            Editor
        },
        name:'tinymce',
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        data(){
            return{
                init: {
                    language_url: '/tinymce/langs/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: '/tinymce/skins/ui/oxide',
                    height: 600,
                    plugins: 'advlist autolink lists link image imagetools charmap print preview anchor link visualblocks code fullscreen print emoticons hr nonbreaking insertdatetime media table paste code help wordcount quickbars searchreplace directionality pagebreak lineheight bdmap',
                    toolbar: [
                        'undo redo | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |removeformat image| print help restoredraft link table |charmap hr pagebreak insertdatetime code |fullscreen wordcount emoticons nonbreaking searchreplace ltr rtl preview pagebreak',
                        'formatselect anchor | bold italic fontselect fontsizeselect forecolor backcolor lineheight bdmap'
                    ],
                    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                    elementpath:false,
                    paste_data_images: true,
                    color_map:this.colorMap,
                    image_advtab:true,
                    auto_focus: false,
                    quickbars_selection_toolbar: 'bold italic | link fontsizeselect blockquote forecolor backcolor',
                    images_upload_handler: function (blobInfo, success, failFun) {
                        let formData = new FormData()
                        formData.append('pic',blobInfo.blob(),blobInfo.filename())
                        axios.post(global.uploadUrl,formData).then(res=>{
                            console.log(res.data.errcode,res.data.errmsg)
                            if(res.data.errcode == 200){
                                success(global.imgBaseUrl+'/'+res.data.errmsg)
                            }
                        }).catch(err=>{

                        })
                    }
                },
                myValue: this.value,
                colorMap:[
                    '#BFEDD2', 'Light Green',
                    '#FBEEB8', 'Light Yellow',
                    '#F8CAC6', 'Light Red',
                    '#ECCAFA', 'Light Purple',
                    '#C2E0F4', 'Light Blue',

                    '#2DC26B', 'Green',
                    '#F1C40F', 'Yellow',
                    '#E03E2D', 'Red',
                    '#B96AD9', 'Purple',
                    '#3598DB', 'Blue',

                    '#169179', 'Dark Turquoise',
                    '#E67E23', 'Orange',
                    '#BA372A', 'Dark Red',
                    '#843FA1', 'Dark Purple',
                    '#236FA1', 'Dark Blue',

                    '#ECF0F1', 'Light Gray',
                    '#CED4D9', 'Medium Gray',
                    '#95A5A6', 'Gray',
                    '#7E8C8D', 'Dark Gray',
                    '#34495E', 'Navy Blue',

                    '#000000', 'Black',
                    '#ffffff', 'White'
                ],
            }
        },
        mounted () {
            tinymce.init({})
        },
        methods: {
            onClick (e) {
                this.$emit('onClick', e, tinymce)
            },
            // 可以添加一些自己的自定義事件，如清空內容
            clear () {
                this.myValue = ''
            }
        },
        watch: {
            value (newValue) {
                this.myValue = newValue
            },
            myValue (newValue) {
                this.$emit('input', newValue)
            }
        }
    }

</script>
<style scoped>

</style>

代碼量比較大，我就先折疊起來，用的時候直接展開復制就好了，我將所有的插件全部部署到上面去了，所以量比較大，有不需要的可以根據需要自己引入，這樣引入不使用tinymce的apk，也就沒有花錢的顧慮了，（官網有些高級插件是需要沖會員的）

在/src/views/test/中新建index.vue,代碼如下

<template>
    <div class="home">
        <tinymce ref="editor" v-model="msg"/>
    </div>
</template>
<script>
    import tinymce from '@/components/tinymce2'

    export default {
        components: {
            tinymce
        },
        data(){
            return{
                msg: 'Welcome to Use Tinymce Editor'
            }
        },
        methods: {

        }
    }
</script>

當然，里面刪掉了好多我不需要的方法，如禁用，

我的參照實例：https://www.cnblogs.com/zhongchao666/p/11142537.html //非常感謝這篇文章，解決了很多問題。

編輯器中插入百度地圖，還不是很好用，但是好歹能用了，看他：https://blog.csdn.net/chengxiangbai/article/details/103709942