vue中使用tinymce，以及插件 powerpaste 的使用

一、版本

　　"@tinymce/tinymce-vue": "^3.0.1"

　　"tinymce": "^5.0.2",

        "vue": "^2.6.11",

　　powerpaste  必須單獨另外下載 ！！！

二、vue中的使用

　　　　1、vue中下載tinymce

　　　　 npm i tinymce@5.0.2 -S

　　　　2、在界面引入tinymce

　　　　語言包下載地址：https://www.tiny.cloud/get-tiny/language-packages/

 

　　　　1、tinymce的封裝

<template>
    <div class="tinymce-editor" style="height: calc(100% - 56px);">
        <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" id="mytextarea"></editor>
    </div>
</template>
 
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/code' // 源代碼插件
import 'tinymce/plugins/pagebreak' // 分頁符插件
import 'tinymce/plugins/charmap' // 特殊符號插件
import 'tinymce/plugins/emoticons' // 表情插件
import 'tinymce/plugins/save' // 保存插件
import 'tinymce/plugins/preview' // 預覽插件
// import 'tinymce/plugins/print' // 打印
import 'tinymce/plugins/image' // 上傳圖片插件
import 'tinymce/plugins/media' // 視頻插件
import 'tinymce/plugins/link' // 鏈接插件
import 'tinymce/plugins/anchor' // 錨點插件
import 'tinymce/plugins/codesample' // 代碼插件
import 'tinymce/plugins/table' // 表格插件
import 'tinymce/plugins/searchreplace' // 查找、替換插件
import 'tinymce/plugins/hr' // 水平分割線插件
import 'tinymce/plugins/insertdatetime' // 時間日期插件
// import 'tinymce/plugins/paste' // 粘體插件
import 'tinymce/plugins/wordcount' // 字數統計插件
import 'tinymce/plugins/fullscreen' // 全屏插件
import 'tinymce/plugins/help' // 幫助插件
export default {
    components: {
        Editor,
    },
    props: {
        //傳入一個value，使組件支持v-model綁定
        value: {
            type: String,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        plugins: {
            type: [String, Array],
            default:
                'lists code pagebreak charmap emoticons save preview print image media link powerpaste ' +
                'anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime',
        },
        toolbar: {
            type: [String, Array],
            default:
                '| formatselect fontselect fontsizeselect ' +
                '| undo redo ' +
                '| code bold italic underline strikethrough ' +
                '| alignleft aligncenter alignright alignjustify ' +
                '| outdent indent numlist bullist insertdatetime ' +
                '| table forecolor backcolor removeformat ' +
                '| hr searchreplace pagebreak charmap ' +
                '| fullscreen ' +
                '| link anchor codesample ',
        },
    },
    data() {
        return {
            //初始化配置
            init: {
                language_url: '/tinymce/zh-Hans.js',
                language: 'zh-Hans',
                skin_url: '/skins/ui/oxide',
                content_css: '/skins/content/default/content.css',
                height: '100%',
                plugins: this.plugins,
                toolbar: this.toolbar,
                menubar: true,
                placeholder: '請輸入內容',
                branding: false, // 隱藏右下角技術支持
                fontsize_formats:
                    '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                paste_data_images: true, // 是否允許黏貼圖片
                font_formats:
                    '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
                resize: true,
                zIndex: 11101,
                theme: 'silver', //主題
                insertdatetime_formats: [
                    '%H點%M分',
                    '%Y年%m月%d日',
                    '%Y年%m月%d日 %H點%M分',
                    '%Y-%m-%d %H:%M',
                ], // 時間日期格式化
                contextmenu: false, // 禁用富文本的右鍵菜單，使用瀏覽器自帶的右鍵菜單

                // 添加擴展插件
                external_plugins: {
                    powerpaste: '/powerpaste/plugin.min.js',
                },
                powerpaste_word_import: 'propmt', // 參數可以是propmt, merge, clear，效果自行切換對比
                powerpaste_html_import: 'propmt', // propmt, merge, clear
                powerpaste_allow_local_images: true,
            },
            myValue: this.value,
        }
    },
    mounted() {
        tinymce.init({})
    },
    methods: {
        //添加相關的事件，可用的事件參照文檔=> https://github.com/tinymce/tinymce-vue => All available events
        //需要什么事件可以自己增加
        onClick(e) {
            this.$emit('onClick', e, tinymce)
        },
    },
    watch: {
        value(newValue) {
            this.myValue = newValue
        },
        myValue(newValue) {
            this.$emit('hangdleEditor', newValue)
        },
    },
}
</script>

<style scoped>
</style>

　　　　2、tinymce 組件的使用

<template>
    <div style="height: calc(100%)">
        <Tinymce id="textAreaContent" class="editor" :value="content" v-on:hangdleEditor="hangdleEditor" />
    </div>
</template>

<script>
import Tinymce from '@/public/Tinymce.vue'
export default {
    data() {
        return {
            content: '',
        }
    },
    mounted() {
    },
    methods: {
        hangdleEditor(val) {
            this.content = val
        },
    },
    components: {
        Tinymce,
    },
}
</script>

<style scoped lang="less">
.cont {
    height: calc(100% - 60px);
    overflow: auto;
    .back {
        width: 96px;
        height: 32px;
        line-height: 32px;
        background: #ffffff;
        border-radius: 16px;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        text-align: center;
        cursor: pointer;
        margin-bottom: 24px;
    }
}
</style>

 

　　　　3、powerpaste 插件放入根目錄public下 

　　　　　　

　　　　鏈接：https://pan.baidu.com/s/1_mKr1TbNxy2fC5Pu54lIgQ
　　　　提取碼：g5f4

　　　　可以去這個地址下載 powerpaste 插件

　　　　4、處理粘貼內容時顯示的文本為英文

　　　　　　

 

 　　　　　　修改js文件中與顯示彈窗的相同英文內容，替換為中文即可

　　　　5、效果預覽