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

网络编程 2024/12/26 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue,UEditor,富文本编辑器

标签：

vue,UEditor,富文本编辑器

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无vue集成百度UEditor富文本编辑器使用教程的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

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

vue,UEditor,富文本编辑器

vuejs中监听窗口关闭和窗口刷新事件的方法

JavaScript 2018 中即将迎来的新功能

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接