2

ExtJS 3.2.1を使用していますが、バンドルされているHtmlEditorとほぼ同じコンポーネントが必要ですが、例外が1つあります。HTMLソースコードの編集を直接開始する必要があります。通常のTextAreaを使用しない理由は、ユーザーが送信する前にアクションの結果をプレビューできるようにする必要があるためです。

ExtJSのドキュメントに従ってtoggleSourceEdit（）を呼び出してみましたが、成功しませんでした。デバッグすると、エディターオブジェクトのsourceEditModeプロパティがtrueに設定されており、[ソース編集]ボタンは「押された」ように見えますが、クリックしても入力されたHTMLはレンダリングされず、もう一度クリックするとソースモードになります。 。

コンテナのshow（）メソッドの後で、コンテナのafterLayoutリスナー、およびエディタのafterRenderリスナーでtoggleSourceEdit（）を呼び出してみました。コンテナに追加した別のボタンでも呼び出してみました。結果はすべての試行で同じです。

私が見る他の唯一のオプションはExtJSを3.3.0にアップデートすることですが、変更ログに関連するものは何もないようです。いずれにせよ、それは私の次のステップになるでしょう。編集：アプリの更新時に別の問題が発生しました。後で更新するためにさらに努力します。現在、元の設定でHtmlEditorを使用しています。

ありがとう！

4

4 に答える 4

2

同じ問題に遭遇しました（ちなみに3.3.0を使用）

ばかげた運によって修正につまずいた。なぜこれが機能するのかわかりませんが、2回目は魅力です。2 回続けて呼び出して、目的の効果を達成します。

HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);

それが役立つことを願っています!

于 2010-11-27T00:57:18.560 に答える
0

トグルソースエディット（）を呼び出すのではなく、HtmlEditorオブジェクトの作成中に構成をセットアップしてみてください

于 2010-10-19T10:14:20.660 に答える
0

使用toggleSourceEdit()すると、いくつかの問題が発生しました。1 つは、250 ミリ秒程度のタイムアウトを使用しない限り、エディタがソース編集モードと WYSIWYG モードの間のどこかに置かれているように見えることです。また、そのエディターにフォーカスを置きます。特に、フォームがスクロールせずに見える位置にあり、ブラウザーが開いたときにフォーカスされた html エディターにスクロールするため、エディターでフォームのフォーカスを開始したくありません。

私にとってうまくいった唯一のことは、を拡張Ext.form.HtmlEditorしてから上書きtoggleSourceEditし、フォーカスコマンドを削除することでした。次に、コンポーネントの初期化時にソース エディターに切り替えるためのリスナーを追加します。これは Ext 4.1 以降用です。古いバージョンの場合は、 に置き換えme.updateLayout()ますme.doComponentLayout()。

var Namespace =  {

SourceEditor: Ext.define('Namespace.SourceEditor', {
    extend: 'Ext.form.HtmlEditor',
    alias: 'widget.sourceeditor',
    initComponent: function() {
        this.callParent(arguments);
    },
    toggleSourceEdit: function (sourceEditMode) {
        var me = this,
            iframe = me.iframeEl,
            textarea = me.textareaEl,
            hiddenCls = Ext.baseCSSPrefix + 'hidden',
            btn = me.getToolbar().getComponent('sourceedit');

        if (!Ext.isBoolean(sourceEditMode)) {
            sourceEditMode = !me.sourceEditMode;
        }
        me.sourceEditMode = sourceEditMode;

        if (btn.pressed !== sourceEditMode) {
            btn.toggle(sourceEditMode);
        }
        if (sourceEditMode) {
            me.disableItems(true);
            me.syncValue();
            iframe.addCls(hiddenCls);
            textarea.removeCls(hiddenCls);
            textarea.dom.removeAttribute('tabindex');
            //textarea.focus();
            me.inputEl = textarea;
        } else {
            if (me.initialized) {
                me.disableItems(me.readOnly);
            }
            me.pushValue();
            iframe.removeCls(hiddenCls);
            textarea.addCls(hiddenCls);
            textarea.dom.setAttribute('tabindex', -1);
            me.deferFocus();
            me.inputEl = iframe;
        }
        me.fireEvent('editmodechange', me, sourceEditMode);
        me.updateLayout();
    }
})
}

それを使用するには：

Ext.create('Namespace.SourceEditor', {
  /*regular options*/
  listeners: {
    initialize: function(thisEditor) {
            thisEditor.toggleSourceEdit();
    }
  }
});
于 2015-10-29T22:20:08.403 に答える