场景说明：

后端输入一篇文章，在前端显示，这时就有个排版问题了。单纯的文本输入框无法满足要求。
所以需要采用后端整合文本编辑器，前端(vue)采用v-html标签直接渲染
小编的示例是整合vue

0、富文本编辑器的插件和组件

链接：https://pan.baidu.com/s/1OK770qsv1Ozv-4FWLjCtdg
提取码：5ggs
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V4的分享

1、效果如图：

后台图片：

前端渲染图片：

或者

2、下载富文本编辑器插件Tinymce：

01:先下载插件，官网入口（默认英文版）
02:补充下汉化（入口）

汉化下载这个：

去掉不要的文件夹，完整插件如图：

3、在工程引入

说明：小编的demo是整合vue脚手架哦

1. 在public文件夹引入插件，如图：

2. 封装组件

注明：小编会把（插件和组件代码）放在百度网盘，需要自取

3. 在需要使用的地方引用该组件

示例：

 //引入import Tinymce from '@/components/Tinymce'//注册components: {Tinymce},//使用---> v-model是数据绑定<tinymce v-model="dataList.content" :height="300" style="min-width: 600px" :size="componentSize"/>

如图：

整合完成

4、前端渲染

<div v-html="Content" style="font-size: 14px;letter-spacing: 1px;line-height:18px"></div>

5、细节（bug）说明：

小编采用的element ui
可能会出现如下问题：
1、文本域初始化一次，第二次发现无法输入
解决办法：每次打开添加、修改…等组件，重新渲染一次
例如：采用v-if创建组件

//dialogShow是自己定义的
//父页面点击添加按钮，创建出一个dialog组件，dialogShow变为true，显示组件
//所以我们在dialog组件中使用v-if解决这个问题 v-if="dialogShow"
//原理:百度下 v-if和b-show的区别
//代码如下：
<template>
<el-dialog :visible.sync="dialogShow" v-if="dialogShow" :before-close="handleClose"append-to-body width="60%"top="5vh">
</el-dialog>
//这个是table的内容
</template>

2、修改功能：文本编辑器影响到原本的显示数据
解决办法：父组件向子组件传递数据的时候，不要传递整个对象，使用一个一个变量传输

类如：

       //更新页面openUpdateWin(data) {const refs = this.$refs.updateWin;//推荐一个一个赋值refs.dataList.id = data.id;refs.dataList.title = data.title;refs.dialogShow = true;//不推荐//refs.dataList = data;},

vue整合文本编辑器相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Vue中富文本编辑器的使用
基于 Vue 的富文本编辑器有很多,例如官方就收录推荐了一些: https://github.com/vuejs/awesome-vue#rich-text-editing . 这里我们以 eleme ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
电力项目十--整合文本编辑器
CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一 Ckediter不支持文件上传,配合CkFinder插件使用 1.导入jar包 ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
springboot 整合文本编辑器（图片上传）
Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...

vue整合文本编辑器

场景说明：

0、富文本编辑器的插件和组件

1、效果如图：

2、下载富文本编辑器插件Tinymce：

3、在工程引入

4、前端渲染

5、细节（bug）说明：

vue整合文本编辑器相关推荐

最新文章

热门文章

vue整合文本编辑器

场景说明：

0、富文本编辑器的插件和组件

1、效果如图：

2、下载富文本编辑器 插件Tinymce：

3、在工程引入

4、前端渲染

5、细节（bug）说明：

vue整合文本编辑器相关推荐

最新文章

热门文章

2、下载富文本编辑器插件Tinymce：