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 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
javascript实现简易计算器的代码
May 31 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
Nuxt.js实战详解
Jan 18 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
请介绍一下Ant
2016/07/22 面试题
init进程的作用
2012/04/12 面试题
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
企业职业病防治方案
2014/05/29 职场文书
家长会欢迎标语
2014/06/24 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android