WYSIWYGエディターのポートレットへの追加

WYSIWYGエディターのポートレットへの追加

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

<liferay-editor:editor /> タグのおかげで、WYSIWYGエディターをポートレットに簡単に組み込むことができます。

以下に設定例を示します。

<%@ taglib uri="http://liferay.com/tld/editor" prefix="liferay-editor" %>

<div class="alloy-editor-container">
    <liferay-editor:editor
            contents="Default Content"
            cssClass="my-alloy-editor"
            editorName="alloyeditor"
            name="myAlloyEditor"
            placeholder="description"
            showSource="true" 
    /> 
</div>

を通じてJavaScript関数を渡すことも可能である onBlurMethodonChangeMethodonFocusMethod、及び onInitMethod 属性。 OnInitMethod 属性を使用して OnDescriptionEditorInitというJavaScript関数を渡す構成の例を次に示します。

<%@ taglib uri="http://liferay.com/tld/editor" prefix="liferay-editor" %>

<div class="alloy-editor-container">
    <liferay-editor:editor
        contents="Default Content"
        cssClass="my-alloy-editor"
        editorName="alloyeditor"
        name="myAlloyEditor"
        onInitMethod="OnDescriptionEditorInit"
        placeholder="description"
        showSource="true" />
</div>

<aui:script>
    function <portlet:namespace />OnDescriptionEditorInit() {
        <c:if test="<%= !customAbstract %>">
            document.getElementById(
              '<portlet:namespace />myAlloyEditor'
            ).setAttribute('contenteditable', false);
        </c:if>
    }
</aui:script>

以下は、 <liferay-editor:editor /> タグの主な属性の概要です。

属性タイプ説明
autoCreatejava.lang.StringエディターのHTML編集ビューを最初に表示するかどうか
内容java.lang.Stringエディターの初期コンテンツを設定します
contentsLanguageIdjava.lang.String入力エディターのテキストの言語IDを設定します
cssClassjava.lang.Stringコンポーネントのスタイルを設定するためのCSSクラス。
データjava.util.MapeditorConfigとして使用できるデータ
editorNamejava.lang.String使用するエディター(alloyeditor、ckeditor、tinymce、simple)
java.lang.String入力エディターの名前。 デフォルト値は editorです。
onBlurMethodjava.lang.String入力エディターがフォーカスを失ったときに呼び出される関数。
onChangeMethodjava.lang.String入力エディターの変更時に呼び出される関数。
onFocusMethodjava.lang.String入力エディターがフォーカスを取得したときに呼び出される関数。
onInitMethodjava.lang.String入力エディターの初期化時に呼び出される関数。
placeholderjava.lang.String入力エディターに表示するプレースホルダーテキスト。
showSourcejava.lang.StringコンテンツのHTMLソースコードの編集を有効にするかどうか。 デフォルト値は trueです。

サポートされている属性の完全なリストについては、 taglibdocs を参照してください。

ご覧のとおり、ポートレットにWYSIWYGエディターを含めるのは簡単です。

関連トピック

エディターに新しい動作を追加する

エディターの構成の変更

AlloyEditorの変更

« WYSIWYGエディターエディターの構成の変更 »
この記事は役に立ちましたか?
1人中0人がこの記事が役に立ったと言っています