カスタム・フィールド・エディタのedit.html

edit.htmlファイルは、カスタム・フィールド・エディタ実装が配置される場所です。これは必須ファイルです。一般的に、エディタに必要なHTMLマークアップ、スタイルおよびJavaScriptコードを処理します。このファイルは、コンテンツ・アイテム・フォームと通信するために、field-editor-sdk-1.0.js JavaScriptライブラリをロードします。 edit.htmlファイルは、カスタム・フィールド・エディタが構成されているフィールドに対するコンテンツ・アイテム・フォーム内のiframeにロードされます。カスタム・フィールド・エディタを作成すると、デフォルトのカスタム・エディタは、フォーム内でフィールド・エディタがレンダリングし、フィールド値を取得および設定する方法を示す単純なテキスト・フィールドです。カスタム・フィールド・エディタが複数値フィールド用に構成されている場合、エディタは各エントリのiframe内で実装されます。

カスタム・フィールド・エディタを適応させるには:

HTMLマークアップの編集
SDKライブラリのインポート
フィールド値の取得と設定
フィールド値の検証
フィールド・エディタの有効化と無効化

HTMLマークアップの編集

テキスト・エディタでedit.htmlを開き、必要な変更を加えます。たとえば:

<html>
    <head>
        <style>
            body {
            margin: 0;
            padding: 0;
            font: normal 100% "Helvetica Neue", 'Segoe UI', sans-serif-regular, Helvetica, Arial, sans-serif;
            }
            input {
            width: 100%;
            height: 32px;
            font-size: 14px;
            }
        </style>
    </head>
    <body>
        <!-- In this case the editor is a text field -->
        <input id="textInput" type="text">
    </body>

    .......
</html>

SDKライブラリのインポート

<script>タグまたはrequireJSを使用して、field-editor-sdk-1.0.jsライブラリをインポートします。このSDKには、editorSDKというグローバル・オブジェクトがあります。

<!-- load the field editor SDK -->
<script src="/documents/static/gemini/api/field-editor-sdk-1.0.js"></script>

フィールド値の取得と設定

editorSDKを初期化し、コールバック関数およびオプションのコンテナDOM要素を渡します。このコールバック関数は、SDKのインスタンスを使用してeditorSDKのinitSDK()メソッドによって呼び出されます。 SDKインスタンスでは、編集中のフィールドにアクセスできます。フィールド・インスタンスを準備すると、編集中のフィールドの値を取得し、新しい値を設定できます。

次に、このカスタム・エディタに対応するフィールド・オブジェクトをSDKインスタンスから取得し、フィールドの値を取得し、テキスト・フィールド・エディタで設定します。このコールバック関数initEditorの例を示します。次に、フィールド値の変更をリスニングし、フィールド値を更新します。

<script>
        /* globals editorSDK */
        (function() {

        function initEditor(sdk) {
            // retrieve the field object rendered by this custom editor
            var field = sdk.getField();

            // retrieve the current field value
            var value = field.getValue();

            var inputField = document.getElementById('textInput');

            // set the current field value in this editor
            inputField.value = value;

            // when the editor value changes, set the changed value
            // to the field
            inputField.addEventListener('change', function(e) {
              field.setValue(inputField.value);
            });

            // if the field is updated externally, keep the editor in sync
            field.on('update', function(value) {
              inputField.value = value ? value : '';
            });
        }

        // this is the entry point to initialize the editor sdk.
        editorSDK.initSDK(initEditor);

        })();
</script>

フィールド値の検証

フィールド値の取得および設定に加えて、カスタム・フィールド・エディタが入力された値を検証する必要がある場合、sdk.setValidation()関数を使用して、エディタ検証を処理するコールバック関数を渡すことができます。次の例では、setValidationはコールバック関数validateValueを渡します。これは、appinfo.jsonファイルで検証プロパティがtrueに設定されている場合に機能します。

        // sample validation function that
        // validates whether entered length of the string is more than 10
        function validateValue(value) {
            var isValid = true;

            if (value && value.length > 100) {
            isValid = false;

            return {
                isValid: false,
                title: getTranslatedString('validation.title', currentLocale),
                message: getTranslatedString('validation.message', currentLocale)
            };
            }
            return isValid;
        }

        function initEditor(sdk) {
            // retrieve the field object rendered by this custom editor
            var field = sdk.getField();
            ....
            ....

            // register a custom validation function for this editor
            sdk.setValidation(validateValue);
            ....
            ....
        }

        // this is the entry point to initialize the editor sdk.
        editorSDK.initSDK(initEditor);

フィールド・エディタの有効化と無効化

コンテンツ・アイテム・フォーム・フィールド・エディタは有効になり、無効になります。たとえば、注釈の開始時には各フィールド・エディタが無効モードになり、ユーザーが注釈モードを終了すると、フォーム・フィールド・エディタが再び有効になります。カスタム・フィールド・エディタもこのルールに従う必要があるため、カスタム・フィールド・エディタの実装では、フォームのブロードキャストを行うときにエディタの有効化と無効化を処理する必要があります。これは、SDKのregisterDisableメソッドをコールして、エディタを有効にするコールバック関数を渡すことによって処理されます。

        //
        // disable/enable call back that gets called if the content form
        // needs to enable/disable this editor
        function renderDisabled(value) {
            if (value) {
            document.getElementById('textInput').disabled = true;
            } else {
            document.getElementById('textInput').disabled = false;
            }
        }

        function initEditor(sdk) {
            // retrieve the field object rendered by this custom editor
            var field = sdk.getField();
            ....
            ....

            //register render disabled function for this editor
            sdk.registerDisable(renderDisabled);
            ....
            ....
        }

        // this is the entry point to initialize the editor sdk.
        editorSDK.initSDK(initEditor);