Ext.define('saas.override.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
fontFamilies: [{
name: '微软雅黑',
value: 'Microsoft YaHei'
}, {
name: '宋体',
value: 'SimSun'
}, {
name: '新宋体',
value: 'NSimSun'
}, {
name: '仿宋',
value: 'FangSong'
}, {
name: '楷体',
value: 'KaiTi'
}, {
name: '黑体',
value: 'SimHei'
}, 'Arial', 'Arial Black', 'Courier New', 'Tahoma', 'Times New Roman', 'Verdana'],
headers: [{
block: false,
name: '普通文本',
size: '14px',
color: 'rgb(57, 57, 57)'
}, {
block: true,
name: '标题',
size: '32px',
color: 'rgb(57, 57, 57)',
bold: true
}, {
block: true,
name: '副标题',
size: '18px',
color: 'rgb(89, 89, 89)',
bold: true
}, {
block: true,
name: '标题1',
size: '28px',
color: 'rgb(57, 57, 57)',
bold: true
}, {
block: true,
name: '标题2',
size: '20px',
color: 'rgb(57, 57, 57)',
bold: true
}, {
block: true,
name: '标题3',
size: '16px',
color: 'rgb(57, 57, 57)',
bold: true
}, {
block: true,
name: '标题4',
size: '14px',
color: 'rgb(57, 57, 57)',
bold: true
}],
blocks: [{
class: 'doc-block',
name: '带背景内容'
}, {
class: 'doc-tip doc-tip-info',
name: '提示内容'
}, {
class: 'doc-tip doc-tip-warn',
name: '警告内容'
}, {
class: 'doc-tip doc-tip-error',
name: '错误内容'
}, {
class: 'doc-quote',
name: '引用内容'
}, {
class: 'doc-line',
html: '
'
}],
enableHeaders: true,
enableFontSize: false,
enableUpload: true,
enableSourceEdit: false,
enableBlocks: true,
publishes: {
textValue: 1
},
initComponent: function () {
var me = this;
me.callParent();
// 用于获取innerText
me.on('change', function () {
me.publishState('textValue', me.getTextValue());
});
},
initEditor: function () {
var me = this;
me.callParent();
/**
* 扩展监听事件
*/
var doc = me.getDoc(), docEl = Ext.get(doc);
if (docEl) {
docEl.on({
mousedown: '_onMouseDown',
keyup: '_onKeyup',
scope: me,
delegated: false
});
}
},
_onMouseDown: function (e) {
var target = e.parentEvent.target;
if (target.nodeName == 'IMG') {
e.preventDefault();
this.resizeImage(target);
}
},
_onKeyup: function (e) {
if (e.keyCode == e.ENTER && e.ctrlKey) {
e.preventDefault();
// 换行
// this.insertAtCursor('
');
}
},
getDocMarkup: function () {
// 添加额外样式、脚本
var me = this,
h = me.iframeEl.getHeight() - me.iframePad * 2,
extraCss = Ext.getResourcePath('css/htmleditor.css');
return Ext.String.format('' + '${h.name} `,
value = Ext.clone(h);
return {
text: text,
value,
handler: function (item) {
var val = item.value;
me.execHeaderStyle(val);
item.ownerCt.ownerCmp.setText(val.name);
}
}
});
return {
itemId: 'headers',
width: 90,
padding: '7 0',
text: items[0].text,
tabIndex: -1,
menu: Ext.widget('menu', {
plain: true,
items
})
};
},
/**
* 选择语句块
*/
getBlocks: function () {
var me = this,
items = me.blocks.map(h => {
var text = h.html || ``,
value = Ext.clone(h);
return {
text: text,
value,
handler: function (item) {
var val = item.value;
me.execBlockStyle(val);
}
}
});
return {
itemId: 'blocks',
iconCls: 'x-fa fa-ellipsis-v',
tooltip: '插入块',
tabIndex: -1,
arrowVisible: false,
menuAlign: 'tr-br?',
menu: Ext.widget('menu', {
plain: true,
cls: 'doc-blocks__ex',
width: 180,
items
})
};
},
/**
* 解决fontSize只支持 1 - 7 的问题
*/
execHeaderStyle: function (header) {
var me = this,
win = me.getWin(),
doc = me.getDoc(),
text = win.getSelection() || me.defaultValue;
if (!me.destroyed) {
var span = doc.createElement('span');
span.innerHTML = text;
span.style.fontSize = header.size;
span.style.color = header.color;
span.style.fontWeight = header.bold ? 'bold' : 'normal';
win.focus();
me.execCmd('insertHTML', '' + span.outerHTML + '
');
}
},
/**
* 特殊样式的语句块
*/
execBlockStyle: function (block) {
var me = this,
win = me.getWin(),
text = win.getSelection() || '