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

本文介绍了如何在Vue CLI3项目中使用Tinymce富文本编辑器,包括安装Tinymce和中文插件,初始化设置,组件封装以及效果展示。还特别提到需要销毁实例以解决初次加载问题,并提供了黑色主题的配置示例。
摘要由CSDN通过智能技术生成

安装Tinymce

npm i tinymce -S

安装中文插件

点击下载语言包

解压后得到一个zh_CN.js文件,将这个文件放到你的vue项目文件夹中(路径随意,我是放在public文件夹里)

初始化

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

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'
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值