一、Tinymce可视化编辑器

参考：
https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce

https://panjiachen.gitee.io/vue-element-admin/#/example/create

二、在项目中整合文本编辑器

2.1、下载组件

富文本编辑器链接：https://pan.baidu.com/s/1ds9rn6I6Zp7_oJWTt02KUQ
提取码：sp7t

下载好的组件解压后里面有两个文件夹，如下图所示：

将两个文件夹中的文件分别放到前端工程中对应文件夹内，需要找到前端工程在本地磁盘的位置，不能直接复制到vscode中对应文件夹。

2.2、在项目中的build/webpack.dev.conf.js文件中添加配置

,
templateParameters: {BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}

添加后：

2.3、引入js脚本

在项目根目录下的index.html 中引入js脚本

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>

三、在页面中使用文本编辑器组件

3.1、在需要使用富文本编辑器的页面引入组件，声明组件。

代码

import Tinymce from '@/components/Tinymce'//引入组件
components: { Tinymce },//声明组件

3.2、在页面中使用标签实现文本编辑器组件

  <!-- 课程简介--><el-form-item label="课程简介"><tinymce :height="300" v-model="courseInfo.description"/></el-form-item>

3.3、给组件添加样式

在info.vue文件的最后添加如下代码，调整上传图片按钮的高度

//scoped是该样式的一个属性，表示该样式只在该页面有效
<style scoped>
.tinymce-container {line-height: 29px;
}
</style>

四、测试

Day08-整合富文本编辑器-p115相关推荐

easyUI整合富文本编辑器KindEditor详细教程
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
LAYUI 整合富文本编辑器
最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下. 本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多. kindeditor 下载 ...
SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
背景最近要用到一个富文本编辑器,记得遥远的年代,调过Kingeditor.Ueditor...但是那些都很重,,,于是最近经常再留意这件事,直到最近看到一个wangEditor,体验了一下,又轻又好 ...
vue整合富文本编辑器tinymce
一.复制文本编辑器组件到项目文件夹里面二.在build下的webpack.dev.conf.js里面添加 templateParameters: {BASE_URL: config.dev.asse ...
spring boot2.0整合富文本编辑器summernote
summernote对上传图片,以及对图片大小细节,删除图片移除服务器资源等处理的比较完美. 整合过程,summernote的官网https://summernote.org/getting-star ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
wangeditor html编辑,Vue整合wangEditor富文本编辑器
最近在做项目时,客户有个发布新闻动态的功能,具体页面内容让客户自己编写,所以要选择富文本编辑器,这样用户体验好一点.网上有很多的富文本编辑器, 因为项目的功能并不是很复杂,所以选择了wangEdito ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...

Day08-整合富文本编辑器-p115

整合富文本编辑器-p115