PDA

View Full Version : 鄙人扩展的Ext.form.RichEditor, 哈哈,请多指教



anya
20 Feb 2011, 9:50 PM
Ext.form.RichEditor 采用Office 2010的风格, 提供了:剪切板,字体, 段落,编辑, 插入等几大块, 其中功能有:剪切、复制、粘贴,字体、字体大小、标题(H1,H2…)、加粗、对齐, 文章排版、全选、去除格式、查找、替换、另存为,文件上传;插入图标、文件、图片、表格等功能,还有各功能,希望有意者继续完善!
代码:

/**
* 具有文件上传的编辑控件
* @class Ext.form.RichEditor
* @extends Ext.form.HtmlEditor
*/

/*
* useage:
* var field = new Ext.form.RichEditor({
* renderTo:Ext.getBody(),
* enableFace:false,
* enableUpload: true, // 要引入filefield 控件
* abyPath:'E:/aby/js/ext',
* height:500,
* width:760
* });
*
* or
*
* var frm = new Ext.form.FormPanel({
* layout:'fit',
* items : [{
* xtype :'richeditor',
* enableFace:false,
* enableUpload: true,
* name:'demo'
* }],
* renderTo:Ext.getBody()
* });
*
*
*/

Ext.form.RichEditor = Ext.extend(Ext.form.HtmlEditor, {
enableFace: false,
hideTools: false,
enableUpload: false,
constructor: function (cfg) {
Ext.apply(this, cfg);
this.currentPath = this.uploadFolder;
var splt = this.abyPath.substring(this.abyPath.length - 1);
if (this.abyPath.length > 1 && (splt == "/" || splt == "\\"))
this.abyPath = this.abyPath.substring(0, this.abyPath.length - 1);

this.serverUrl = (this.abyPath || "") + "/aby/aspx/upload.aspx";
Ext.form.RichEditor.superclass.constructor.call(this);
},
setReadOnly: function (readOnly) {
Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly);
if (this.initialized) {
if (Ext.isIE) {
this.getEditorBody().contentEditable = !readOnly;
} else {
this.setDesignMode(!readOnly);
}
var bd = this.getEditorBody();
if (bd) {
bd.style.cursor = this.readOnly ? 'default' : 'text';
}
this.disableItems(readOnly);
this[readOnly ? "hideTool" : "showTool"]();
}
},
createToolbar: function (editor) {
var me = this, items = [], clip = [], font = [], paragraph = [], edit = [], insert = [];
var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();

function btn(id, text, cfg, toggle, handler) {
return Ext.apply({
itemId: id,
text: text,
cls: 'x-richedit-common',
iconCls: 'x-richedit-' + id,
enableToggle: toggle !== false,
scope: editor,
handler: handler || editor.relayBtnCmd,
clickEvent: 'mousedown',
tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
//overflowText: editor.buttonTips[id].title || undefined,
tabIndex: -1
}, cfg);
}

function btngrp(id, text, items, cfg) {
return Ext.apply({
xtype: 'buttongroup',
itemId: id,
title: text,
items: items
}, cfg);
}

clip.push(
btn("paste", "粘贴", { rowspan: 2, scale: 'medium', iconAlign: 'top', cls: 'x-btn-as-arrow' }, false),
btn("cut", "", { width: 25, height: 25 }, false),
btn("copy", "", { width: 25, height: 25 }, false)
);
var fontName = new Ext.form.ComboBox({
xtype: 'combo',
store: new Ext.data.ArrayStore({
data: [["", "字体"], ['宋体', '宋体'], ["黑体", '黑体']],
fields: ["value", 'text']
}),
width: 103,
itemId: 'fontName',
ctCls: 'x-richedit-font-name',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
colspan: 4,
valueField: 'value',
displayField: 'text',
listeners: {
select: function (c, n, o) {
me.getEditorBody().innerHTML = me.getValue().replace(me.currentSelected,
"<span style='font-family:"+c.getValue()+";'>"+me.currentSelected+"</span>");
me.deferFocus();
me.currentSelected="";
},
expand:function(){
me.currentSelected =me.getDoc().selection.createRange().text;
}
}
});
var fontSize = new Ext.form.ComboBox({
xtype: 'combo',
itemId: 'fontSize',
ctCls: 'x-richedit-font-size',
store: new Ext.data.ArrayStore({
data: (function () {
var d = [];
for (var i = 3; i < 100; i++) {
d.push([i + "px", i + "px"])
}
return d;
})(),
fields: ["value", 'text']
}),
width: 63,
colspan: 2,
typeAhead: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
listeners: {
select: function (c, n, o) {
me.getEditorBody().innerHTML = me.getValue().replace(me.currentSelected,
"<span style='font-size:"+c.getValue()+";'>"+me.currentSelected+"</span>");
//me.execCmd('FontSize', c.getValue());
me.deferFocus();
me.currentSelected="";
},
expand:function(){
me.currentSelected =me.getDoc().selection.createRange().text;
}
}
});
var h = new Ext.form.ComboBox({
xtype: 'combo',
itemId: 'h',
ctCls: 'x-richedit-font-size',
store: new Ext.data.ArrayStore({
data: (function () {
var d = [];
for (var i = 1; i < 6; i++) {
d.push(["H" + i, "H" + i])
}
return d;
})(),
fields: ["value", 'text']
}),
width: 60,
colspan: 2,
typeAhead: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
listeners: {
select: function (c, n, o) {
me.getEditorBody().innerHTML = me.getValue().replace(me.currentSelected,
"<"+c.getValue()+">"+me.currentSelected+"</"+c.getValue()+">");
me.deferFocus();
me.currentSelected="";
},
expand:function(){
me.currentSelected =me.getDoc().selection.createRange().text;
}
}
});
font.push(
fontName, fontSize, h,
btn('bold', '', {}, true),
btn('italic', '', {}, true),
btn('underline', '', {}, true),
btn('strikethrough', '', {}, true),
{
itemId: 'forecolor',
cls: 'x-btn-icon',
iconCls: 'x-edit-forecolor',
clickEvent: 'mousedown',
tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
tabIndex: -1,
menu: new Ext.menu.ColorMenu({
allowReselect: true,
focus: Ext.emptyFn,
value: '000000',
plain: true,
listeners: {
scope: this,
select: function (cp, color) {
this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#' + color : color);
this.deferFocus();
}
},
clickEvent: 'mousedown'
})
},
{
itemId: 'backcolor',
cls: 'x-btn-icon',
iconCls: 'x-edit-backcolor',
clickEvent: 'mousedown',
tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
tabIndex: -1,
menu: new Ext.menu.ColorMenu({
focus: Ext.emptyFn,
value: 'FFFFFF',
plain: true,
allowReselect: true,
listeners: {
scope: this,
select: function (cp, color) {
if (Ext.isGecko) {
this.execCmd('useCSS', false);
this.execCmd('hilitecolor', color);
this.execCmd('useCSS', true);
this.deferFocus();
} else {
this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#' + color : color);
this.deferFocus();
}
}
},
clickEvent: 'mousedown'
})
},
btn('subscript', '', {}, true),
btn('superscript', '', {}, true)

);

paragraph.push(
btn('justifyleft', '', { iconCls: 'x-edit-justifyleft' }),
btn('justifycenter', '', { iconCls: 'x-edit-justifycenter' }),
btn('justifyright', '', { iconCls: 'x-edit-justifyright' }),
btn('justifyright', '', { iconCls: 'x-edit-justifyright' }),
btn('justifyfull', '', { iconCls: 'x-richedit-justifyfull' }),
btn('paraformatting', '文章排版', { rowspan: 2, scale: 'medium',
iconAlign: 'top', cls: 'x-btn-as-arrow',
iconCls: 'x-richedit-paraformatting'
},
true, me.paraFormatting),

btn('indent', '', {}, false),
btn('outdent', '', {}, false),
btn('insertorderedlist', '', { iconCls: 'x-edit-insertorderedlist' }),
btn('insertunorderedlist', '', { iconCls: 'x-edit-insertunorderedlist' })


);

var findWin = function (btn) {
var win = new Ext.Window({
codeAt: 0,
title: '查找',
layout: 'fit',
modal: true,
width: 200,
height: 100,
items: [{
xtype: 'form',
frame: true,
labelWidth: 40,
labelAlign: 'right',
defaults: { xtype: 'textfield', allowBlank: false, anchor: '100%' },
items: [{
fieldLabel: '查找',
value: ''
}]
}],
listeners: {
show: function () {
this.html = this.old = me.getValue();
},
close: function () {
me.getEditorBody().innerHTML = this.old;
}
},
buttons: [{
text: '查找',
iconCls: '',
handler: function () {
var txt = win.get(0).get(0).getValue();
if (txt) {
var html = win.html;
var re = new RegExp(txt, "g");
if (html.match(re)) {
me.getEditorBody().innerHTML = html.replace(re, "<font color='blue'><b>" +
txt + "</b></font>");
} else {
Ext.Msg.alert("提示", "没有找到!");
}
}
}
}]
});
win.show();
};
var replaceWin = function (btn) {
var win = new Ext.Window({
codeAt: 0,
title: '替换',
layout: 'fit',
modal: true,
width: 200,
height: 150,
items: [{
xtype: 'form',
frame: true,
labelWidth: 40,
labelAlign: 'right',
defaults: { xtype: 'textfield', allowBlank: false, anchor: '100%' },
items: [{
fieldLabel: '查找',
value: ''
}, {
fieldLabel: '替换为',
value: ''
}]
}],
buttons: [{
text: '替换',
iconCls: '',
handler: function () {
var txt = win.get(0).get(0).getValue();
var rp = win.get(0).get(1).getValue();
if (txt) {
var html = me.getValue();
var re = new RegExp(txt, "g");
me.getEditorBody().innerHTML = html.replace(re, rp);
}
}
}]
});
win.show();

function demoReplaceClick() {
var re = new RegExp(document.demoMatch.regex.value, "g");
document.demoMatch.result.value =
document.demoMatch.subject.value.replace(re,
document.demoMatch.replacement.value);
}
};
edit.push(
btn('undo', '', {}, false),
btn('redo', '', {}, false),
btn('selectall', '', {}, false),
btn('delete', '', {}, false),
btn('removeformat', '', {}, false),
btn('print', '', {}, false),
btn('find', '', {}, false, findWin),
btn('replace', '', {}, false, replaceWin),
btn('saveas', '', {}, false),
btn('sourceedit', '', { iconCls: 'x-edit-sourceedit' }, true, function (btn) {
me.toggleSourceEdit.call(me, !me.sourceEditMode);
})
);

var createLink = function (el) {
var win = new Ext.Window({
title: '创建链接',
layout: 'fit',
modal: true,
width: 300,
height: 150,
items: [{
xtype: 'form',
frame: true,
labelWidth: 60,
labelAlign: 'right',
defaults: { xtype: 'textfield', allowBlank: false, anchor: '100%' },
items: [{
fieldLabel: '显示方式',
xtype: 'combo',
store: new Ext.data.ArrayStore({
data: [['_blank', '弹出新窗口'], ["_self", '本窗口']],
fields: ["value", 'text']
}),
typeAhead: true,
editable: false,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text'
}, {
fieldLabel: '链接文本',
value: ''
}, {
fieldLabel: '链接地址',
vtype: 'email',
value: me.defaultLinkValue
}]
}],
buttons: [{
text: '插入',
iconCls: '',
handler: function () {
var os = win.get(0).get(0).getValue() || "_blank";
var text = win.get(0).get(1).getValue();
var url = win.get(0).get(2).getValue();
if (url && text && url != 'http:/' + '/') {
me.insertAny(String.format("<a href='{0}' target='{1}' title='{2}'>{2}</a>",
url, os, text));
win.close();
}
}

}]
});
win.show();
};
var createTable = function (el) {
var win = new Ext.Window({
title: '创建表格',
layout: 'column',
layoutCfg: { columns: 2, columnWidth: 0.49 },
modal: true,
width: 300,
height: 185,
defaults: {
xtype: 'form',
labelWidth: 35,
labelAlign: 'right',
defaults: {
xtype: 'numberfield',
value: 0, allowBlank: false,
width: 100
},
border: false,
bodyStyle: "padding-top:8px;background:#dfe8f6"
},
items: [{
items: [{
fieldLabel: '行',
value: 2
}, {
fieldLabel: '宽度'
}, {
fieldLabel: '边框'
}, {
fieldLabel: '间距'
}]
}, {
items: [{
fieldLabel: '列',
value: 2
}, {
fieldLabel: '高度'
}, {
fieldLabel: '对齐',
xtype: 'combo',
store: new Ext.data.ArrayStore({
data: [['', '没设置'], ["left", '左对齐'], ["center", '居中'], ["right", '右对齐']],
fields: ["value", 'text']
}),
typeAhead: true,
editable: false,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text'
}, {
fieldLabel: '边距'
}]
}],
buttons: [{
text: '插入',
iconCls: '',
handler: function () {
var lf = win.get(0), rf = win.get(1);
var rows = lf.get(0).getValue(), cols = rf.get(0).getValue(),
h = rf.get(1).getValue(), w = lf.get(1).getValue(),
border = lf.get(2).getValue(), align = rf.get(2).getValue(),
celsp = lf.get(3).getValue(), celpad = rf.get(3).getValue();
var table = "<table " + (h ? "height='" + h + "px' " : "") +
(w ? "width='" + w + "px' " : "") + (align ? "align=" + align+" " : "") +
(border ? "border='" + border + "px solid' " : "") +
(celsp ? "cellspacing='" + celsp + "px' " : "") + (celpad ? "cellpadding='" + celpad+"' " : "") + ">";
for (var i = 0; i < rows; i++) {
table = table + "<tr>";
for (var c = 0; c < cols; c++) {
table = table + "<td>&nbsp;</td>";
}
table = table + "</tr>";
}
table = table + "</table>";
me.insertAny(table);
win.close();
}
}]
});
win.show();
}
insert.push(
btn('createlink', '', { iconCls: 'x-edit-createlink' }, false, createLink),
btn("face", '', { iconCls: 'aby-htmleditor-face' }, false, this.showFace),
btn('upload', '', { iconCls: 'aby-htmleditor-upload' }, false, this.upload),
btn('browerfile', '', { iconCls: 'aby-htmleditor-browerfile' }, false, this.browerFile),

btn('table', '', {}, false, createTable)
);
items.push(
btngrp("clip", "剪贴板", clip, { columns: 2 }),
btngrp("font", "字 体", font, { columns: 8, height: 76 }),
btngrp("paragraph", "段 落", paragraph, { columns: 5, height: 76 }),
btngrp("edit", "编 辑", edit, { columns: 5, height: 76 }),
btngrp("insert", "插 入", insert, { columns: 5, height: 76 })
);
// build the toolbar
var tb = new Ext.Toolbar({
renderTo: this.wrap.dom.firstChild,
items: items
});

// stop form submits
this.mon(tb.el, 'click', function (e) {
e.preventDefault();
});
this.tb = tb;
this.tb.doLayout();
},
insertAny: function (text) {
if (this.activated) {
this.insertAtCursor(text);
} else {
this.getEditorBody().innerHTML = text;
}
},
showTool: function () {
this.wrap.dom.firstChild.style.display = 'block';
},
hideTool: function () {
this.wrap.dom.firstChild.style.display = 'none';
},
paraFormatting: function () {
var oBody = this.getEditorBody();
var oChild = oBody.childNodes;
for (var i = 0; i < oChild.length; i++) {
if (oChild[i].tagName) {

// 去掉首尾空格
oChild[i].innerHTML = oChild[i].innerHTML.split('&nbsp;').join('');
oChild[i].innerHTML = oChild[i].innerHTML.replace(/(^[ | |]*)|([ | |]*$)/g, "");
oChild[i].innerHTML = oChild[i].innerHTML.split('').join('&nbsp;');

// 是否已经排过版,使用 2em 会使段落排版混乱[h1,h2混],可设计默认 28 像素。通过计算子节点 fontSize 方式同样有此问题
if (!oChild[i].style.textIndent) {
oChild[i].style.textIndent = '2em';
// 默认排版前
} else {
oChild[i].style.textIndent = '';
}
// 纯文本
} else {
oBody.innerHTML = '<div style="text-indent:2em;">' + oBody.innerHTML.replace(/(^[ | ]*)|([ | ]*$)/g, ""); +'</div>';
}
}
},
showFace: function (el) {
var me = this;
var win = this.faceWin;
var selectFace = function (el) {
var tpl = (me.abyPath || "") + "/aby/resources/images/face/{0}.gif";
var text = String.format("<img src='{0}' />",
String.format(tpl, el.getAttribute("imgIndex")));
if (me.activated) {
me.insertAtCursor(text);
} else {
me.getEditorBody().innerHTML = text;
}
me.faceWin.hide()
};
if (!win) {
var items = [];
for (var i = 0; i < 105; i++) {
items.push({
autoEl: {
tag: 'a',
href: '##',
imgIndex: i,
cls: 'aby-htmleditor-facebg',
style: "background-position:-" + (((i % 15) * 29)) + "px -" + (parseInt(i / 15) * 29) + "px;"
}
});
}
win = new Ext.QuickTip({
autoHide: false,
target: el.getEl(),
width: 465,
anchor: 'top',
closable: true,
cls: 'aby-htmleditor-fasespace',
defaults: {
xtype: 'box'
},
layout: 'column',
items: [items]
});
this.faceWin = win;
}
win.show();
var md = function (e, dom, cfg) {
if (dom.getAttribute("imgIndex"))
selectFace(dom);
else
e.stopPropagation();
win.getEl().un('mousedown', md);
};
win.getEl().on('mousedown', md);
},
browerFile: function (el) {
var me = this;
var win = this.browerFileWin;
if (!win) {
var queryForm = new Ext.form.FormPanel({
region: 'north',
height: 40,
labelWidth: 50,
labelAlign: 'right',
bodyStyle: "padding-top:8px;background:#dfe8f6",
items: [{
fieldLabel: '文件名',
xtype: 'textfield',
anchor: '99%',
name: 'filename',
enableKeyEvents: true,
listeners: {
keyup: function (txt, e) {
try {
files.getStore().filter("fileName", new RegExp(txt.getValue()),
true, false);
} catch (e) { }
}
}
}]
});
var folder = new Ext.tree.TreePanel({
region: 'west',
title: '文件夹',
headerStyle: "border-top:0px;",
width: 120,
root: {
nodeType: 'async',
text: me.uploadFolder,
draggable: false,
id: me.uploadFolder,
expanded: true
},
loader: new Ext.tree.TreeLoader({
dataUrl: me.serverUrl,
baseParams:
{
methodname: 'GetFolder'
},
requestMethod: "POST",
listeners:
{
"beforeload": function (treeLoader, node) {
this.baseParams.path = node.getPath("text");
}
}
}),
listeners: {
click: function (node, e) {
me.currentPath = node.getPath("text");
files.getStore().load({ params: { path: me.currentPath} })
}
}
});
var sm = new Ext.grid.RowSelectionModel({ singleSelect: true });
var files = new Ext.grid.GridPanel({
region: 'center',
autoExpandColumn: 'bffilename',
bodyStyle: "border-top:0px;border-left:0;",
sm: sm,
columns: [new Ext.grid.RowNumberer(), {
dataIndex: 'fileName',
header: '文件名',
autoExpandMin: 100,
id: 'bffilename'
}, {
dataIndex: 'fileType',
header: '文件类型',
width: 100
}, {
dataIndex: 'date',
header: '修改日期',
width: 150
}],
store: new Ext.data.JsonStore({
url: me.serverUrl,
baseParams: {
methodname: 'GetFileByFolder',
path: me.uploadFolder
},
autolLoad: true,
fields: ["fileName", "fileType", "date"]
}),
listeners: {
rowcontextmenu: function (g, ri, e) {
var fileName = (files.getStore().getAt(ri) || {}).get("fileName");
if (fileName) {
var o = {
fileName: me.currentPath + "/" + fileName,
type: me.getFileType((files.getStore().getAt(ri) || {}).get("fileType"))
}
win.hide();
me.insertValue.call(me, o);
e.preventDefault();
}
},
rowclick: function (g, ri, e) {
try {
var fileName = (files.getSelectionModel().getSelected() || {}).get("fileName");
if (fileName)
new Ext.QuickTip({
target: "",
autoHide: true,
border: false,
trackMouse: true,
html: String.format("<img src='{0}' width=200 />", me.currentPath + "/" + fileName)
}).showAt(e.getXY());
} catch (e) { }
}
}
});

var fileList = new Ext.Panel({
layout: 'border',
region: 'center',
border: false,
items: [folder, files]
});

win = new Ext.Window({
width: 650,
height: 450,
modal: true,
iconCls: el.iconCls,
closeAction: 'hide',
title: '浏览文件',
layout: 'border',
border: false,
items: [queryForm, fileList],
buttons: [{
text: '关闭',
iconCls: 'aby-icon-close',
handler: function () { win.hide(); }
}]
});
this.browerFileWin = win;
}
win.show();
},
getFileType: function (ext) {
switch (ext.toLowerCase()) {
case ".gif":
case ".jpg":
case ".jpeg":
case ".pne":
case ".ico":
return "images";
case "swf":
return "flash";
case ".flv":
case ".mp3":
case ".mp4":
case ".aiv":
case ".rmvb":
case ".wmp":
return "media";
default:
return "any";
}
},
upload: function (el) {
try {
var me = this;
var win = this.uploadWin;
if (!win) {
var item = new Ext.form.FormPanel({
labelWidth: 50,
border: false,
fileUpload: true,
labelAlign: 'right',
items: [{
fieldLabel: '文 件',
name: 'htmleditorFile',
xtype: 'filefield',
buttonText: '浏览',
width: 250,
focusUpload: true,
listeners: {
fileselected: function (el) {
item.form.submit({
url: me.serverUrl,
params: {
methodname: 'Upload',
baseFolder: me.uploadFolder
},
success: me.onUploadCb,
scope: me
});
me.onUpload.call(me, el);
}
}
}]
});
win = new Ext.QuickTip({
autoHide: false,
target: el.getEl(),
width: 350,
anchor: 'top',
form: item,
closable: true,
cls: 'aby-htmleditor-upload',
layout: 'fit',
items: [item]
});
this.uploadWin = win;
} else
win.form.form.reset();
win.show()
} catch (e) {
Ext.Msg.alert("错误", "请导入FileField(文件上传)控件!");
}
},
insertValue: function (o) {
var text;
if (o.type == "flash") {
text = String.format("<a upload=true href='{0}' >{0}</a>", o.fileName);
} else if (o.type == "images") {
text = String.format("<img upload=true src='{0}' />", o.fileName);
} else {
text = String.format("<a upload=true href='{0}' >{0}</a>", o.fileName);
}
this.insertAny(text);
},
onUploadCb: function (re, op) {
var o = op.result, me = this;
if (o) {
me.insertValue(o);
} else {
Ext.Msg.alert("错误", "发送了异常!");
}
},
onUpload: function (el) {
this.uploadWin.hide();
},
updateToolbar: function () {

if (this.readOnly) {
return;
}

if (!this.activated) {
this.onFirstFocus();
return;
}
var btngrps = this.tb.items.items, btns = [], doc = this.getDoc();
for (var i = 0, l = btngrps.length; i < l; i++) {
Ext.apply(btns, btngrps[i].items.map);
}

if (this.enableFont && !Ext.isSafari2) {
var name = (doc.queryCommandValue('FontName') || this.defaultFont).toLowerCase();
// if(name != this.fontSelect.dom.value){
// this.fontSelect.dom.value = name;
// }
}
if (this.enableFormat) {
btns.bold.toggle(doc.queryCommandState('bold'));
btns.italic.toggle(doc.queryCommandState('italic'));
btns.underline.toggle(doc.queryCommandState('underline'));
}
if (this.enableAlignments) {
btns.justifyleft.toggle(doc.queryCommandState('justifyleft'));
btns.justifycenter.toggle(doc.queryCommandState('justifycenter'));
btns.justifyright.toggle(doc.queryCommandState('justifyright'));
}
if (!Ext.isSafari2 && this.enableLists) {
btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
}

Ext.menu.MenuMgr.hideAll();

this.syncValue();
},
disableItems: function (disabled) {
if (this.fontSelect) {
this.fontSelect.dom.disabled = disabled;
}
this.tb.items.each(function (item) {
item.items.each(function (it) {
if (it.getItemId() != 'sourceedit') {
it.setDisabled(disabled);
}
})
});
},
toggleSourceEdit: function (sourceEditMode) {
var iframeHeight,
elHeight,
ls;
if (sourceEditMode === undefined) {
sourceEditMode = !this.sourceEditMode;
}
this.sourceEditMode = sourceEditMode === true;
//var btn = this.tb.items.map.edit.getComponent('sourceedit');
var btn = this.tb.items.map.edit.items.map.sourceedit;
if (btn.pressed !== this.sourceEditMode) {
btn.toggle(this.sourceEditMode);
if (!btn.xtbHidden) {
return;
}
}
if (this.sourceEditMode) {

ls = this.getSize();

iframeHeight = Ext.get(this.iframe).getHeight();

this.disableItems(true);
this.syncValue();
this.iframe.className = 'x-hidden';
this.el.removeClass('x-hidden');
this.el.dom.removeAttribute('tabIndex');
this.el.focus();
this.el.dom.style.height = iframeHeight + 'px';
}
else {
elHeight = parseInt(this.el.dom.style.height, 10);
if (this.initialized) {
this.disableItems(this.readOnly);
}
this.pushValue();
this.iframe.className = '';
this.el.addClass('x-hidden');
this.el.dom.setAttribute('tabIndex', -1);
this.deferFocus();

this.setSize(ls);
this.iframe.style.height = elHeight + 'px';
}
this.fireEvent('editmodechange', this, this.sourceEditMode);
}
});

