vue集成百度UEditor富文本编辑器使用教程


Posted in Javascript onSeptember 21, 2018

在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器。那么,如果你有这个需求,希望可以帮助到你。

vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使用。效果图如下

vue集成百度UEditor富文本编辑器使用教程

废话不多说。

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标签

<div id="editor" type="text/plain" style="width:1024px;height:500px;"></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

<template> 
<div class="hello"> 
<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div> 
<button @click="submits">保存</button> 
<button @click="xieru">写入</button> 
</div> 
</template>

js

<script> 
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'); 
} 
} 
} 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
es6 symbol的实现方法示例
Apr 02 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 #Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 #Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 #Javascript
探秘vue-rx 2.0(推荐)
Sep 21 #Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 #Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 #Javascript
vue-rx的初步使用教程
Sep 21 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
php实现通过ftp上传文件
2015/06/19 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python版飞机大战代码分享
2018/11/20 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
大学在校生求职信范文
2013/11/21 职场文书
国富论读书笔记
2015/06/26 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers