当前位置: 首页>前端>正文

uedit如何引用xml schema 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.更多配置项说明


https://www.xamrdz.com/web/2f51942434.html

相关文章: