使用vue如何引入ueditor及node后台配置

这篇文章主要介绍了vue中使用ueditor富文本编辑器的相关资料,需要的朋友可以参考下

最近在做后台管理系统的时候遇到要使用富文本编辑器。最后选择了ueditor，我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建，

1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个utf8-jsp的文件夹，里面包含的内容如下：

2、将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下，修改ueditorconfigjs文件夹中的内容，如下图：

3、编写子组件

4、在父组件中使用

5、弄好之后，上传会提示后端配置项http错误，文件上传会提示上传错误。这里提别申明一点，ueditor在前端配置好后，需要与后端部分配合进行，然后将配置ueditorconfigjs 里的serverUrl的前缀改陈你自己的后端访问的请求路径地址

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue中如何使用highCharts绘制3d饼图

在vue-lazyload中使用延迟加载插件

Vuejs 单文件组件（详细教程）

为WordPress更换百度Ueditor编辑器

先声明，我现在在使用的wp为39版本。Ueditor插件为130。

在网上找过很多富文本插件，感觉国产的这个用起来最强大，最舒服。而且还内置baidu地图，google地图。为什么不去用呢？

这个插件的几个重要问题如使用后contact-form-7失效，上传后被自动压缩的看不清。我都会告诉大家解决方案。

为什么要更换Ueditor编辑器？

先上一个原来的编辑器，超级简单吧。根本无法满足我的需要。

下载和安装方法。

自己在百度上搜索 ueditor wordpress插件吧。这里不提供了，百度审核不通过。

下载后解压，直接放在这个目录下，然后启动。

已有问题的解决

1、Ueditor为了安全考虑，转译了一些特殊标签和符号。也会在段落的地方加<p>标签。

不过这些都不影响使用，实在影响的自己可以写CSS样式控制。再或者只能改源码了。

改源码方式，我这里就不写了，我也没有用上。

我是通过CSS方式去处理的。

但有个最大的问题，就是使用ueditor后，concact-form-7无法使用，会出现404。把这个插件禁用后，就会没有问题。所以我想和在HTML格式下加p标签和特殊符号转译有关。

所以我这里的解决方法很笨。也很简单。就是我们在使用concact-form-7时，基本都是用在单页面上的。所以我们在要用时，就把ueditor停用一下。把短码打后发布后再启用就是了。

2、失真，被自动压缩。我在网上看到几个网友有这样的问题，也没有解决，这里发出来给大家参考下。

这个问题是概览事件，上传几次后，就会不再被压缩得很小。不过我还是找了下配置文件。改后确实不再有这个问题了。

上图这个是配置文件位置，打开编辑

把compressSide:1前的//去掉，

设置为1

然后自己更改合适的压缩比例。maxImageSideLength

我这里是 700px

意思就是上传最大宽度700px,以宽度为准，如果宽度大于700，就缩放到700px高度自适应。

而我们原来的设计只有一个maxImageSideLength：900；而compressSide默认值为0

也就是说，如果以最长边为准。

例子：长9000PX，宽900px上传。会把高9000等比缩放为900，而宽自然被缩放为90所以就出现失真问题！

注意事项

请下载上面给出的地址下载。

maxImageSideLength和compressSide要设置，用默认基本是要出问题的。

这篇文章主要介绍了vue引入ueditor及node后台配置详解，现在分享给大家，也给大家做个参考。

最近公司的某个客户要用上我们公司的产品，他的后台管理里的富文本编辑器要求有点多，开始打算用Quill，但是发现Quill根本满足不了他的需求。在调研了市面上的富文本编辑器后，最后似乎只剩了百度的ueditor。虽然很丑~~~，不过没关系，政府网站和这种效果更

vue引入ueditor

步骤

百度ueditor下载，随便哪个版本就好(本文章以php版为例)，不需要特别全面功能的可以考虑下UM喽

将对应的文件夹放到static中

修改前端vue部分引用的ueditorconfgjs，设置路径windowUEDITOR_HOME_URL = "/static/utf8-php/"

windowUEDITOR_HOME_URL = "/static/utf8-php/"

var URL = windowUEDITOR_HOME_URL || getUEBasePath();

/

配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。

/

