[Dynamics365]SummerNoteでHTMLエディタを実現

僕自身、Salesforce経験者なので、どうしても機能比べをしてしまうんですけど、その中の1つとして、リッチテキストの有無があります。

SalesforceにあってDynamicsにないもの。

今回はSalesforceにあったリッチテキスト型をDynamicsにも

スポンサーリンク

Dynamicsにはリッチテキスト型がない

Salesforceには複数行入力できるロングテキスト型に加え、文字の装飾などを行えるリッチテキスト型も存在します。
これがSalesforceのリッチテキスト型。
Salesforceのリッチテキスト型
リッチテキストというほどリッチというものではないんですが、やはり、太字にしたりリンクを貼ったりと何かと便利な機能の1つであります。
結構、ユーザ側って以外とHTMLエディタの要望ってあるんですよね。

Dynamicsにはリッチテキスト型がないので、スクリプトなりWebリソースなりを駆使して実現できないかを検証してみました。

リッチテキストがなければ作ればいい

なので、Dynamicsでも何とかできないものかHTMLエディタの実現性を検証してみました。
そして、実現ができました!

今回、オープンソースであるSummerNoteというHTMLエディタをDynamics上で実現できましたので、備忘も兼ねて手順を載せたいと思います。

SummerNoteについては、ここでは詳しく触れませんが、ソースコードであったり、カスタマイズ方法などはホームページに掲載されています。

SummerNoteの取り込み手順

まずは、Dynamics側でHTMLエディタの格納場所であるテキストフィールドを作成します。

この項目にHTMLのテキストが入ります。
HTMLタグも含めて格納されるので、文字数は多めに指定しておきましょう
HTMLエディタ用の複数行テキスト項目
ここでは、文字数を最大数に指定しています。

次に、SummerNoteを取り込んだWebリソースを作成します。
SummerNote取り込み用のWebリソース

テキストエディターには以下のコードを書き込みます。
new_SummerNote

<!DOCType html>
<html>
    <head>
    <meta charset="UTF-8">
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/lang/summernote-ja-JP.js"></script>

    <script text="text/javascript">
    $(document).ready(function(){
        var FIELD_NAME = "ここに複数テキスト項目のスキーマ名を入力";

        $('#summernote').summernote({
            lang: "ja-JP",
            toolbar:[
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']]
        ],
        height : 400,
        maxHeight : 400,
        });

        var code = parent.Xrm.Page.getAttribute(FIELD_NAME).getValue();
        $('#summernote').summernote("code", code);

        $('#summernote').on('summernote.blur', function() {
            var code = $('#summernote').summernote("code");
            parent.Xrm.Page.getAttribute(FIELD_NAME).setValue(code);
        });
    });
    </script>
    <meta>
    </head>

    <body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
        <div id="summernote"></div>
    </body>
</html>

このHTML内でSummerNoteのコントローラを取り込んでいます。
それぞれ、jQuery,Bootstrap,SummerNote(+日本語)のjavaScriptとCSSを取り込んで、メニューなどを簡単にカスタマイズした内容となります。
編集した時に、複数行テキストへ同期をとる処理を入れています。

FIELD_NAMEには、複数テキスト型のフィールドの名前を指定しましょう。
上記で作成した複数行テキストを使えば「new_htmleditor」になりますね。

あとはフォーム内にWebリソースを配置すればOK。

SummerNote用Webリソースをフォームに配置

出来上がりはこのようになります。
上のボタンはカスタマイズ次第ではありますが、太字やフォント、文字色など基本的なものはほぼ可能です。
SummerNoteを入れたコントローラー

エディタによって装飾したものは、複数行テキストにはこのように格納されます。
HTMLエディタ編集後の複数行テキスト

HTMLエディタを使う上での注意点

このように、自由度が高く拡張性もあるエディタですが、サーバーサイドのテキストならではの宿命があります。

それが画像ファイルの添付です。
このようにエディタ上に画像をドラッグアンドドロップすることは可能ですが、

HTMLエディタに画像を貼り付けると

画像ファイルのバイナリデータ(?)がテキストに書かれるため、文字数が大量消費されます。
大量の文字列が複数行テキストに記録される

いくら複数行テキストといっても、文字数の上限が決まっているため、1個画像を添付すれば、軽く文字数上限ギリギリ、下手すれば上限越えになります。

あらかじめ、WebリソースやSharePoint画像ファイルを入れておいて、URLでパスを指定する方法であればこのようにimgタグの文字数は抑えられます。
エディタとは別管理で画像を保存しないといけず、一般ユーザにはハードルが高いので、やはり画像の貼り付けは制限をかけたほうがいいですね。
パスを指定すればimgタグでも文字数の消費は少ない

あと、テーブルが使いにくいのが難点かな。
こちらもコントローラーから外したほうがいいかも。

Dynamics
スポンサーリンク
エスパーラボ

コメント