edui 富文本编辑_2020-03-03 快速部署UEditor富文本编辑器

情景：

1、UEditor 依然是国内使用频率极高的所见即所得编辑器而 Vue 又有着广泛的使用，所以将两者结合使用，是很多 Vue 项目开发者的切实需求。

2、目前没有发现满足这种需求，而使用又很方便的 repo、有的可能也只是简单的暴露一个 UEditor 的实例，仍然需要开发者手动去调用 getContent，setContent，而通过 v-model 绑定数据也是很多人期待的方式。

于是，就有前人封装了双向绑定的UEditor 组件，使用起来便捷。UEditor 官方不再积极维护，并且作者也将持续优化和修复UEditor 停更带来的一些问题。

1.快速安装：

npm i vue-ueditor-wrap --save

#或者

yarn add vue-ueditor-wrap --save

2.下载UEditor对应的后端文件(上传文件相关)及插件配置文件

https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads

将下载的压缩包解压并重命名为 UEditor(只需要选择一个你需要的版本,比如 utf8-php),放入你项目的 static 目录下。

如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入项目的 public 目录下。

如果你使用的是webpack自己搭建的框架，暂时还没有告诉webpack做个static是静态资源文件目录，不需要被编译打包，只需要拷贝到生产环境中,可以在webpack配置下插件：

plugins: [

new CopyWebpackPlugin(

[

{

from: 'static',

to: './static'

}

]

)

]

3.引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

// 或者

const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

你也可以通过直接引入 CDN 链接的方式来使用，它会暴露一个全局的 VueUeditorWrap 变量(具体如何使用你可以阅读作者的这篇博客或参考这个仓库)。

4.注册组件

components: {

VueUeditorWrap

}

// 或者在 main.js 里将它注册为全局组件

Vue.component('vue-ueditor-wrap', VueUeditorWrap)

5.v-model绑定数据

data () {

return {

msg: '

Vue + UEditor + v-model双向绑定

',

myConfig: {

// 编辑器不自动被内容撑高

autoHeightEnabled: false,

// 初始容器高度

initialFrameHeight: 240,

// 初始容器宽度

initialFrameWidth: '100%',

// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！)

serverUrl: 'http://35.201.165.105:8000/controller.php',

// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2

UEDITOR_HOME_URL: '/static/UEditor/'

}

}

}

6.效果

image.png

7.配置拓展(源码分析，二次开发)

通过查看作者封装的组件源码：node_modules\vue-ueditor-wrap\src\components\vue-ueditor-wrap.vue

我们可以发现作者是通过查询UEditor文件目录并调用了ueditor.config.js和ueditor.all.min.js文件

这也解释了为什么要在static创建UEditor文件目录的原因

查找静态文件夹下名称为UEditor文件夹路径

调用ueditor.config.js

调用ueditor.all.min.js

因此我们可以对ueditor.config.js和ueditor.all.min这两个文件进行修改和定制：

(一)字体种类的添加：

ueditor编辑器默认只提供了11中字体，而实际的应用中，这些字体还是太少，无法满足各种需求，所以需要进行字体种类的添加，

具体需要同步修改三个文件：ueditor.config.js、zh-cn.js、en.js，在fontfamily处添加需要的字体类型即可，操作如下：

ueditor.config.js

zh-cn.js

en.js

(二)修改字号显示方式为中文word字号显示方式 ：

1、打开ueditor.config.js,搜索“'fontsize':”，定位到如下代码：

// 'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36]

2、在注释项下添加如下代码

'fontsize': [

{ name: '\u516d\u53f7', val: 10},

{ name: '\u5c0f\u4e94', val: 12},

{ name: '\u4e94\u53f7', val: 14},

{ name: '\u5c0f\u56db', val: 16},

{ name: '\u56db\u53f7', val: 18},

{ name: '\u5c0f\u4e09', val: 20},

{ name: '\u4e09\u53f7', val: 21},

{ name: '\u5c0f\u4e8c', val: 24},

{ name: '\u4e8c\u53f7', val: 29},

{ name: '\u5c0f\u4e00', val: 32},

{ name: '\u4e00\u53f7', val: 34},

{ name: '\u5c0f\u521d', val: 48},

{ name: '\u521d\u53f7', val: 56}

]

P.S：由于fontsize配置项接收的只有数字，没有接收name、val这样的对象集合，我们需要去修改方法中的源码

并且由于WEB字号低于10没有什么使用价值，仅添加10px以上的字体，名称可以自己定义，只要把中文转为UNICODE就行了(貌似不转换直接用中文字符串也可以)。

3.打开ueditor.all.js,搜索“editorui.fontsize”，定位到如下代码：

editorui.fontsize = function (editor, list, title) {

title = editor.options.labelMap['fontsize'] || editor.getLang("labelMap.fontsize") || '';

list = list || editor.options['fontsize'] || [];

if (!list.length) return;

var items = [];

for (var i = 0; i < list.length; i++) {

var sizename = list[i].name;

var size = list[i].val + 'px';

items.push({

label: sizename,

value: size,

theme: editor.options.theme,

renderLabelHtml: function () {

return '

' + (this.label || '') + '

';

}

});

}

将这段代码：

for (var i = 0; i < list.length; i++) {

var size = list[i] + 'px';

items.push({

label:size,

value:size,

改为：

for (var i = 0; i < list.length; i++) {

var sizename = list[i].name;

var size = list[i].val + 'px';

items.push({

label:sizename,

value:size,

可以看到思路就在于把原来以像素字号表示的简单的fontsize属性细化，模仿了font-family的键值对书写方式，添加name和val两个属性，再在下方的ui代码拼接的地方将细化后的sizename和name值分别输出。

【注意】：作者在UEditor插件中默认引入的是ueditor.all.min.js,但这是压缩过的代码，不方便编辑。我们可以把ueditor.all.js重命名为ueditor.all.min.js

这样在实际生成的编辑器实例中即可看到生效

字号效果

8.更多配置项说明