如何在vue-cli3中使用tinymce

脚手架vue-cli3
首先安装
npm install tinymce@5.4.2 @tinymce/tinymce-vue@3.2.2 -S

安装成功后，在node_modules目录中，查找tinymce/skins目录，将skins目录拷贝到public目录下。
并到官网中下载中文语言包找到zh_CN.JS拷贝出来

然后在components中创建文件夹tinymce和tinymce.vue
在组件中写配置

<template><div class="tinymce-editor"><editor id="tinymce" v-model="myValue" :init="init" @onClick="onClick"></editor></div>
</template><script>
// 文档 http://tinymce.ax-z.cn/// 引入组件import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示import Editor from '@tinymce/tinymce-vue'// 引入富文本编辑器主题的js和css// import 'tinymce/skins/content/default/content.css'import 'tinymce/themes/silver/theme.min.js'import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'// 编辑器插件plugins// 更多插件参考：https://www.tiny.cloud/docs/plugins/import 'tinymce/plugins/image' // 插入上传图片插件import 'tinymce/plugins/media' // 插入视频插件import 'tinymce/plugins/table' // 插入表格插件import 'tinymce/plugins/lists' // 列表插件import 'tinymce/plugins/wordcount' // 字数统计插件import 'tinymce/plugins/link'import 'tinymce/plugins/code'import 'tinymce/plugins/preview'import 'tinymce/plugins/fullscreen'import 'tinymce/plugins/help'export default {components: {Editor},name: 'Tinymce',props: {// 默认的富文本内容value: {type: String,default: ''},// 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，// 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到baseUrl: {type: String,default: window.location.origin ? window.location.origin : ''},// 禁用disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'link lists image code table wordcount media preview fullscreen help'},toolbar: {type: [String, Array],default: 'undo redo | formatselect | bold italic underline | forecolor backcolor | link unlink code lists table image | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | removeformat | fullscreen preview'},height:{type: Number,default: 500}},data() {return {//初始化配置init: {language_url: `${this.baseUrl}/tinymce/zh_CN.js`,language: 'zh_CN',skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,// skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系convert_urls: false,height: this.height,// content_css（为编辑区指定css文件）,加上就不显示字数统计了// content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,// （指定需加载的插件）plugins: this.plugins,toolbar: this.toolbar, // （自定义工具栏）statusbar: true, // 底部的状态栏menubar: 'file edit insert view format table tools', // （1级菜单）最上方的菜单 help 帮助branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)// console.log(failure)const formData = new FormData();formData.append('file', blobInfo.blob());this.axios({method: 'post',url: 'http://47.109.23.138:8300/upload/upFileImg',data: formData,}).then(function(res) {console.log(res.data.data)let file = res.data.data;success(file.src);}).catch(function(err) {console.log(err)})}},myValue: this.value};},mounted() {tinymce.init({});},methods: {//添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events//需要什么事件可以自己增加onClick(e) {this.$emit('onClick', e, tinymce);},//可以添加一些自己的自定义事件，如清空内容clear() {this.myValue = '';}},watch: {value(newValue) {this.myValue = newValue;},myValue(newValue) {this.$emit('input', newValue);}}
};
</script>

然后在其他页面中使用

<template><div class="home"><tinymce style="width: 100%;" id="myedit" ref="editor" :height="300":disabled="disabled" :toolbar="toolbar" input="input"/></div>
</template><script>
// @ is an alias to /src
import Tinymce from '../components/tinymce/tinymce'; // 富文本export default {name: 'Home',components: {Tinymce}，methods:{input(){console.log(this.$refs.editor.myValue)//获取富文本中的值}}
}
</script>

如何在vue-cli3中使用tinymce相关推荐

如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
Vue项目中使用 tinymce 富文本编辑器的方法，附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...

如何在vue-cli3中使用tinymce

如何在vue-cli3中使用tinymce相关推荐

最新文章

热门文章