今日は手軽にオンラインシステムに組み込めるテキストエディタの実装例を紹介したいと思います。

この記事でわかること

C#(.Net)でCKEditorを組み込むときのポイント

目次

CKEditorとは

リソースの入手など

ASPXでの実装例

CKEditorとは

無償で商用利用可能のOSSなWYSIWYGエディタです！

ちょっと補足。

  • 「無償で商用利用可能」：お金を稼ぐ目的のために使っても使用料がかからない、ということです。

（いつもありがとう！と心の中で唱えることは忘れずに(^_-)☆）

  • 「OSSな」：オープンソースソフトウェアの。

オープンソースでも著作権が放棄されているということではなく、ライセンス条項は存在します。

※ちなみに今回紹介するのはCKEditorのVersion4。

　GPL、LGPL、MPLのトリプルライセンスです。

　…何ぞ・・という人はいると思いますがここでは深く触れません。

  • 「WYSIWYGエディタ」：WYSIWYGはWhat You See Is What You Get（見たままのものが得られる）の頭文字をとってウィジウィグといっています。（ICTにおける概念であり、公的団体等があるわけではありません。）

つまり、アプリケーションのUIにおいて、見た目を直接いじって確認でき、Web表示や紙への印刷もそのとおりになるってことです。（従来でいう「リッチテキストエディタ」を知っている方は、そのうち主な表示関連の機能をまとめたもの、と理解しておけばよいかと思います）

DTPソフトウェアはその目的上、当然WYSIWYGですし、Microsoft® WordやPowerpointもそういって差し支えないと思います。（なお、Word/Powerpointと同じMicrosoft御三家というべきExcelは基本的には違います(印刷すると画面とよくずれるよね！)。なにがしの公的な組織が厳密な基準で決めている、ということではありませんので、深堀りません）

話を戻して、CKEditorの使い道としては、

「WordpressとかのCMSを導入したいわけではなく、あくまで現行のシステムの一部として、HTMLタグやCSSなどは苦手な業務部門の人が使うWYSIWYGエディタを組込みたい」

といったシーンにマッチするんじゃないかと思います。
※今回は、運用中システムがASP.NET Formを利用している場合を想定した記載となります。

CKEditorは、Javascriptベースで作られており、Webへの組込みがとてもお手軽です。

React、Angular、Vue.js等最近のフレームワークと組み合わせ/共存も可能です。

リソースの入手など

以下２つを準備します。

CKEditor4 の入手

https://ckeditor.com/ckeditor-4/download/

パッケージは、Basic/Standard/Fullの3種類の他、Customizeが選択でき、必要なプラグイン、スキン、対応言語を取捨選択してビルドされたモジュール群をオンラインで入手可能。

ダウンロードしたZIPを解凍して得られたckeditorフォルダをプロジェクトフォルダ等に貼り付け。

CKEditor.NETを入手（Nuget）

（ASP.NET MVCの場合は不要です）

https://www.nuget.org/packages/CKEditor.NET.3.6.6.2/

からNUPKGを取得し、拡張子をZIPに変更したら解凍できる。

libフォルダにあるCKEditor.NET.dllを[参照の追加]で追加。

なお、動作環境は、WebサーバにIIS、.Net Framework 2.0以上、です。

ASPXでの実装例

先頭に、カスタムコントロールとして登録

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

headタグ内で本体のJSを読み込み。

<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>

body内の適切な場所で エディタを埋め込み（TagPrefixにあわせる）。

<CKEditor:CKEditorControl  MaxLength="xxxx" Height="xxx" ID="txtContext" runat="server"></CKEditor:CKEditorControl>

これだけで呼び出せます。

ちょっとした利用例

フロントでゴニョゴニョ処理（JQuery）したい

  • 文字数カウントボタンの埋め込み
<asp:Button CssClass="btnCountText" ID="btnCountText" runat="server" Text="文字数カウント" />
  • 文字数カウントして表示したい
$(".btnCountText").click(function(){
var text = CKEDITOR.instances["<%=txtContext.ClientID %>"].document.getBody().getText();
alert(text.length);
});
  • ノード(ノードリスト)を取得したい
$('.btnCountContext').click(function(){
    var txtContext = CKEDITOR.instances["<%=txtContext.ClientID %>"];
    var divItem = txtContext.container.$;
    var contentBody = $(divItem).find('.cke_contents');
    ・・・

と、cke_contentsクラスで取得するのがポイントです。

最後に

CKEditorの全体的な設定やスタイル定義はckeditorフォルダの以下ファイルでおこなえます。

  • config.js：デフォルトフォント、ツールバー設定、ボタンの表示/非表示制御、優先言語の設定等。
  • styles.js：エディタUIで使用できるカスタムスタイル設定のUI定義。
  • contents.css ：カスタムスタイルのスタイル定義（クラスやセレクタ追加する場合もここに）。

今回細かい点まで書ききれませんが、この辺を理解すると、エディタのGUIの変更（ボタンの追加）や、入力した文字が出力されるときのHTMLのカスタマイズ等、やりたいことがやれます。

今後別途、便利なプラグイン紹介や、CKEditorの最新版（Version5）の紹介ができたらと思います。