vue集成百度UEditor富文本编辑器

vue集成百度UEditor富文本编辑器

 

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

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

废话不多说。

1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址:http://ueditor.baidu.com/website/
把项目复制到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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113780.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 遗传算法做多目标优化_python 遗传算法

    遗传算法做多目标优化_python 遗传算法多目标遗传优化算法nsga2,python源码实现。源码实现,不适用任何第三方工具包。由于是基本源码,所有熟悉其他语言的也能看懂意思。

  • java 开源 视频会议_Openmeetings 开源视频会议系统介绍与部署

    java 开源 视频会议_Openmeetings 开源视频会议系统介绍与部署Openmeetings当前作为Apache下的一个项目,基于JAVA开发,主要用于提供视频会议、即时通讯、白板、协作文档等群件工具,通过使用Red5流媒体服务器处理媒体流。Openmeetings的主要功能和特性:音频、视频会议会议前可选择音频、视频、音频+视频、图像四种模式。如图示:2.会议记录和屏幕共享3.文件管理,可以自己创建目录结构4.主持人权限控制,可以控制用户”成为主持人”…

  • Codeforces Round #264 (Div. 2) C Gargari and Bishops 【暴力】

    Codeforces Round #264 (Div. 2) C Gargari and Bishops 【暴力】

  • postman进行http接口测试

    postman进行http接口测试无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。HTTP的接口测试工具有很多,可以进行http请求的方式也有很多,但是可以直接拿来就用,而且功能还支持的不错的,我使用过的来讲,还是postman比较上手。优点:1、支持用例管理2、支持get、post、文件上…

  • phpstorm 2021.9激活码【2021最新】「建议收藏」

    (phpstorm 2021.9激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 理解几种常见的进程间通信方式

    理解几种常见的进程间通信方式什么是进程间通信广义上讲,进程间通信(Inter-ProcessCommunication,IPC)是指运行在不同进程(不论是否在同一台机器)中的若干线程间的数据交换。从上面的定义可以得出两点:参与通信的进程即可以运行在同一台机器上,也可以运行在各自的设备环境中(RemoteProcedureCallProtocol,RPC)。如果进程是跨机器运行的,则通常是由网络连接在一起。实现方

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号