編輯器字段字段Ext.form.field.HtmlEditor

<div id="editorForm" class="w_320">
    <h2>編輯器</h2>
</div>

Ext.onReady(function(){
    //Ext表單
    
    //Ext.form.Basic 基本表單組件二(拾取器字段Picker)
    //開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
    //與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
    //1.提交方式(同步---異步)
    //2.表單驗證(須要手動驗證----配置便可使用)
    //3.表單組件(基本的組件------擴展的功能強大的組件)
    
    //Picker抽象類,具備惟一的觸發按鈕用於在字段下方動態彈出面板
    //拾取器組件如：(1.ComboBox,2.Date,3.Time)
    
    //初始化信息提示功能
    Ext.QuickTips.init();
    
    //2、編輯器字段字段Ext.form.field.HtmlEditor
    var editorForm = Ext.create('Ext.form.Panel',{
        title : 'HTML編輯器',
        width : 630,
        renderTo : 'editorForm',
        frame : true,
        bodyStyle : 'padding:5px',
        items : [{
            name : 'myEditor',
            width :600,
            height : 150,
            xtype : 'htmleditor',
            fieldLabel : 'HTML字段',
            labelWidth : 70,
            lebelSeparator : ': ',
            value : 'ExtJs6登場',
            createLinkText : '建立超連接',//建立連接的提示信息
            defaultLinkValue : 'http://www.',//連接的默認格式
            enableFont : true,//啓用字體選擇按鈕
            enableFormat : true,//啓用粗體、斜體、下劃線按鈕
            enableFontSize : true ,//啓用字體增大縮小按鈕
            enableColors : true,//啓用前景色、背景色選擇按鈕
            enableAlignments : true,//啓用左、中、右對齊按鈕
            enableLinks : true,//啓用建立連接按鈕
            enableLists : true,//啓用列表按鈕
            enableSourceEdit : true,//啓用源代碼編輯按鈕
            fontFamilies : ['微軟雅黑','宋體','隸書','黑體']//字體列表
            /*buttonTips : {//必須同時爲全部要顯示的按鈕提供配置信息，不然編輯器字段會顯示異常
                bold : {
                    title : 'Bold(Ctrl+B)',
                    text : '粗體'
                },
                italic : {
                    title : 'Italic(Ctrl+I)',
                    text : '斜體'
                },
                underline : {
                    title : 'Underline(ctrl+U)',
                    text : '下劃線'
                },
                increasefontsize : {
                    title : 'Grow Text',
                    text : '增大字體'
                },
                decreasefontsize : {
                    title : 'Shrink Text',
                    text : '縮小字體'
                },
                backcolor : {
                    title : 'Text Highlight Color',
                    text : '背景色'
                },
                forecolor : {
                    title : 'Font Color',
                    text : '前景色'
                },
                justifyleft : {
                    title : 'Alingn Text Left',
                    text : '左對齊'
                },
                justifycenter : {
                    title : 'Alingn Text Center',
                    text : '居中'
                },
                justifyright : {
                    title : 'Alingn Text Right',
                    text : '右對齊'
                },
                insertunorderedlist : {
                    title : 'Bullet List',
                    text : '項目符號'
                },
                insertorderedlist : {
                    title : 'Number List',
                    text : '數字編號'
                },
                createlink : {
                    title : 'Hyperlink',
                    text : '超連接'
                },
                sourceedit : {
                    title :'Source Edit',
                    text : '切換源代碼編輯模式'
                }
            }*/
        }],
        buttons : [{text : '肯定',handler : getHtmlEditorValue}]
    });
    
    //回調函數
    function getHtmlEditorValue(){
        console.info(editorForm.getForm().getValues());
    }
    
});