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

yku ExtJS, javascript, 程式

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”

  1. 自動引用通知: [ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor-使用Servlet上傳檔案圖片 -最簡單的教學文件筆記

發表迴響