ボタンのJSXファイルの作成

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

ボタンのJSXファイルの作成
- 関連トピック

AlloyEditorのボタンを作成するには、次の手順に従います。

OSGiバンドルの resources \ META-INF\resources \ js フォルダーに .jsx ファイルを作成します。このファイルは、ボタンの構成を定義します。
JSXファイル内で、ボタンに必要なReact変数（React、ReactDOM）を定義します。ログテキストボタンはAlloyEditorのReactのみを使用します。
```
(function() {
        'use strict';

        var React = AlloyEditor.React;
```

ボタンのクラスを作成します。

var LogSelectedTextButton = React.createClass(
    {
        //button configuration goes here
    }
);

React.createClass（） メソッドの構成オブジェクト内で、ボタンに必要なミックスイン指定します。これらは追加機能を提供し、ボタンにショートカットキーをバインドするなど、ボタンに機能を簡単に追加できます。以下の例では、 ButtonStateClasses および ButtonKeystroke ミックスインを使用しています。
```
mixins: [AlloyEditor.ButtonStateClasses, AlloyEditor.ButtonKeystroke],
```

ボタンの検証小道具を渡します。これらは、ボタンのインスタンスごとに定義されます。少なくとも、 エディター 定義する必要があります。以下の例では、エディター、ラベル、およびtabIndexのプロパティを設定します。

propTypes: {
    /**
     * The editor instance where the component is being used.
     * 
     * @instance
     * @memberof LogSelectedTextButton
     * @property {Object} editor
     */
    editor: React.PropTypes.object.isRequired,

    /**
     * The label that should be used for accessibility purposes.
     * 
     * @instance
     * @memberof LogSelectedTextButton
     * @property {String} label
     */
    label: React.PropTypes.string,

    /**
     * The tabIndex of the button in its toolbar current state. A value other than -1
     * means that the button has focus and is the active element.
     * 
     * @instance
     * @memberof LogSelectedTextButton
     * @property {Number} tabIndex
     */
    tabIndex: React.PropTypes.number
},

ボタンの静的プロパティを定義します。少なくとも キーする必要があります。 キー は、 AlloyEditorの構成指定するボタンの名前を定義します。 my-log-text-button モジュールの静的プロパティは次のとおりです。
```
statics: {
    /**
     * The name which is used as an alias of the button in the configuration.
     * 
     * @default myTestButton
     * @memberof LogSelectedTextButton
     * @property {String} key
     * @static
     */
    key: 'logSelectedText'
},
```
オプションで、 getDefaultProps プロパティを使用して、各インスタンスのボタンにあるデフォルトプロパティを定義します。次の例では、 ButtonKeystroke mixinに必要な コマンド および キーストローク プロパティを使用して、ボタンの logText（） 関数のショートカットキーを設定します。
```
getDefaultProps: function() {
    return {
        command: 'logText',
        keystroke: {
            fn: 'logText',
            keys: CKEDITOR.CTRL + CKEDITOR.SHIFT + 89 /*Y*/
        }
    };
},
```
ボタンにレンダリングするHTMLマークアップを定義します。以下の例では、 getStateClasses（） メソッドを使用して、 ButtonStateClasses ミックスインによって提供される状態クラス情報を取得し、現在の cssClass 値に追加します。また、Liferay Utilの getLexiconIconTpl（） メソッドを使用して、ボタンに使用するレキシコンアイコンを取得します。利用可能なアイコンの完全なリストについては、レキシコンのデザインサイトを参照してください。
```
render: function() {
        var cssClass = 'ae-button ' + this.getStateClasses();
        var svg = Liferay.Util.getLexiconIconTpl('desktop');

        return (
                <button
                    className={cssClass}
                    onClick={this._logText}
                    title="Log the selected text in the console"
                    dangerouslySetInnerHTML={{__html: svg}}
                />
        );
},
```
ボタンのメインアクションを定義します。次の例に示すように、 nativeEditor取得すると、CKEditorの完全なAPIにアクセスできます。そこから、利用可能な CKEditor.editor メソッドいずれかを使用して、エディターのコンテンツと対話できます。以下の例では、エディターの getSelection（） および getSelectedText（） メソッドをチェーンして、ユーザーの強調表示されたテキストを取得し、ブラウザーのコンソールにログを記録します。
```
/**
 * @protected
 * @method  _logText
 */
_logText: function() {
    var editor = this.props.editor.get('nativeEditor');
    var selectedText = editor.getSelection().getSelectedText();

    console.log("Your selected text is " + selectedText);
}
```
最後に、使用可能なボタンのリストにボタンを追加します。

AlloyEditor.Buttons \ [LogSelectedTextButton.key ] = AlloyEditor.LogSelectedTextButton = LogSelectedTextButton;

これでAlloyEditor \のボタンの作成方法がわかりました！

ヘルプセンター

製品

リソース

セキュリティ

サポート

ドキュメンテーション

ボタンのJSXファイルの作成

ボタンのJSXファイルの作成

関連トピック