关键词：
一、 下载包：
从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：
http://ueditor.baidu.com/website/
下载解压后会得到如果下文件目录：
将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；
二、 修改配置
在ueditor.config.js中修改如下代码：
// 这里是配置Ueditor内部进行文件请求时的静态文件服务地址
window.UEDITOR_HOME_URL = "/static/Ueditor/"
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
三、 文件的引入
在vue项目的入口文件main.js中将Ueditor所有的基础文件引入如下：（路径自行配制）
import'../static/Ueditor/ueditor.config.js'
import'../static/Ueditor/ueditor.all.min.js'
import'../static/Ueditor/lang/zh-cn/zh-cn.js'
import'../static/Ueditor/ueditor.parse.min.js'
四、 在相应vue的componnent文件中使用富文本编辑器
<template>
<div>
<!--editor的div为富文本的承载容器-->
<divid="editor"></div>
<buttontype="" @click="gettext">点击</button>
</div>
</template>
<script>
exportdefault {
data() {
return {
editor: null,
}
},
mounted() {
// 实例化editor编辑器
this.editor = UE.getEditor('editor');
// console.log(this.editor.setContent("1223"))
},
methods: {
gettext() {
// 获取editor中的文本
console.log(this.editor.getContent())
}
},
destroyed() {
// 将editor进行销毁
this.editor.destroy();
}
}
</script>
五、 执行上述代码可能会出现的问题
- 1. 出现如下报错
出现此种现象的原因是配置ueditor的图片以及文件的后台上传接口不正确；
如果Ueditor不需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置：（将serverUrl注释掉）
// 服务器统一请求接口路径
// serverUrl: URL + "jsp/controller.jsp",
以后将不会再出现上述报错，但是也将无法进行图片的上传：如下图：
如果Ueditor需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置：
// 服务器统一请求接口路径，配置的服务端接口
serverUrl: "http://127.0.0.1:9999/api/UE",
//或者如果使用了代理，则可以如下进行配置
serverUrl: "/api/ue",
六、 如果使用的是node的express做服务端，接口开发如下
首先下载编辑器包
npm install –save-dev ueditor
服务端项目文件中在public中增加如下目录以及文件
注：ueditor中的images文件夹是上传图片后存储的地方
nodejs中的config.js就是下载的ueditor包的jsp文件夹下config.json文件
开发接口
//加载ueditor 模块
var ueditor = require("ueditor");
//使用模块
app.use("/api/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
// ueditor 客户发起上传图片请求
if (req.query.action === 'uploadimage') {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = '/ueditor/images/';
res.ue_up(img_url); //你只要输入要保存的地址。保存操作交给ueditor来做
res.setHeader('Content-Type', 'text/html'); //IE8下载需要设置返回头尾text/html 不然json返回文件会被直接下载打开
}
// 客户端发起图片列表请求
elseif (req.query.action === 'listimage') {
var dir_url = '/ueditor/images/';
res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
}
// 客户端发起其它请求
else {
console.log('config.json')
res.setHeader('Content-Type', 'application/json');
res.redirect('/ueditor/nodejs/config.js');
}
}));
注：
上述接口中的"/api/ue"接口就是配置在前台项目ueditor.config.js文件中的serverUrl地址；
上述接口中img_url的'/ueditor/images/'和res.redirect的'/ueditor/nodejs/config.js'配置都是使用的express静态文件服务对图片存储路径和图片默认配置文件的存储和请求；
进行上述配置后，一定要在webpack的代理中添加如下代理：
// 配置ueditor的图片上传服务器预览路径
'/ueditor': {
//后台接口地址
target: 'http://localhost:9999',
//这里可以模拟服务器进行get和post参数的传递
changeOrigin: true,
//前端所有的/ueditor'请求都会请求到后台的/ueditor'路径之下
pathRewrite: {
'^/ueditor': '/ueditor'
}
}
vue3.0中如何使用ueditor
...改对应的样式。ueditor.config.js中initialFrameWidth:1200//初始化编辑器宽度,默认1000,initialFrameHeight:320//初始化编辑器高度,默认320 查看详情
vue中使用富文本编辑器ueditor(代码片段)
参考：https://www.cnblogs.com/daimo/p/7525146.htmlhttps://blog.csdn.net/liujun03/article/details/844532871.下载文件包http://ueditor.baidu.com/website/download.html（我用的jsp的UTF-8版本）2.文件包放到static下 3. cnpminstall --savevue-ueditor-wrap4.使用<divcla... 查看详情
vue2.0项目中使用ueditor富文本编辑器示例
最近在vue项目中需要使用富文本编辑器，于是将Ueditor集成进来，作为公共组件。在线预览：https://suweiteng.github.io/vue2-management-platform/#/editor项目地址：https://github.com/suweiteng/vue2-management-platform 记得在右上角点个赞哦~1.放入静... 查看详情
vue中使用百度编辑器ueditor
已有前辈整理，记录URL:http://www.cnblogs.com/ocean-sky/p/7132319.htmlhttp://blog.csdn.net/psd_html/article/details/73312859需注意的代码：子组件：config接收父组件传来的配置mounted(){//初始化UEconst_this=this;_this.editor=UE.getE 查看详情
vue项目中使用百度编辑器(代码片段)
vue中使用百度编辑器1、yarnaddvue-ueditor-wrap//下载此包可实现双向绑定功能2、将去官网下载百度编辑器包(jsp版本),将名字改为UEditor放在项目的static文件夹下3、在components文件夹下新建文件Ueditor.vue并写入以下代码（提醒：注意下方... 查看详情
vue2.0项目中使用ueditor富文本编辑器应用中出现的问题(代码片段)
1、如何设置config中的内容readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave:false,//自动保存功能重点：enableAutoSave不一定生效，怎么办？ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。 ... 查看详情
新手如何在vue项目中优雅的使用ueditor（百度富文本编辑器）(代码片段)
1、去官网，下载ueditor，解压，重命名，放在vue项目中的static文件夹下。 ps：新手会觉得在官网上有几种不同版本的文件，俺到底要下载哪一个，如果你仅仅是一个前端，那么好，只要是最新版本的UEditor，随便下，如果你比... 查看详情
vue使用ueditor富文本的配置(代码片段)
UEditor是百度的一个javascript富文本编辑器，功能强大，以下是vue项目中的引入过程1.下载vue-ueditor-wrap: 说明：下载这个插件对vue使用方便，有双向数据绑定的优势，操作相对方便点第一步，先下载依赖npmivue-ueditor-wrap-S第... 查看详情
在vue2.0中集成ueditor富文本编辑器(代码片段)
在vue的’项目中遇到了需要使用富文本编辑器的需求，在github上看了很多vue封装的editor插件，很多对图片上传和视频上传的支持并不是很好，最终还是决定使用UEditor。这类的文章网上有很多，我进行了摸索、手写代码、汇总、... 查看详情
vue安装富文本编辑器报错
vue中使用vue-quill-editor富文本编辑器，安装npminstallavue-plugin-ueditor--save的时候报错，然后把项目删除了，然后又重新创建了个，然后一直报这个错误，是不是我没有把之前安装vue-quill-editor删除干净的原因吗？请问怎么把vue-quill-edit... 查看详情
在vue中使用ueditor的过程(代码片段)
1、安装vue-editor-wrapnpmivue-ueditor-wrap2、下载UEditor文件夹 （https://github.com/HaoChuan9421/vue-ueditor-wrap） (1)、压缩包在vue-ueditor-wrap>>assets>>downloads中（我在vue项目中使用的是utf8-php.zip） (2)、把下载的文 查看详情
在网站中使用ueditor富文本编辑器
...tor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。官网链接进入到下载页面，选择相应的版本下载这里我们使用ASP.NET开发，所以选择.NET版本。将文件解压后，目录结构... 查看详情
tp中ueditor编辑器的使用
1/引入三个文件<scripttype="text/javascript"charset="utf-8"src="{$Think.config.PLUGIN_URL}ueditor/ueditor.config.js"></script><scripttype="text/javascript"charset="utf-8"src="{$Think.config.PL 查看详情
百度在线编辑器ueditor的使用
1、引入ueditor文件包到项目中（官网下载，分为utf-8还有gbk等好多版本，自己看着下）2、把ueditor引入到jsp页面中，可参考百度提供的示例<scripttype="text/javascript"charset="utf-8"src="${basePath}js/ueditor/ueditor.config.js"></script><scrip... 查看详情
ueditor百度编辑器中的setcontent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是：设置或者改变编辑器里面的文字内容或html内容函数说明：setContent(string,boolean);参数string是需要设置到编辑器里面的内容，可以含有HTML代码，最后插入到编辑器中的内容是经过编辑... 查看详情
ueditor富文本编辑器
在配合vue和webpack使用时，在严格模式下注意会报错，需要修改配置。 因为es6默认的是严格模式，所以会有报错，我的解决办法是配置es2015: 配置babelrc文件即可：{//"presets":["vue-app"],"presets":[[‘es2015‘,{modules:false}]... 查看详情
百度富文本ueditor编辑器的使用(代码片段)
...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率UEditor官网下载地址：https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情
8.使用ueditor添加文章(代码片段)
ueditor是一个很好用的html编辑器，不仅提供了格式化编辑文本的功能，还提供了自动上传图片的功能，现在就使用该编辑器来实现博客文章的编辑功能。1.使用ueditor过程中会请求一个后台js文件作为语言文件，不加处理的话中文... 查看详情