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 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
原生js开发的日历插件
Feb 04 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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 cookis创建实现代码
2009/03/16 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP分页类集锦
2014/11/18 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
围观tangram js库
2010/12/28 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python3.6数独问题的解决
2019/01/21 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
网站编辑求职信
2013/10/17 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
学习保证书
2015/01/17 职场文书
区域经理岗位职责
2015/02/02 职场文书
天堂的孩子观后感
2015/06/11 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL