EXT HTMLEDITOR
17495 단어 editor
.icon-hr{
background: url(../images/icons/htm.gif) left top no-repeat !important;
}JS:
이름을 원하는 JS 파일을 만듭니다.
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
codeStyle : '<br/><pre style="border-right: #999999 1px dotted; padding-right: 5px; border-top: #999999 1px dotted; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin-left: 10px; border-left: #999999 1px dotted; margin-right: 10px; padding-top: 5px; border-bottom: #999999 1px dotted; background-color: #eeeeee">{0}</pre><br/>',
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : ' ',
name : 'userfile',
id : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : ' ',
height : 25,
anchor : '98%'
}],
buttons : [{
text : ' ',
type : 'submit',
handler : function() {
var furl = "";
furl = imgform.form.findField('userfile').getValue();
var type = furl.substring(furl.length - 3).toLowerCase();
var filename = furl.substring(furl.lastIndexOf("\\") + 1);
if (furl == "" || furl == null) {
return;
}
if (type != 'jpg' && type != 'bmp' && type != 'gif' && type != 'png') {
alert(' jpg、bmp、gif、png ');
return;
}
imgform.form.submit({
url : '/UploadServlet',
waitMsg : ' ......',
waitTitle : ' ',
method : 'POST',
success : function(form, action) {
var element = document.createElement("img");
element.src = "../file/" + action.result.obj.attachUrl;
element.style.width = "300px";
element.style.height = "200px";
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
win.close();
},
failure : function(form, action) {
imgform.reset();
if (action.result.msg == 1) {
Ext.Msg.alert(' ', ' JPG、GIF、PNG、BMP');
} else if (action.result.msg == 2) {
Ext.Msg.alert(' ', ' 10M');
} else {
Ext.Msg.alert(' ', ' .');
}
}
});
}
}, {
text : ' ',
type : 'submit',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : " ",
id : 'picwin',
width : 400,
height : 120,
modal : true,
border : false,
iconCls : 'icon-uploadpic',
layout : "fit",
items : imgform
});
win.show();
},//
addFile : function() {
var editor = this;
var fileform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : ' ',
name : 'userfile_F',
id : 'userfile_F',
inputType : 'file',
allowBlank : false,
blankText : ' ',
height : 25,
anchor : '98%'
}],
buttons : [{
text : ' ',
type : 'submit',
handler : function() {
var furl = "";//
var fname = "";//
furl = fileform.form.findField('userfile_F').getValue();
var type = furl.substring(furl.length - 3).toLowerCase();
if (furl == "" || furl == null) {
return;
}
if (type != 'doc' && type != 'xls') {
alert(' doc、xls !');
return;
}
fname = furl.substring(furl.lastIndexOf("\\") + 1);
fileform.form.submit({
url : '/UploadServlet',
waitMsg : ' ......',
waitTitle : ' ',
method : 'POST',
success : function(form, action) {
var element = document.createElement("a");
element.href = "../file/" + action.result.obj.attachUrl;
element.target = '_blank';
element.innerHTML = fname;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
winFile.close();
},
failure : function() {
fileform.reset();
if (action.result.msg == 1) {
Ext.Msg.alert(' ', ' DOC、XLS');
} else if (action.result.msg == 2) {
Ext.Msg.alert(' ', ' 10M');
} else {
Ext.Msg.alert(' ', ' .');
}
}
});
}
}, {
text : ' ',
type : 'submit',
handler : function() {
winFile.close(this);
}
}]
})
var winFile = new Ext.Window({
title : " ",
id : 'picwin',
width : 400,
height : 120,
modal : true,
border : false,
layout : "fit",
iconCls : 'icon-uploadfile',
items : fileform
});
winFile.show();
},//
addflash : function() {
var editor = this;
var flashform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
items : [{
xtype : 'textfield',
fieldLabel : 'flash ',
name : 'userflash',
id : 'userflash',
allowBlank : false,
blankText : 'http://',
emptyText : 'http://',
height : 25,
anchor : '98%'
}],
buttons : [{
text : ' ',
type : 'submit',
handler : function() {
var furl = "";//
furl = flashform.form.findField('userflash').getValue();
var type = furl.substring(furl.length - 3).toLowerCase();
if (furl == "" || furl == null) {
return;
}
if (type != 'swf' && type != 'flv') {
alert(' ， ！');
return;
}
var element = document.createElement("embed");
element.src = furl;
element.type = "application/x-shockwave-flash";
element.quality = "high";
element.style.width = "300px";
element.style.height = "200px";
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
winflash.close();
}
}, {
text : ' ',
type : 'submit',
handler : function() {
winflash.close(this);
}
}]
})
var winflash = new Ext.Window({
title : " flash",
id : 'flashwin',
width : 400,
height : 120,
modal : true,
border : false,
layout : "fit",
iconCls : 'icon-swf',
items : flashform
});
winflash.show();
},// flash
addfilm : function() {
var editor = this;
var filmform = new Ext.FormPanel({
region : 'center',
labelWidth : 70,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
items : [{
xtype : 'textfield',
fieldLabel : ' ',
name : 'userfilm',
id : 'userfilm',
allowBlank : false,
blankText : 'http://',
emptyText : 'http://',
height : 25,
anchor : '98%'
}],
buttons : [{
text : ' ',
type : 'submit',
handler : function() {
var furl = "";//
var regImg = new RegExp(/\.(mp3|wav|wma|wmv|avi|mpg|asf|rm|rmvb)$/);
var regrm = new RegExp(/\.(rm|rmvb)$/);
furl = filmform.form.findField('userfilm').getValue();
// var
// type=furl.substring(furl.length-3).toLowerCase();
if (furl == "" || furl == null) {
return;
}
if (!furl.match(regImg)) {
alert(' ， ！ ：mp3,wav,wma,wmv,avi,mpg,asf,rm,rmvb');
return;
}
var element = document.createElement("embed");
element.src = furl;
element.style.width = "300px";
element.style.height = "200px";
if (furl.match(regrm))
element.type = "audio/x-pn-realaudio-plugin";
else
element.type = "video/x-ms-asf-plugin";
element.loop = "true";
element.autostart = "true";
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
winfilm.close();
}
}, {
text : ' ',
type : 'submit',
handler : function() {
winfilm.close(this);
}
}]
})
var winfilm = new Ext.Window({
title : " ",
id : 'filmwin',
width : 410,
height : 120,
modal : true,
border : false,
layout : "fit",
iconCls : 'icon-film',
items : filmform
});
winfilm.show();
},//
addCode : function() {
var editor = this;
function insertCode() {
var value = wincode.getComponent("codes").getValue();
// if (Ext.isIE) {
// editor.insertAtCursor(element.outerHTML);
// } else {
// var selection = editor.win.getSelection();
// if (!selection.isCollapsed) {
// selection.deleteFromDocument();
// }
// selection.getRangeAt(0).insertNode(element);
// }
editor.insertAtCursor(String.format(this.codeStyle, value));
wincode.close();
};
var wincode = new Ext.Window({
title : " ",
width : 500,
height : 300,
modal : true,
iconCls : "icon-code",
layout : "fit",
items : {
xtype : "textarea",
id : "codes"
},
buttons : [{
text : " ",
handler : insertCode,
scope : this
}, {
text : " ",
handler : function() {
wincode.close();
}
}]
});
wincode.show();
}, //
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
iconCls : "icon-uploadpic",
handler : this.addImage,
tooltip : " ",
scope : this
});
this.tb.insertButton(17, {
cls : "x-btn-icon",
iconCls : 'icon-uploadfile',
handler : this.addFile,
tooltip : " ",
scope : this
});
this.tb.insertButton(18, {
cls : "x-btn-icon",
iconCls : 'icon-swf',
handler : this.addflash,
tooltip : " flash ",
scope : this
});
this.tb.insertButton(19, {
cls : "x-btn-icon",
iconCls : 'icon-film',
handler : this.addfilm,
tooltip : " ",
scope : this
});
this.tb.insertButton(20, {// ， div
cls : "x-btn-icon",
iconCls : 'icon-div',
handler : function() {
var element = document.createElement("div");
element.id = "InsertDiv";
element.style.backgroundColor = "#FAFAFB";
element.style.borderWidth = "1px";
element.style.borderStyle = "solid";
element.style.borderColor = "#AECBE7";
element.innerHTML = " ：<BR>";
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
},
tooltip : " div ",
scope : this
});
this.tb.insertButton(21, { //
cls : "x-btn-icon",
iconCls : 'icon-hr',
handler : function() {
var element = document.createElement("HR");
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
},
tooltip : " ",
scope : this
});
this.tb.insertButton(22, {
cls : "x-btn-icon",
iconCls : 'icon-code',
handler : this.addCode,
tooltip : " ",
scope : this
});
}
});
Ext.reg('CJ_starthtmleditor', HTMLEditor);EXT 페이지 호출:
{
fieldLabel: ' ',
xtype: 'CJ_starthtmleditor',
name : 'content',
height : 450,
anchor:'98%'
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
atom으로 indent 시각화편집자 중 하나 인 atom을 사용할 때, 『indent가 가시화할 수 있으면 깨끗한 코드를 쓰는데 도움이 되지 말아라! 라고 생각 그 기능을 구현했습니다. 그 과정을 비망록으로 남깁니다. atom 설치 Atom >...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
