ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器。那么,如果你有这个需求,希望可以帮助到你。
vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使用。效果图如下
废话不多说。
1、使用vue-cli构建一个vue项目。然后下载UEditor源码,地址
把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件,打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面的ueditor.config.js文件找到serverUrl把这行代码注释了。这个代码是用来上传图片的后台地址。如果不注释了会请求报错。编辑器跑起来再做服务配置修改地址。
2、在.vue文件中引入主要js文件
import ‘../../static/utf8-jsp/ueditor.config'
import ‘../../static/utf8-jsp/ueditor.all';
import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn';
3、在data中申明一个变量存储UEditor的实例方便在vue的其他地方使用,然后申明一个变量存储手动获取的编辑器里面的内容,再什么一个变量存储初始化时要写入编辑器的内容。三个变量。如果操作得当。可以减少变量的时候。这是笨办法
4、在vue的mounted钩子函数中调用编辑器的方法生成实例存储到刚刚申明的变量中,在实例中传入参数。第一个是id,id是生成编辑器的div的id。第二个参数是一个对象。对象内容是对编辑器的配置。如资源访问路径,toolbars内容配置。
5、在html部分写一个div标签
6、然后配置资源路径。在实例化的时候传入的参数里。第二个参数是一个对象。内容包括路径。
this.ue = UE.getEditor('editor',{
BaseUrl: '',
UEDITOR_HOME_URL: 'static/utf8-jsp/',
});
这个UEDITOR_HOME_URL就是配置编辑器自己访问自己所需要的依赖的路径。设置到存放的文件下utf8-jsp是编辑器文件的更目录。目录不一样可自行更改
7、然后保存。就可以在界面上显示一个完整的富文本编辑器
8、如果要获取内容则使用在data里面申明的编辑器实例在vue中this.实例调用方法getContent()可以获取到内容
9如果要设置内容则调用:setContent('欢迎使用ueditor');
更多方法参考官方文档。
10、文档内容属于个人踩坑的心得。如有错误。请留言指出。谢谢
11、需要注意的是资源路径容易搞错。使用相对路径即可
12、贴出代码
html
保存
写入
js
import '../../static/utf8-jsp/ueditor.config'
import '../../static/utf8-jsp/ueditor.all';
import '../../static/utf8-jsp/lang/zh-cn/zh-cn';
export default {
name: 'hello',
data () {
return {
ue: '',
uedata: [],
xierudata: []
}
},
mounted() {
this.ue = UE.getEditor('editor',{
BaseUrl: '',
UEDITOR_HOME_URL: 'static/utf8-jsp/',
// toolbars:[]
});
},
methods: {
submits(){
this.uedata.push(UE.getEditor('editor').getContent());
console.log(this.uedata.join("n"));
},
xieru(){
UE.getEditor('editor').setContent('欢迎使用ueditor');
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程相关推荐
- 百度UEdit富文本编辑器的使用
1.在需要的页面引入依赖的js <!-- 配置文件 --> <script type="text/javascript" src="~/Content/ ...
- java umeditor使用,百度UMeditor富文本编辑器java使用
百度UMeditor富文本编辑器java使用 1.介绍 UMeditor 是一款轻量级的富文本编辑器,比UEditor要小得多,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑 ...
- 百度UE富文本编辑器问题(包问题)JAVA MEAVN
做了一个百度UE富文本编辑器的内容 关于包的导入问题.. 网上一堆的说包的导入会出现一系列的问题 先给出完整的五个的包的依赖 若有不同的需要的,可以自己去meavn 仓库里找 meavn 仓库地址:h ...
- 基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试 正 ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- vue问题四:富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
- 如何用Vue实现简易的富文本编辑器,并支持Markdown语法
前端开发经常会用到富文本编辑器,比如CKEditor,动不动一个库几十M的代码量,其中涉及许多你可能用不到的功能特性和相关设置,CKEditor最新版本的代码仓库就有接近2000个JS文件,300,0 ...
- 富文本编辑器中空格转化为a_如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?...
我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...
- 富文本编辑器css写法,HTML – 替代方法来做网站特定的富文本编辑器CSS?
这与我回答的关于多个RTE类样式的 previous Stackoverflow question非常相似,我跟进了 blog post,其中包含有关在Sitecore富文本编辑器中加载站点特定CSS ...
最新文章
- 成功解决ModuleNotFoundError: No module named '_pywrap_tensorflow_internal'
- 应用程序对象正在关闭_Windows核心编程-内核对象
- SAP Fiori SSL 和 SAML 2.0 配置文档
- ef执行原生sql语句_EF Core中执行原生SQL语句
- CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
- python 用pip安装python库下载超时的解决办法
- ORACLE中exists与in的区别
- 私有静态方法private static method-值得用吗?
- 边缘计算ARMNN(一):ARM-ARMNN-ComputeLibrary rk3399 编译配置
- egg(72,73)--egg之商品curd的编辑
- 雷赛控制卡系统集成源代码。整理归零,运行,暂停,停止。单轴调 试,位置移动,气缸操作,参数设置,IO监控,系统报警显示等等
- 硬核科普 | 小谈 辣椒素和辣椒素受体 的研究,来自一线植物科研人员
- lange耦合器设计步骤_耦合器设计--基本理论.ppt
- 数据库的隔离级别以及锁的关系的思考
- android中隐藏的功能,iOS与Android的奥秘:那些你未必了解的隐藏功能
- Unity 粒子制作简单飞舞纸片特效
- php怎么求最小公倍数,用PHP实现最小公倍数
- K8S故障排查指南:部分节点无法启动Pod资源-Pod处于ContainerCreating状态
- ORACLE exp时出现1455错误,全网唯一正解,建议收藏
- 深度学习之目标检测综述