windowUEDITOR_CONFIG = {

//为编辑器实例添加一个路径，这个不能被注释

UEDITOR_HOME_URL: URL

// 服务器统一请求接口路径

, serverUrl: "http://localhost:3000/ueditor/ue"

// 下面忽略编写vue文件,我已经把static配置到webpack的路径里了，自己可以相应更改，ueditor中的各项方法可以在自己下载的百度ueditor包的indexhtml中找。

<template>

<p class="hello">

<script id="editor" type="text/plain"></script>

<button @click="show">你敢点一下吗？</button>

</p>

</template>

<script>

export default {

name: 'HelloWorld',

data () {

return {

editor: null

}

},

methods: {

show () {

consolelog(thiseditorgetContent())

}

},

mounted () {

require('static/utf8-php/ueditorconfigjs')

require('static/utf8-php/ueditorallminjs')

require('static/utf8-php/lang/zh-cn/zh-cnjs')

require('static/utf8-php/ueditorparseminjs')

thiseditor = windowUEgetEditor('editor')

},

destroyed () {

thiseditordestroy()

}

}

</script>注意事项

在步骤3中的路径一定要有最后一个"/"

步骤3中的serverUrl写成对应的服务端地址

node后端处理

express 实现

网上有人已经实现了express版的，使用express的有福了。不过我直接用他的是不能直接用的，在浏览器中报": unexcepected "，我将他的代码改了一下，不让它在返回配置是重定向，而是直接返回一个jsonp，jsonp内容设置为百度的ueditor包中的php文件下的configjson，记得用正则表达式或者直接用手把注释去掉，json是没有注释的。

这时你可能发现不报错了，但是上传会错误，报404。其实已经上传成功了，只是没有正确的加载，因为返回的路径只是路径，不是完整的url，就会请求到前端服务域下。（例如"http://localhost:8080/")。此时修改configjson中"imageUrlPrefix": "http://localhost:3000",就可以将路径补充完整。跨域问题自己解决哈-----

resjsonp(configjson)

给configjson的imageUrlPrefix加后端域

koa实现

这时个比较精巧的库，而且将在v3中去掉了generator写法，generator现在已经渐渐不被支持，所以使用async写法吧。我主要用了await-busboy这个库，实现文件处理。

实现判断

const ActionType = ctxqueryaction

// 当ActionType为config时返回与express中一样的json

// 当为uploadimage或uploadfile时处理

处理上传

const parse = require('await-busboy')

const parts = parse(ctx)

let part,

stream,

tmp_name,

file_path,

filename

