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、效果预览