vue中使用Ueditor编辑器 -- 1

　一、下载包：

　　　　从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：http://ueditor.baidu.com/website/download.html

　　　　　下载解压后会得到如果下文件目录：

　　　　将上述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为富文本的承载容器--><div id="editor"></div><button type="" @click="gettext">点击</button></div></template><script>exportdefault {data() {return {editor: null,}},mounted() {// 引入urlUEDITOR_CONFIG.UEDITOR_HOME_URL = '../../static/Ueditor/'// 实例化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'}}

更多专业前端知识，请上【猿2048】www.mk2048.com

vue中使用Ueditor编辑器 -- 1相关推荐

vue中使用Ueditor编辑器
一.下载包: 官网地址:http://fex.baidu.com/ueditor/ git地址: https://github.com/fex-team/ueditor 打开下载后的文件,大致目录,不 ...
在YII2框架中使用UEditor编辑器发布文章
在YII2框架中使用UEditor编辑器发布文章创建文章数据表文章数据表主要有4个字段 id 主键(int) title 标题(varchar) content 内容(text) created ...
用百度富文本编辑器UMeditor实现对html文本的编辑功能，vue中使用UMeditor编辑器
百度 UMeditor 编辑器资源免费下载地址: https://download.csdn.net/download/WanweI897/67403979 该编辑器没有官方文档,不过百度另一个编辑器 ...
vue项目百度ueditor编辑器集成135和秀米，主题图标美化
目录前言效果预览教程 1. 首先下载主题美化插件 2. 接入135编辑器 3. 接入秀米编辑器 4. 组件封装 5. main.js引入样式和js文件 6. 页面使用完成! 前言本文介绍vu ...
开发中使用UEditor编辑器的注意事项
最近在一个刚结束的一个项目中使用到了UEditor编辑器,下面总结一下遇到的问题以及使用时需要注意的地方: 1. 使用UEditor插件需要先对其进行路径配置: 在ueditor.config.js文 ...
vue中使用百度编辑器Ueditor
1.下载Ueditor文件 https://ueditor.baidu.com/website/download.html 2.安装 vue-editor-wrap npm i vue-ueditor ...
Vue中使用Ueditor
一.下载Ueditor包官网地址:http://fex.baidu.com/ueditor/ git地址: https://github.com/fex-team/ueditor 打开下载后的文件, ...
在vue中应用ueditor引入秀米，支持图片以及背景图抓取
当前系统中引入的是jsp的ueditor,如果你们也是使用这个,前端可以直接使用我这边配置好的,至于后端的需要开发人员自己配置,当前支持: 秀米保存后图片自动抓取(包括背景图) ueditor插入视频 ...
vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。
需求是做个类似微信公众号那样的图文编辑推广,文章最后要在小程序里面浏览. 开始找到个富文本编辑器'vue-quill-editor' 可以使用,最后出来的内容是html格式,虽然小程序里面可以转译过来 ...

vue中使用Ueditor编辑器 -- 1

vue中使用Ueditor编辑器 -- 1相关推荐

最新文章

热门文章