8

ExtJS を使用しており、フォームに htmleditor があります。その要素にカスタムボタンを追加したいと思います（たとえば、配置、フォントの太さなどの他のすべてのボタンの後）。このボタンは、基本的に標準テンプレートを htmlfield に挿入する必要があります。このテンプレート html であるため、ボタンの動作は次のようになります。

  • HTML モードに切り替えます (ソース ボタンを押したときなど)。
  • 何かを挿入する
  • WYSIWYG モードに戻ります (ソース ボタンをもう一度押したときなど)。

ご清聴ありがとうございました

4

3 に答える 3

12

HTML モードに切り替える必要はありません。insertAtCursorHTML テンプレートで関数を使用するだけです。

<hr>水平定規（タグ）を挿入するボタンを追加する方法のこの簡単な例を作成しました：

Ext.ns('Ext.ux.form.HtmlEditor');

Ext.ux.form.HtmlEditor.HR = Ext.extend(Ext.util.Observable, {
    init: function(cmp){
        this.cmp = cmp;
        this.cmp.on('render', this.onRender, this);
    },
    onRender: function(){
        this.cmp.getToolbar().addButton([{
            iconCls: 'x-edit-bold', //your iconCls here
            handler: function(){
                this.cmp.insertAtCursor('<hr>');
            },
            scope: this,
            tooltip: 'horizontal ruler',
            overflowText: 'horizontal ruler'
        }]);
    }
});
Ext.preg('ux-htmleditor-hr', Ext.ux.form.HtmlEditor.HR);

Ext.QuickTips.init();
new Ext.Viewport({
    layout: 'fit',
    items: [{
        xtype: 'htmleditor',
        plugins: [new Ext.ux.form.HtmlEditor.HR()]
    }]
});

jsfiddle.net/protron/DCGRg/183/で実行されていることがわかります。

しかし、HtmlEditor.Plugins (またはExtJS 4 の場合は ateodorescu/mzExt ) を確認することを強くお勧めします。そこでは、カスタム ボタンの追加について、たとえば、何かが選択されたときにボタンを有効/無効にする方法、セパレーターを配置する方法など、さらに多くの情報を見つけることができます。

于 2010-10-13T00:25:14.237 に答える
1

ExtJS.ux.HtmlEditor.Plugins も使用できます: https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins

ここに画像の説明を入力

于 2013-01-10T08:11:16.437 に答える