while ((part = await parts)) {

if (partlength) {

// 此处解析到form的fields

consolelog({ key: part[0], value: part[1] })

} else {

// 此处解析到文件并以可读流形式返回，通过nodejs官方API存储

if(ActionType === 'uploadimage' && img_typeindexOf(pathextname(partfilename)) >= 0 ){

filename = 'pic_'+ (new Date())getTime() + '_' + partfilename

file_path = pathjoin(img_path, filename)

} else if (ActionType === 'uploadfile'){

filename = 'file_'+(new Date())getTime()+'_'+partfilename

file_path = pathjoin(files_path, filename)

}

stream = fscreateWriteStream(pathjoin(static_path,file_path))

partpipe(stream)

tmp_name = partfilename

}

// 返回json要引用koa-jsonp哦~~上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用webpack打包处理bundlejs文件过大的问题

在javascript中如何实现填充默认头像

JavaScript的6种正则表达式（详细教程）

看看官网上的例子，可能是你编辑器没有加载完全；可以直接在button上调用setDisabled（），像这样<button onclick="setDisabled()">不可编辑</button>

首先要改的是dwzuijs脚本了

找到if ($fnxheditor) { 这行(写好加载百度编辑器当然下面的 xheditor 要注释掉)

在上面添加

//编辑器加载更换到百毒编辑器 fix:corz

if ($("textareaeditor", $p)length>0) {

var module = $("textareaeditor", $p)attr('module');

ueditor_loader[module]={};

$("textareaeditor", $p)each(function(i){

var $this = $(this);

var module=$thisattr('module');

var thisid= module+'_'+i;

$thisattr('id',thisid);

var uplink=$thisattr('upLink');

var session=$thisattr('session');

var ifheight=$thisattr('height')$thisattr('height'):320;

//var thisname=$thisattr('name');

ueditor_loader[module][i]= new baidueditoruiEditor({

minFrameHeight:ifheight

,imageUrl:uplink+'image_upload'

//,snapscreenServerUrl:uplink+'image_upload'

,fileUrl:uplink+'file_upload'+session

,catcherUrl:uplink+'get_remote_image'

,imageManagerUrl:uplink+'image_manager'

,wordImageUrl:uplink+'image_upload'

,getMovieUrl:uplink+'get_movie'

//,textarea:thisname

});

ueditor_loader[module][i]render( $this[0] );

});

}

编辑器的基本引入放到indexhtml里面

<script type="text/javascript">

var UEDITOR_HOME_URL='__PUBLIC__/ueditor/',ueditor_loader={};

//编辑器同步

function editorSyn(ename){

$each(ueditor_loader[ename],function(i){

thissync();

});

}

</script>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/ueditor/themes/default/ueditorcss"/> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/editor_configjs"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/editor_all_minjs"></script>

这里说明一下为啥要定义 ueditor_loader 这个全局属性了因为navtab提交时占用了onsubmit,必须要手动同步，而在ueditor_loader里进行对 new baidueditoruiEditor 对象进行存放，在editorSyn 里进行同步而用的。在navtab页面里onsubmit改成onsubmit="editorSyn('{:MODULE_NAME}');return validateCallback(this, navTabAjaxDone);">

编辑器的加载

<dl class="nowrap">

<dt>详细内容：</dt>

<dd class="w720">

<textarea class="editor" name="content" height="400" session="{:C('VAR_SESSION_ID')}={:session_id()}" upLink="__GROUP__/ueditor/" module="{:MODULE_NAME}">{$vocontent}</textarea>

</dd>

</dl>

各方面的参数都是相对应的大家看看就明白了module="{:MODULE_NAME}"就是定义一下所在的模块，放到ueditor_loader[module]里到时候editorSyn('{:MODULE_NAME}')时找回页面所在的ueditor_loader进行同步再提交到服务器({:MODULE_NAME}在多标签的唯一性，到 editorSyn就可以单单同步写着{:MODULE_NAME}的编辑器实例对象了)

ie加载编辑器(121版)还有一个bug,必须改过ueditor\third-party\SyntaxHighlighter\shCorejs

到299行换成下面的代码在if (str) str += '';的下面换成

if(str){

realreplacecall(strtoString()slice(matchindex), r2, function () {

for (var i = 1; i < argumentslength - 2; i++) {

if (arguments[i] === undefined)

match[i] = undefined;

}

});

}

这次给大家带来Vue20怎么实现一个富文本编辑器，Vue20实现富文本编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。

在vue的'项目中遇到了需要使用富文本编辑器的需求，在github上看了很多vue封装的editor插件，很多对上传和视频上传的支持并不是很好，最终还是决定使用UEditor。

这类的文章网上有很多，我进行了摸索、手写代码、汇总、排版，形成了这篇文章。

下载对应的UEditor源码

首先，去官网上下载UEditor的源码，根据你后台语言的不同下载对应的版本（PHP、Asp、Net、Jsp）。

http://ueditorbaiducom/website/downloadhtml

下载之后，把资源放到 /static/ue/ 静态目录下。

（我把UEditor放到了static静态目录下面，这里的文件不会被webpack打包，当然你也可以选择性地放进src中）

编辑 UEditor 编辑器 配置文件

我们打开 ueditorconfigjs，修改其中的windowUEDITOR_HOME_UR配置，如下：

windowUEDITOR_HOME_URL = "/static/UE/"; //指定编辑器资源文件根目录

var URL = windowUEDITOR_HOME_URL || getUEBasePath();

ueditorconfigjs文件有很多配置，可以在这里进行一些初始化的全局配置，比如编辑器的默认宽高等：

,initialFrameWidth:1000 //初始化编辑器宽度,默认1000

,initialFrameHeight:320 //初始化编辑器高度,默认320

其他的参数配置，在该文件中有详细列出，或者参考官方文档 http://fexbaiducom/ueditor/

将编辑器集成到系统中

打开 /src/mainjs 文件，插入下面的代码：

//ueditor

import '/static/UE/ueditorconfigjs'

import '/static/UE/ueditorallminjs'

import '/static/UE/lang/zh-cn/zh-cnjs'

import '/static/UE/ueditorparseminjs'

开发公共组件 UEvue

我们在 /src/components/ 目录下创建 UEvue文件，作为我们的编辑器组件文件。

下面代码提供简单功能，具体使用根据需求完善该组件即可。

<template>

<p>

<script type="text/plain"></script>

</p>

</template>

<script>

export default {

name: 'ue',

data () {

return {

editor: null

}

},

props: {

value: '',

config: {}

},

mounted () {

thiseditor = windowUEgetEditor('editor', thisconfig);

thiseditoraddListener('ready', () => {

thiseditorsetContent(thisvalue)

})

},

methods: {

getUEContent () {

return thiseditorgetContent()

}

},

destroyed () {

thiseditordestroy()

}

}

</script>

组件暴露了两个接口：

value是编辑器的文字

config是编辑器的配置参数

在其他页面中使用该组件

简单地创建一个需要UEditor的页面，再该页面中使用刚才封装好的UEvue组件：

<template>

<p>

<Uediter :value="ueditorvalue" :config="ueditorconfig" ref="ue"></Uediter>

<button @click="returnContent">显示编辑器内容</el-button>

<p>{{datcontent}}</p>

</p>

</template>

<script>

import Uediter from '@/components/UEvue';

export default {

data () {

return {

dat: {

content: ''

},

ueditor: {

value: '编辑器默认文字',

config: {

initialFrameWidth: 800,

initialFrameHeight: 320

}

}

}

},

methods: {

returnContent () {

thisdatcontent = this$refsuegetUEContent()

}

},

components: {

Uediter

},

}

</script>

配置完上述内容后，控制台可能会出现"后台配置项返回格式出错，上传功能将不能正常使用！"的报错，

我们在编辑器中上传或者视频，也会出现响应的报错，这是因为没有配置服务器的请求接口，在ueditorconfigjs中，对serverUrl进行配置：

// 服务器统一请求接口路径

, serverUrl: 'http://1721625449:83/File/UEditor' //地址管你们后端要去相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Vue组件开发有哪些技巧

vue项目打包上传到百度的BAE步奏详解

AngularJS中@HostBinding()和@HostListener()的使用区别