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>

View Code