[ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

ExJS所提示的HtmlEditor非常簡單,一般來說算夠用了,不過還是有很多狀況無法適用,所幸ExtJS可利用擴充的方式來使用其它的WYSIWYG編輯器,TinyMCE是個很好的選擇,FCKEditor也不錯,現在重新被制作改名成CKEditor,以下的範例是使用CKEditor來砍進ExJS當成它的HtmlEditor。

CKEditor.png

範例是由這個網址取得的

http://www.sencha.com/forum/showthread.php?79031-CKEditor-Extension

/****************************************************
* CKEditor Extension
*****************************************************/
Ext.form.CKEditor = function(config){
this.config = config;
Ext.form.CKEditor.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.CKEditor, Ext.form.TextArea,  {
onRender : function(ct, position){
if(!this.el){
this.defaultAutoCreate = {
tag: "textarea",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
CKEDITOR.replace(this.id, this.config.CKConfig);
},
setValue : function(value){
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
CKEDITOR.instances[this.id].setData( value );
},
getValue : function(){
CKEDITOR.instances[this.id].updateElement();
return Ext.form.TextArea.superclass.getValue(this);
},
getRawValue : function(){
CKEDITOR.instances[this.id].updateElement();    
return Ext.form.TextArea.superclass.getRawValue(this);
}
});
Ext.reg('ckeditor', Ext.form.CKEditor);

example實作的方式

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
//Ext.QuickTips.init();
// turn on validation errors beside the field globally
//Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
var Form = new Ext.FormPanel({
id: 'Myorm',
frame: true,
labelAlign: 'top',
title: 'CKEditor in ExtJS',
bodyStyle:'padding:5px',
url:"getHtml.jsp",
width: 750,
layout: 'form',    // Specifies that the items will now be arranged in columns
items: [{
//columnWidth: 1,
xtype: 'fieldset',
labelWidth: 90,
title:'CKEditor',
defaults: {width: 700, border:false},    // Default config options for child items
defaultType: 'textfield',
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
},
items: [{
xtype: 'ckeditor',
fieldLabel: 'Editor',
name: 'htmlcode',
id:'htmlcode',
CKConfig: {
/* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
customConfig : 'config.js', // This allows you to define the path to a custom CKEditor config file.
//toolbar: 'Full',
toolbar:[['Source'/*,'-','Save','NewPage','Preview','-','Templates'*/],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
/*['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],*/
['BidiLtr', 'BidiRtl'],['Link','Unlink','Anchor'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-'/*,'About'*/]
],
skin : 'office2003',
height : 200//,
//width: 700
}
}]
}],buttons:[{
text:'Save',
name:'Save',
handler:function()
{
//alert(123);
Form.getForm().submit();
}//.createDelegate(Form.getForm())
}],
renderTo: bd
});
});

其中要開啟CKEditor的功能可以從toolbar這個參數裡設定toolbar:’Full’是全部啟用,toolbar:’Basic’是只有簡單功能,跟內建的ExtJS HtmlEditor有點像,以下是全部的項目,可以選擇要放置的位置及啟用的功能

toolbar:[['Source'/*,'-','Save','NewPage','Preview','-','Templates'*/],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
/*['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],*/
['BidiLtr', 'BidiRtl'],['Link','Unlink','Anchor'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-'/*,'About'*/]
],

html的部份

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CKEditor</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css"/>
<script type="text/javascript" src="js/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="js/ext-all.js"></script>
<!-- Load CKEditor Library -->
<script type="text/javascript" src="js/ckeditor.js"></script>
<!-- Load EXTJS CKEditor Extension -->
<script type="text/javascript" src="js/ckeditor1.js"></script>
<!-- Load Example Code -->
<script type="text/javascript" src="js/example.js"></script>
<style type="text/css">
body {
padding: 20px;
}
p {
width: 750px;
padding: 10px;
}
.ext-ie .x-form-check-wrap, .ext-gecko .x-form-check-wrap {
padding-top: 3px;
}
fieldset legend {
white-space: nowrap;
}
</style>
</head>
<body>
</body>
</html>

原始碼下載及附件下載

下一篇會再加Servlet上傳檔案、圖檔及Flash功能的實作

JSP上傳檔案、圖檔及Flash功能的實作

PHP上傳檔案、圖檔及Flash功能的實作

補充內容:Fix form.getForm().getFieldValues(false);取不到值的bug

/*******************************************************************************
* CKEditor Extension
******************************************************************************/
Ext.form.CKEditor = function(config) {
this.config = config;
Ext.form.CKEditor.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, {
hideLabel : true,
constructor : function(config) {
config = config || {};
config.listeners = config.listeners || {};
Ext.applyIf(config.listeners, {
beforedestroy : this.onBeforeDestroy
.createDelegate(this),
scope : this
});
Ext.form.CKEditor.superclass.constructor.call(this, config);
},
onBeforeDestroy : function() {
this.ckEditor.destroy();
},
onRender : function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag : "textarea",
autocomplete : "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
this.ckEditor = CKEDITOR.replace(this.id, this.config.CKConfig);
},
setValue : function(value) {
Ext.form.TextArea.superclass.setValue.apply(this, [value]);
CKEDITOR.instances[this.id].setData(value);
},
getValue : function() {
CKEDITOR.instances[this.id].updateElement();
this.value = CKEDITOR.instances[this.id].getData();
return Ext.form.TextArea.superclass.getValue.apply(this);
},
getRawValue : function() {
CKEDITOR.instances[this.id].updateElement();
this.value = CKEDITOR.instances[this.id].getData();
return Ext.form.TextArea.superclass.getRawValue.apply(this);
}
});
Ext.reg('ckeditor', Ext.form.CKEditor);

取值方法

Ext.getCmp("htmlcode").getValue();

One thought to “[ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor”

發表迴響