vue-cli3 使用 Tinymce富文本编辑器

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

安装Tinymce

npm i tinymce -S

安装中文插件

点击下载语言包

解压后得到一个zh_CN.js文件，将这个文件放到你的vue项目文件夹中

初始化

在这里，我是先封装成组件再调用

template：

<template>
    <div>
        <textarea :id="id"></textarea>
        <button class="btn" @click="release">发布文章</button>
    </div>
</template>

script：

引入文件

import tinymce from 'tinymce/tinymce'
//这下面是tinymce的插件
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
//这里写你自己存放语言包的路径
import '../../public/tinymce/langs/zh_CN.js'

配置

export default {
    name:'',
    props:{
        id:String
    },
    data () {
        return {
            init:{
                selector: '#'+this.id,
                language: 'zh_CN',
                skin_url: 'tinymce/skins/ui/oxide',
                height: 500,
                //插件
                plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
                //工具栏
                toolbar:
                'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
                //隐藏tinymce的标识
                branding: false,
            }
        };
    },
    methods:{
        release(){
            //content 是文本内容
            let content = tinymce.get(this.id).getContent()
            this.$emit('release',content)
        }
    },
    mounted () {
        //配置的初始化
        tinymce.init(this.init)
    },
    beforeDestroy() {
        //销毁
        tinymce.get(this.id).destroy();
    },
}

这里注意一定要销毁，否则第一次加载时是没效果的，需要刷新。

使用

引入刚刚写好的组件

import TinymceText from '../components/TinymceText'
export default {
    name:'',
    data () {
        return {
        };
    },
    methods:{
        release(content){
            console.log(content);
        }
    },
    components:{
        'tinymce-text':TinymceText
    }
}

 记得加上id

<tinymce-text id="tinymce" @release="release"></tinymce-text>

效果图

好了，完成。感觉还挺好看的 。

如果喜欢黑色的主题，只需要更改init配置  skin_url: 'tinymce/skins/ui/oxide-dark',

以上是 vue-cli3 使用 Tinymce富文本编辑器 的全部内容， 来源链接： utcz.com/z/375435.html

回到顶部