Ext.reg("richeditor", Ext.form.RichEditor);


其效果图如下:
http://hi.csdn.net/attachment/201102/21/164257_129826736691ws.jpg

moegal
21 Feb 2011, 12:24 PM
what is richeditor? Looks interesting

kostik83
23 Feb 2011, 1:47 PM
I think we need a little more code for it to work

wmwdg
24 Mar 2011, 12:19 AM
支持下啦~=D>

joeman
24 Mar 2011, 12:36 AM
How to show this component in Ext JS Designer?怎样放到designer里面玩啊?

wmwdg
24 Mar 2011, 8:59 PM
How to show this component in Ext JS Designer?怎样放到designer里面玩啊?
把designer里面的htmleditor换成这个~

lxfliu
24 Mar 2011, 10:00 PM
呵呵! 不错, 不错!

大漠穷秋
9 Apr 2011, 6:53 AM
使用KindEditor的淡淡飘过,不过还是顶一下。

qiu768
21 Apr 2011, 1:21 AM
哈哈,太搞笑了,居然跑上国外网站用中文发言!!

anya
5 May 2011, 1:32 AM
是人家主动叫你弄母语的, 大哥

wmzsl
17 May 2011, 1:51 AM
支持中国人一下,不过哥们你扩展的需要再细化一下,在加一些特性

enotsl
23 May 2011, 8:18 PM
他乡于故知!

cavenfeng
5 Jul 2011, 12:11 AM
it's Interested

faylai@gmail.com
1 Aug 2013, 7:19 PM
不错,顶一下哈哈:))