wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。
一、wangEditor的引入
wangEditor官网:http://www.wangeditor.com/
官方在线开发文档:https://www.kancloud.cn/wangfupeng/wangeditor3/332599
我们可以先到官网下载wangEditor
<script type="text/javascript" src="./wangEditor/wangEditor.js"></script>
<script type="text/css" src="./wangEditor/wangEditor.css"></script>
二、wangEditor的封装
Ext.define('App.ux.MyWangEditor', {
extend: 'Ext.form.field.Display',
alias: ['widget.wangEditor'],
// 创建全局编辑器
editors: null,
// 传入id
id: null,
showId: null,
// 初始化组件和编辑器
initComponent: function () {
var me = this;
me.callParent(arguments);
this.initEditor();
},
afterRender: function () {
var me = this;
me.callParent(arguments);
me.create();
},
// 初始化编辑器配置
initEditor: function () {
var me = this;
// 创建wangEditor
var E = window.wangEditor;
var v = "#" + me.id;
me.editors = new E(v);
// 自定义文件上传方法
me.editors.customConfig.customUploadImg = function (files, insert) {
me.upload(files, insert);
}
// 自定义菜单配置
me.editors.customConfig.menus = me.menusConfig;
},
create: function () {
var me = this;
me.editors.create();
me.loade();
},
loade: function () {
var me = this;
me.synHtml();
me.editors.create();
var html = Ext.getCmp(me.showId).getValue();
if (Ext.isEmpty(html)) {
me.editors.txt.clear();
} else {
me.editors.txt.html(html);
}
},
// 监控变化,同步更新
synHtml: function () {
var me = this;
var $text1 = Ext.getCmp(me.showId);
me.editors.customConfig.onchange = function (html) {
$text1.setRawValue(html);
}
},
// 自定义上传方法
upload: function (files, insert) {
// 图片url
var imgUrl = '';
// files 是 input 中选中的文件列表,拼接formData
var formData = new FormData();
formData.append("fileFiled", files[0]);
formData.append("fileCode", null);
$.ajax({
url: SystemUtil.getRequestUrl('folder/uploadFile2'),
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function (respone) {
// 上传代码返回结果之后,将图片插入到编辑器中
imgUrl = "http://f.xxxx.com/" + respone.result.path;
insert(imgUrl);
},
error: function (respone) {
// 上传失败打印错误信息
me.console(respone.message);
}
});
},
// 菜单配置
menusConfig: [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
});
三、引入封装的编辑器
{
xtype: 'fieldset',
columnWidth: 1,
collapsible: true,
title: '通知内容',
layout: 'column',
defaults: {
margin: '5 5 5 5',
columnWidth: 1,
labelWidth: 80,
xtype: 'textfield'
},
items: [{
xtype: 'wangEditor', // 引入包装好的编辑器
id: 'weShow'
},{
allowBlank: false,
xtype: 'textareafield', // 编辑器内容提交所依赖的文本域
id: 'editors',
hidden: true,
name: 'content'
}]
}
最后附上引入的wangEditor3编辑器的图
转载请注明出处!
来源:CSDN
作者:哪里去不到
链接:https://blog.csdn.net/qq_35424132/article/details/90379264