tinymce富文本vue使用教程

一、资源下载
二、下载中文语言包
三、初始化富文本信息
四、扩展插件
五、其他注意
六、tinymce一些功能配置
七、图片上传（个人整理图片上传两种方式）
八、封装

一、资源下载

npm install tinymce -S  // 当前版本^5.1.0
npm install @tinymce/tinymce-vue -S  // 当前版本^3.0.1

二、下载中文语言包

tinymce提供了很多的语言包，这里我们下载中文语言包

下载的时候可以先在static下面建个目录tinymce

下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到static/tinymce目录下面
下载完中文语言包后，将其解压到static/tinymce目录下

三、初始化富文本信息

import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
// import 'tinymce/themes/modern/theme'
import 'tinymce/themes/silver/theme'
//如果报错找不到  import 'tinymce/themes/modern/theme',可以替换成 import 'tinymce/themes/silver/theme'
//不过一般都会报错,说找不到的....

tingmce-vue 是一个组件,需要在components中注册,然后再使用

components: {Editor}

<editor id="tinymce" v-model="value" :init="init"></editor>

这里的 init 是 tinymce 初始化配置项，完整 api 可以参考官方文档
编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

init: {selector: '#tinymce',  // tinymce的idlanguage_url: '/static/tinymce/langs/zh_CN.js',   // 语言包路径language: 'zh_CN',  // 语言skin_url: '/static/tinymce/skins/ui/oxide',  // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
}

同时在 mounted 中也需要初始化一次：

mounted() {tinymce.init({})
}

本人以上配置完毕后界面如下且会报两个错误

解决方案：导入以下缺失路径

import 'tinymce/icons/default/icons'
export default {data () {return {// init中添加如下信息init: {content_css: '/static/tinymce/skins/content/default/content.css',            }        }    }
}

四、扩展插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能tinymce 通过添加插件 plugins 的方式来添加功能
比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件
在import里引入插件

import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
//下面的插件是自带的,不需要引入,引入的时候,浏览器会有个警告,说这个插件是内核自带,请自行删除
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";

在data的init对象里引入插件

plugins: 'image link code table lists wordcount',  // 引入插件

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏

五、其他注意

如果出现图的报错

这是因为你import里引入的插件和plugins引入的插件没有相互对应上,删除部分插件调整
如果还存在报错,这是因为 init 参数地址错误
这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确,如果参数无误，可以先删除 language_url 和 language 再试

六、tinymce一些功能配置

// 注意：在data的init中配置
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, // 禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
file_picker_types: 'image',
images_upload_credentials: true,

七、图片上传（个人整理图片上传两种方式）

// 第一种
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
images_upload_handler: (blobInfo, success, failure) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)
}// 第二种
// 此处为调用ajax接口上传 （此处更改相应的接口参数、路径信息）
images_upload_handler: (blobInfo, success, failure) => {let config = {headers: {'Content-Type': 'multipart/form-data'}}let formdata = new FormData()formdata.append('FFILE', blobInfo.blob())formdata.append('NAME', 'zcfa')formdata.append('PARENT_ID', '47e0ab7a2d6b409aac60fcd1ae983f61')axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', formdata, config).then(({data}) => {if (data && data.result === 'success') {this.$message({message: '上传成功',type: 'success',duration: 1500})// 存放返回成功的图片路径success(data.imgUrl[0])} else {failure('上传失败！！！')}}).catch(() => {failure('上传错误！！！')})
}

八、封装

子组件tinymce(完整代码)

<template><div class="tinymce-container">
<!--    <div style="color: #fff">{{value}}</div>--><editor id="tinymce" v-model="value" :init="init"></editor></div>
</template><script>import axios from 'axios'import tinymce from 'tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/silver/theme'import 'tinymce/icons/default/icons'import 'tinymce/plugins/image'import 'tinymce/plugins/link'import 'tinymce/plugins/code'import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/wordcount'export default {name: 'tinymce',props: {tinymceHtml: '',tinymceHeight: {type: Number,default: 500}},components: {Editor},data () {return {value: this.tinymceHtml,  // 父組件通过ref拿到该组件的值init: {selector: '#tinymce',  // tinymce的idlanguage_url: '/static/tinymce/langs/zh_CN.js',   // 语言包路径language: 'zh_CN',  // 语言skin_url: '/static/tinymce/skins/ui/oxide',  // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件content_css: '/static/tinymce/skins/content/default/content.css',height: 600,    // 编辑器高度plugins: 'image link code table lists wordcount',  // 引入插件toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏browser_spellcheck: true, // 拼写检查branding: false, // 去水印elementpath: false, // 禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false, // 隐藏最上方menufontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体file_picker_types: 'image',images_upload_credentials: true,// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，// images_upload_handler: (blobInfo, success, failure) => {//   const img = 'data:image/jpeg;base64,' + blobInfo.base64()//   success(img)// }// 此处为调用ajax接口上传 （此处更改相应的接口参数、路径信息）images_upload_handler: (blobInfo, success, failure) => {let config = {headers: {'Content-Type': 'multipart/form-data'}}let formdata = new FormData()formdata.append('FFILE', blobInfo.blob())formdata.append('NAME', 'zcfa')formdata.append('PARENT_ID', '47e0ab7a2d6b409aac60fcd1ae983f61')axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', formdata, config).then(({data}) => {if (data && data.result === 'success') {this.$message({message: '上传成功',type: 'success',duration: 1500,onClose: () => {// this.fileList = []// this.$emit('refreshDataList')// this.visible = false}})// 存放返回成功的图片路径success(data.imgUrl[0])} else {failure('上传失败！！！')}}).catch(() => {failure('上传错误！！！')})}}}},watch: {tinymceHtml (newV, oldV) {this.value = newV}},mounted () {tinymce.init({})},methods: {}}
</script><style lang="scss" scoped>
</style>

父组件中使用该组件

<template><div><tinymce ref="tinymce" :tinymceHtml="content"></tinymce></div>
</template><script>import tinymce from '@/components/tinymce/tinymce'export default {data () {return {content: ''}},components: {tinymce}}
</script><style lang="scss" scoped>
</style>

tinymce富文本vue使用教程相关推荐

vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
Tinymce富文本使用教程
文章目录 1. 开始 2. 快速使用引入tinymce脚本 3. 常用配置 selector language language_url height readonly plugins toolba ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
【超详细】Tinymce富文本使用教程
Tinymce基础使用手册 1. 开始官网文档:www.tiny.cloud/docs/ 社区版及开发版官方最新打包地址:www.tiny.cloud/get-tiny/self-hosted/ 汉 ...
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...
vue tinymce富文本设置图片宽度最大100%
vue tinymce富文本设置图片宽度最大100% 一.效果没有加样式前的图片显示加了之后二.实现方法控件配置中添加自定义内容样式 //自定义样式 defaultSetting: {con ...
React版TinyMCE富文本入坑
React版TinyMCE富文本中文教程写在前面:因为公司项目的需要,需要寻找一款免费,开源,功能强大的富文本用作自定义打印.公司的前端框架用的是React,所以需求就很明显,要支持框架,开源,功能 ...
tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...

tinymce富文本vue使用教程

tinymce富文本vue使用教程

一、资源下载

二、下载中文语言包

三、初始化富文本信息

四、扩展插件

五、其他注意

六、tinymce一些功能配置

七、图片上传（个人整理图片上传两种方式）

八、封装

tinymce富文本vue使用教程相关推荐

最新文章

热门文章