VUE+tinymce(富文本编辑器)
效果图:
VUE项目引入tinymce
1、tinymce安装以及下载
npm install @tinymce/tinymce-vue -save
npm install tinymce -save
①、安装完成以后,在安装目录node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 public(cli3是public目录,cli2应该是static目录) 目录下。
②、tinymce默认是英文界面,需要下载一个中文包,选择对应的中文包进行下载。把这个中文包也放在public或static目录下面。
下载地址:Language Packages | Trusted Rich Text Editor | TinyMCE
我的项目使用版本:cli3+tinymce5,即放入public目录下并加了层名为tinymce的子目录,如下图:
2、封装成项目组件:vl-tinymce.vue
①、使用tinymce组件
<template><div class="tinymce-editor"><editor :id="tinymceId" v-model="myValue" :init="init" v-bind="$attrs" v-on="inputListeners"></editor></div>
</template>
②、引入包
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
发现编辑器图片找不到,引入图标
import 'tinymce/icons/default/icons'
③、注册组件
tinymce/tinymce是一个组件,引入组件注册,直接使用
//注册组件
components: {Editor
}
④、初始化配置
mounted() {tinymce.init({})},
init: {language_url: '/tinymce/zh_CN.js', //指定中文包language: 'zh_CN',//中文skin_url: '/tinymce/skins/ui/oxide',//编辑器皮肤,height: 500,//高度browser_spellcheck: true, // 拼写检查branding: false, // 去水印elementpath: false, // 禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false // 隐藏最上方menu
}
⑤、引用插件
⑥、完善组件
问题一:页面实现数据回显时,tinymce无法回显绑定值
分析原因:数据赋值与tinymce组件渲染顺序导致
解决方案:
1)、当因当前页面刷新导致时
将需要回显值作为默认值添加上,考虑使用init》setup属性
init: {setup: (editor) => {// 初次化编辑器editor.on('init', () => {editor.setContent(this.value)})},},
2)、当因页面跳转导致时
考虑使用watch监听回显值
watch: {value(val) {this.$nextTick(() => tinymce.get(this.tinymceId).setContent(val))},},
3)、以上2点考虑都是基于所使用的组件最初使用时,所以我们采用一个标识记录一下当前组件是否最初使用,达到一次回显的目的即可。
我采用的标识名称为“isInit”,请参考我的代码分析。
问题二:通常我们设置内容后,光标会跑到最前面
解决方案:
加入一下代码
editor.selection.select(editor.getBody(),true);
editor.selection.collapse(false);
⑦、我的代码
<template><div class="tinymce-editor"><editor :id="tinymceId" v-model.trim="myValue" :init="init" v-bind="$attrs" v-on="inputListeners"></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'
import 'tinymce/icons/default/icons.min.js' // 解决了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 {inheritAttrs: false,components: {Editor,},name: 'Tinymce',props: {id: {type: String,default: function () {return new Date().getTime() + ''},},value: {type: String,default: '',},height: {type: Number,default: 300,},plugins: {type: [String, Array],default: 'link lists image code table wordcount media preview fullscreen help',},toolbar: {type: [String, Array],default:'bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | undo redo | link unlink code lists table image media | removeformat | fullscreen preview',},},data() {const that = thisreturn {// 自动生成的idtinymceId: this.id,init: {selector: `#${this.tinymceId}`,language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径language: 'zh_CN', //语言skin_url: '/tinymce/skins/ui/oxide', // skin路径height: this.height, //编辑器高度branding: false, //是否禁用“Powered by TinyMCE”menubar: false, //顶部菜单栏显示statusbar: false, //是否显示底部的状态栏plugins: this.plugins,toolbar: this.toolbar, // (自定义工具栏)// 此处为图片上传处理函数,这个直接用了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)},setup: (editor) => {// 初次化编辑器editor.on('init', () => {that.isInit = true //告知是初始化\if (that.value) {editor.setContent(that.value)that.isInit = false}editor.on('input change undo redo', () => {// this.value = editor.getContent()//此处设置为false很好解决光标前置问题that.isInit = false})})},},myValue: this.value,isInit: false, //是否初始化}},computed: {inputListeners() {const newListeners = {...this.$listeners,input: (event) => {this.$emit('input', event)},}return newListeners},},mounted() {tinymce.init({})},beforeDestroy: function () {tinymce.remove(this.tinymceId)},methods: {/*** 获取富文本text类型内容*/getTextContent(){const editor = tinymce.get(this.tinymceId)return editor.getContent({'format' : 'text'})}},watch: {value(val) {//用户vue绑定回显if (this.isInit) {this.isInit = falsethis.$nextTick(() => {const editor = tinymce.get(this.tinymceId)editor.setContent(val) })}},},
}
</script>
VUE+tinymce(富文本编辑器)相关推荐
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- 【富文本编辑器功能】vue实现富文本编辑器Tinymce功能,保留编辑器格式文章展示在页面上【前后端代码展示,简单好用】
前言: 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用.这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑 ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
- tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
- 在vue3.0项目中使用tinymce富文本编辑器
目录 一.安装 二.完整代码 三.事项说明 四.参考文档 之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
- vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址 说明: 支持 vue-cli 2.x 支持 ...
- vue+summernote富文本编辑器
vue+summernote富文本编辑器 最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- Layui 使用 TinyMCE 富文本编辑器
Layui 使用 TinyMCE 富文本编辑器 Layui 使用 TinyMCE 富文本编辑器 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 3.调用 TinyMCE ...
- 使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显 一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...
最新文章
- MTD NANDFLASH驱动相关知识介绍
- linux内核tor03,Linux内核x86架构引导协议4(翻译)
- Java数据结构和算法:234树和外部存储
- seata+nacos出现can not register RM,err:can not connect to services-server
- memcached客户端_小水谈Memcache---Memcached安装
- 【C语言简单说】十七:数组(补)
- redis创建集群报错can‘t connect to node 192.168.163.203
- Spring Data JPA 从入门到精通~@Param用法
- 2.6 谷歌 Inception 网络简介
- java反序列化时区,Jackson使用Java 8将Elasticsearch反序列化为LocalDateTime
- JSK-23223 数字反转【进制】
- 构造函数和方法的区别
- U3D AND UDK 各自特点
- HDU 4699(栈)
- 项目2-Time类中的运算符重载
- 我决定切换到 Vue.js,不再使用 React!
- 本地代理ARP(Local Proxy ARP )
- 杰理AC1082/1074/1090开发开发记录
- 判断用户输入的数是正数还是负数
- 数据响应式的原理(简单理解 为了面试)