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