介绍
这篇文章主要介绍了如何集成UEditor富文本编辑器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
在vue的& # 39;项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装编辑器的插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。
这类的文章网上有很多,我进行了摸索,手写代码,汇总,排版,形成了这篇文章。
下载对应的UEditor源码
首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP、Asp。net, Jsp)。
http://ueditor.baidu.com/website/download.html下载之后,把资源放到静态/问题/<代码>/静态目录下。文档结构如下:
(我把UEditor放到了静态代码 <代码>静态目录下面,这里的文件不会被<代码> webpack>
<强>编辑UEditor编辑器配置文件
我们打开<代码> ueditor.config.js> 窗口。UEDITOR_HOME_UR> window.UEDITOR_HOME_URL =,“/静态/问题/,,,,,//指定编辑器资源文件根目录
var URL =, window.UEDITOR_HOME_URL | |, getUEBasePath (); <代码> ueditor.config。js代码文件有很多配置,可以在这里进行一些初始化的全局配置,比如编辑器的默认宽高等:
,initialFrameWidth: 1000年,//初始化编辑器宽度,默认1000
initialFrameHeight: 320,//初始化编辑器高度,默认320 其他的参数配置,在该文件中有详细列出,或者参考官方文档http://fex.baidu.com/ueditor/
<强>将编辑器集成到系统中
打开/src/主要。js文件,插入下面的代码:
//ueditor
import & # 39;静态/问题/. ./ueditor.config.js& # 39;
import & # 39;静态/问题/. ./ueditor.all.min.js& # 39;
import & # 39;静态/问题/. ./lang/应用/zh-cn.js& # 39;
import & # 39;静态/问题/. ./ueditor.parse.min.js& # 39; <强>开发公共组件问题。vue
我们在<代码>/src/组件/目录下创建<代码>问题。vue 文件,作为我们的编辑器组件文件。
下面代码提供简单功能,具体使用根据需求完善该组件即可。
& lt; template>
& lt;才能p>
,,,& lt; script 类型=拔谋?plain"祝辞& lt;/script>
& lt;才能/p>
& lt;/template>
& lt; script>
export 才能;default {
,,,的名字:,& # 39;问题# 39;
,,,data (), {
,,,,,return {
,,,,,,,编辑:零
,,,,,}
,,,},
,,,道具:,{
,,,,,的值:,& # 39;& # 39;
,,,,,配置:,{}
,,,},
,,,mounted (), {
,,,,,this.editor =, window.UE.getEditor(& # 39;编辑# 39;,,this.config);
,,,,,this.editor.addListener(& # 39;准备# 39;,,(),=祝辞,{
,,,,,,,this.editor.setContent (this.value)
,,,,,})
,,,},
,,,方法:,{
,,,,,getUEContent (), {
,,,,,,,return this.editor.getContent ()
,,,,,}
,,,},
,,,destroyed (), {
,,,,,this.editor.destroy ()
,,,}
,,}
& lt;/script> 组件暴露了两个接口:
<李> <代码> 价值是编辑器的文字
<李> <代码>配置>
在其他页面中使用该组件
简单地创建一个需要UEditor的页面,再该页面中使用刚才封装好的问题。vue组件:
& lt; template>
& lt;才能p>
,,,& lt; Uediter : value=https://www.yisu.com/zixun/皍editor.value”:配置=" ueditor。配置“ref="问题">
<按钮@click=" returnContent ">显示编辑器内容
{{dat.content}}
<>脚本
从“@/组件/导入Uediter UE.vue”;
出口默认{
数据(){
返回{
dat: {
内容:“
}，
ueditor: {
价值:“编辑器默认文字的,
配置:{
initialFrameWidth: 800,
initialFrameHeight: 320
}
}
}
}，
方法:{
returnContent () {
this.dat。内容=? refs.ue.getUEContent ()
}
}，
组件:{
Uediter
}，
}
