extjs를 확장하는 htmleditor 그림 삽입
4447 단어 editor
Ext.namespace('Ext.ux','Ext.ux.plugins');
Ext.ux.plugins.HtmlEditorImageInsert=function(config) {
config=config||{};
Ext.apply(this,config);
this.init=function(htmlEditor) {
this.editor=htmlEditor;
this.editor.on('render',onRender,this);
};
this.imageInsertConfig={
popTitle: config.popTitle||'Image URL',
popMsg: config.popMsg||'Please select the URL of the image you want to insert:',
popWidth: config.popWidth||350,
popValue: config.popValue||''
}
this.imageInsert=function() {
var range;
if(Ext.isIE)
range=this.editor.doc.selection.createRange();
var msg=Ext.MessageBox.show({
title: this.imageInsertConfig.popTitle,
msg: this.imageInsertConfig.popMsg,
width: this.imageInsertConfig.popWidth,
buttons: Ext.MessageBox.OKCANCEL,
prompt: true,
value: this.imageInsertConfig.popValue,
scope: this,
fn: function(btn,text) {
if(btn=='ok') {
if(Ext.isIE)
range.select();
this.editor.relayCmd('insertimage',text);
}
}
});
var win=msg.getDialog()
win.show.defer(200,win)
}
function onRender(){
if( ! Ext.isSafari){
this.editor.tb.add({
itemId : 'htmlEditorImage',
cls : 'x-btn-icon x-edit-insertimage',
enableToggle : false,
scope : this,
handler : function(){
this.imageInsert();
},
clickEvent : 'mousedown',
tooltip : config.buttonTip ||
{
title : ' ',
text : ' ',
cls : 'x-html-editor-tip'
},
tabIndex :- 1
});
}
}
}
페이지
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs2.3/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs2.3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs2.3/ext-all.js"></script>
<script type="text/javascript" src="customer.js" ></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.FormPanel({
renderTo: 'form',
defaultType: 'textfield',
items: [{
xtype:'htmleditor',
fieldLabel:'some label',
width: 650,
height: 350,
plugins: new Ext.ux.plugins.HtmlEditorImageInsert({
popTitle: 'Image url?',
popMsg: 'Please insert an image URL...',
popWidth: 400,
popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'
})
}
]
});
});
</script>
</head>
<body>
<div id="form"></div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
atom으로 indent 시각화편집자 중 하나 인 atom을 사용할 때, 『indent가 가시화할 수 있으면 깨끗한 코드를 쓰는데 도움이 되지 말아라! 라고 생각 그 기능을 구현했습니다. 그 과정을 비망록으로 남깁니다. atom 설치 Atom >...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.