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 '
';
}
});
}
将这段代码:
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.更多配置项说明
edui 富文本编辑_2020-03-03 快速部署UEditor富文本编辑器相关推荐
- swift 富文本编辑_如何使用Swift构建协作式文本编辑器
swift 富文本编辑 by Neo Ighodaro 由新Ighodaro 如何使用Swift构建协作式文本编辑器 (How to build a collaborative text editor ...
- 富文本生成静态html,如何更加安全快速的使用富文本编辑器
众所周知,富文本编辑器是目前用途广泛的前端插件,它可以直接编辑并保存多样化的文本格式.适用于论坛留言,简单文章发布,自定义静态页面等.本文简单对一种安全使用富文本编辑器的方法进行介绍.文章实例 文章使 ...
- 对于 React 结合 Antd 实现富文本编辑功能
一.React 结合 Antd 实现富文本编辑 引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
- 富文本编辑器 java_HtmlBox富文本编辑器的使用
我们下面需要做的是在项目里面提供给用户一个富文本编辑区域. 一.什么是富文本编辑 富文本编辑器,Multi-function Text Editor, 简称 MTE, 它提供类似于 Microsoft ...
- 2.JeeSite 基础—使用 JeeSite 快速开发项目—新建模块、单表代码生成、上传图片、富文本编辑
本文目录如下: 第2章 JeeSite 基础-使用 JeeSite 快速开发项目 2.1 新建模块 2.1.1 创建一个模块 2.1.2 将模块添加到工程里 2.1.3 在 web 的 pom.xml ...
- edui 富文本编辑_React中使用UEditor百度富文本的方法
前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入uedito ...
- edui 富文本编辑_终于我还是输给了免费富文本编辑器
前因后果 考虑给百度编辑器开发的一个二次插件,等下会进行说明如何使用改源码的方式开发二次插件 后端增加接口,接受word文档,转为html返回前台,前台再根据html内容对于富文本编辑框继续赋值和一些 ...
- 【愚公系列】2022年03月 微信小程序-富文本编辑器
文章目录 前言 一.富文本编辑器的使用 1.富文本编辑器属性 2.富文本编辑器使用 3.实际效果 前言 富文本编辑器,可以对图片.文字进行编辑. 编辑器导出内容支持带标签的 html和纯文本的 tex ...
- edui 富文本编辑_富文本编辑器wangEditor添加本地上传视频功能
最近做一个考试系统,编辑题目要用到富文本编辑,要求可以添加图片.视频和pdf.此前项目中用的都是wangEditor,使用的时候发现只可以上传本地图片,视频只能添加链接,找了其他插件,也没发现比较好用 ...
最新文章
- 剑指offer--3题
- 与其他CA合作签发证书 谷歌赛门铁克之争接近尾声
- 利用脑机接口提高意念打字速度,让新手用户也能快速上手意念交流
- P2339 提交作业usaco
- 认知实习培训第四天总结
- 从数据库读写RadioButtonList选中的值
- LeetCode 1035. 不相交的线(最长公共子序列DP)
- java 高性能web_高性能WEB开发 - BearRui(AK-47) 的Blog - BlogJava
- wordpress开放注册_WordPress.com开源,欧洲开放数据门户网站以及更多新闻
- 中西造园水法浅比【ZZ】
- 互联网广告获客渠道有哪些?
- jQuery 帮助文档 api
- Wowza服务器系列(5):使用rtsp协议向wowza推流的wowoza配置方法
- 编程:Python实现图片识别
- 【翻译】谷歌基于数据驱动的软件安全:模型和方法
- win10+ubuntu双系统下,完美卸载ubuntu
- 软件工程——软件管理
- CDH5(CDH 5.16.1)安装
- 设n是一个任意自然数,如果n的各位数字反向排列所得的自然数与n相等,则n称为回文数。从键盘输入一个5位数字,请编写程序判断这个数字是不是回文数
- Gensim之Word2Vec使用手册
热门文章
- unix时间戳转换为日期格式
- Docker 学习总结(74)—— Docker Swarm 全面总结
- 彻底解决设备未获得Play保护机制认证解决方法华为荣耀手机鸿蒙2.0系统HarmonyOS 2.0安装谷歌服务框架GMS谷歌应用商店Google Play华为P40 Mate40 Mate30荣耀30
- 用友 BI系统排名?用友 BI办公系统怎么选?什么是用户口碑最好的用友 BI系统?
- 干货分享,40个photoshop技能送给你!
- office2019
- Ubuntu自用配置(Ubuntu 22.04LTS + 拯救者R9000P 2021)
- 美国“鹰派”贸易代表又拿淘宝说事,华尔街为什么不买账?
- 【一文学会文件上传】SpringBoot+form表单实现文件上传
- 百丽强势布局B2C,20亿铺路改变其销售格局