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 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
js常用代码段收集
Oct 28 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
$.extend 的一个小问题
Jun 18 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
javascript实现下拉菜单效果
Feb 09 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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内存管理之谁动了我的内存
2013/06/20 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
初识PHP
2014/09/28 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python生成验证码实例
2014/08/21 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python编写Logistic逻辑回归
2020/12/30 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python线程的几种创建方式详解
2019/08/29 Python
python标识符命名规范原理解析
2020/01/10 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python中使用np.delete()的实例方法
2021/02/01 Python
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
C语言编程练习
2012/04/02 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
个人优缺点自我评价
2014/01/27 职场文书
销售内勤岗位职责
2015/02/10 职场文书
遗嘱格式范本
2015/08/07 职场文书