vue 使用tinymce富文字編輯器

阿新 • • 發佈：2020-08-29

　　如題，之前使用的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

程式碼量比較大，我就先摺疊起來，用的時候直接展開復制就好了，我將所有的外掛全部部署到上面去了，所以量比較大，有不需要的可以根據需要自己引入，這樣引入不使用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>