Google Apps ScriptでCKEditorを使ったウェブアプリ【GAS】

自分のウェブアプリケーションに於いて、ユーザ入力してもらうエリアで単なるテキストエリアだと非常に味気ない。そこで、HTML入力も可能な各種CMSやプラグインとしても活用されている「CKEditor」を搭載できたら、一気にアプリが豪華になります。

今回このCKEditorをGASで作ったウェブアプリケーション側に搭載してみて、その中で得た知見などをここにまとめてみようと思います。Google Apps ScriptだけでなくElectronなどのアプリでも活躍すると思います。

今回使用するライブラリ等

CDNで利用しますが、Standardの場合、フォントカラー変更などの一部が無いので、Full PackageのCDNを今回は利用しています。

実行と結果

サンプルの使い方

サンプルスプレッドシートには、CKEditorを含めたコードと実行用のメニューが用意されています。以下の手順でセットアップを実行し、表示します。

  1. スプレッドシートを開く
  2. メニューより、CKEditor -> セットアップを実行(スプレッドシートのIDがスクリプトプロパティに記述されます)
  3. 続けて、CKEditor -> エディタの表示で表示されます。
  4. 左サイドバーをクリックすると対応するHTMLコードがエディタ内に展開されます。
  5. 右上の保存ボタンをクリックするとスプレッドシートに書き込まれます。

図:セットアップをまずしておきましょう

結果

デモでは書き込みは出来ないようにしてあります。

ソースコード

今回はいきなり開くとCKEditorの画面であるため、現実にはダイアログ表示などをした時にその中にCKEditorを表示するパターンが多いと思われる(実際自分のアプリではそのような作り)。そのため、CKEditorの初期化のタイミングや、保存する時に一時配列にスプレッドシートの値を読み込ませてから表示 -> 保存時は一時配列の中身を本来のデータ格納用配列に保存しつつ、スプレッドシート書き込みになるため、よりコードは複雑になります。

また、ダイアログ表示をする場合、CKEditorの縦横のサイズをリサイズ対応する必要があると、その為のリサイズ用の処理を入れておく必要があります。

また、今回はアプリの外観用にVue.js + Vuetifyも利用しています。

CDNを利用

CKEditor本体のライブラリを読み込む時には、いくつかパターンがあり、今回のようなフルセットの場合には、HTMLのHEAD内に以下のコードを追記しておいて読み込ませるだけです。

フォントカラーの変更などは、standardには含まれていないようで、fullのパッケージを読み込ませるようにしています。

図:フルパッケージだと機能が豊富

初期化

GAS側コード

GAS側はHTML側からのデータ要求に対して、JSON形式でデータを送り返してあげる必要があります(v-data-tableがその形式で受け入れる為)。今回はスプレッドシートのIDをsheetidというプロパティに格納してあります。

HTML側コード

今回はVuetifyのmountedではなく、初回起動時の左サイドバーのパネルをクリック時に初期化をしています。初期化をしなければ、CKEditorが表示されないので注意が必要です。また、2回目クリック時はパネル間移動となるため、そのままではデータが消えてしまう。よって、まずはCKEditorの中身を一時配列に保存してから、次のパネルの値をCKEditorに読み込ませる仕組みにしています(保存ボタンを押した時に初めて、スプレッドシートには反映する)

  • 初期化は、CKEDITOR.replaceにて、textareaタグの中身を置き換える形で実行します。
  • この時、後からそのインスタンスをいじれるように、ckevent変数にインスタンスを格納しています。
  • 初期化時に縦横のサイズ指定できますが、今回はapprove2のエリアにフィットするようにevt.editor.resizeにてCKEditorの縦横のサイズを変更させています。
  • パネル間で移動した際に一時配列のmtemp変数には変更を反映してから、次の表示をするようにしています(でないと、パネル移動すると、データが消えてしまい、再度呼び出し時には初期値が表示されてしまう。

値をセットと取得

CKEditor自体は、textareaタグの領域をリプレースする事で表示する仕組みになっています。よって、必ずtextareaが一個は必要になります。そして、このCKEditorは表がWYSIWYGのエディタ、裏側がHTMLのソースコードになっており、HTMLの値をセットすると、表のWYSIWYGの表示が適切なGUIのHTMLエディタの表記になってくれます。

予め、初期化時にインスタンスを取得しておき(ckevent)、これに対してsetDataでHTMLデータをセットし、編集後の値はgetDataで取得します。

データの書き込み

今回は1行ずつデータを書き込みではなく、まとめてセーブする形式を取っているので、データはまるごと渡して書き換えるようにしています。

GAS側コード

  • JSONで受け取って配列に直し、一発で書き込みをしています。

HTML側コード

  • 最後の書き込みを一旦セーブしないと、変数には反映されていないので、まず変数に保存するコードが必要です
  • mtempのJSONデータをGAS側へ渡してあげています。

リサイズ対応

サイズ可変のウィンドウであったり、ダイアログなど、その時の外枠のサイズは動的に変わるケースの場合、固定サイズのCKEditor表示だと少々見栄えが悪いです。フルスクリーンやサイズ変更時にはその外枠に合わせてリサイズしてくれたほうがスマートな表示になります。

そこで、リサイズを行った時にサイズ変更を行う関数を実行させて、対処しています。

これをVuetifyの初期化マウント時のイベントや、以下のようなリサイズ時のイベントの中で呼び出すようにしておけば、リサイズするとそのサイズに追従する形で、CKEditorがフィットするようになります。横幅は100%していで簡単にフィットします。

左サイドバーはv-data-tableで作成しているので、こちらは横幅固定で高さだけをウィンドウ枠の高さに合うように調整しています。調整で-140などしてるのはVuetifyのツールバーの高さ分などを差し引きして、高さ調整を行っているためです。

ツールバーのカスタマイズ

表示するボタンやグループを制御

CDNで取り込んだCKEditorですが、今回はfullを選んでいるため、デフォルトで非常に多くのボタンが表示されてしまっています。しかし、実際に使うであろうボタン類というのはそこまで多いわけではないので、これではオーバースペック。ということで、Toolbar Configuratorで必要なものだけを残して、Get Toolbar Configをクリックするとカスタマイズ用のコードが得られます。

また、ローカル用の場合は、こちらのサイトでカスタマイズすると、カスタマイズしたローカル用ファイルが出力されます。

これをそのまま使うのではなく、以下のようにCKEDITOR.replace時のオプション設定として指定する事で、必要なボタンだけを表示する事が可能です。

  • toolbarGroupsで表示するツールバーグループを指定
  • removeButtonsにて、非表示にするボタン類を指定
  • これらを手動で作るのは面倒なので、Toolbar Configuratorを使ってオンオフや位置移動をすることで、上記に必要なコードが得られます。

図:デフォルトよりもスッキリな表示になった

カスタムボタンを追加

GASで使う上で欲しくなるのが、Google Driveに画像やファイルをアップして、エディタにそのファイルへのリンクを追加するといった機能。これらはアイコン画像と、コードでカスタムボタンとして追加が可能です。

コードとしては、前述のコードのeditormanを定義後に上記のようなコードを追加する。自分の場合、このボタンをクリックしたらGoogle PickerのUpload機能を追加してファイルアップローダとリンクを元に画像をimgタグで表示する機能を搭載させています。

Google Picker アップローダを作る【GAS】

図:ドライブボタンを追加できた

カーソル位置に挿入

前述のGoogle Driveへアップロードし、IDを受け取ったら色々加工して、「現在のカーソルの位置に情報を挿入」という装備をする必要があります。でなければ、標準では一番後方の位置に挿入されてしまうので、具合がよくありません。故に書き込む前にカーソル位置を取得しておいてから書き込むようにします。

例えば前述のGoogle DriveへのアップロードでPicker APIを使った場合、ファイルのMimeTypeに応じて内容を変えて、CKEditorの現在のカーソル位置に挿入というコードは以下のようになります。

  • 現在のカーソルポジションにて、位置を取得(selectRangesで位置を指定します)
  • MimeTypeに応じて挿入するHTMLを変更する(画像ならば直接imgタグで表示、そうでなければファイルへの直リンク表示)
  • 最期にinsertHtmlにてカーソル位置に貼り付けます。

ダイアログで使う場合の注意点

リンク等のダイアログが操作できない

VuetifyのDialog内にCKEditorを表示させて、いざ文字を入力。文字にハイパーリンクを設定しようとボタンを押し、リンク設定のダイアログが出たまでは良かったのですが、URLのテキストボックスを触ろうとするとフォーカスされず、操作が出来なくなる現象があります。また、この問題を回避してもテキストボックスを触るたびにダイアログが動くバウンスアニメーションが動く為、鬱陶しいことこの上ない。

ということで、この場合の対処法は以下の通り。

persistentを外すと、CKEditorのダイアログを触った瞬間にVuetifyのダイアログが閉じてしまうので、つける必要があります。また変更点は

  • :retain-focus="false"を付けてフォーカスがテキストボックスに入るように奪取を阻止します
  • no-click-animationを付けてバウンスアニメーションをオフにします

これで、VuetifyとCKEditorの厄介な問題を解決して同居することが可能です。

図:テキストボックスにフォーカスが移動しない問題

要素が見つからないエラー

VuetifyのDialogにCKEditorを直接描画してる場合、ダイアログが開かれたらすぐにエディタの中身が表示されるようにしたい。しかし、その時に以下のようなエラーが出る場合があります。

全社は、置き換えるElementが見つからないというエラー。後者は既に置き換え済みでバッティングしてるというエラー。CKEditorの初期化は最初の1回で良いのでその為のフラグなどを利用しながら、上記の2つ問題点を解消する必要があります。Vue + Vuetifyの場合はWatchを利用して、初期化を行うと良いでしょう。

VueのtempwordmanにHTMLデータが入っています

  • watchの場合、thisでVueの値を参照できない為、vmに格納後にvm.tempwordmanとして参照するようにする
  • 最初の初期化の時にだけ、chflgという値に判定値を入れて、二度目は値の代入のみとするようにする(これでeditor-element-conflictを回避出来る)
  • Dialogを開いた直後に初期化を始めるとeditor1というelementが見えないために初期化に失敗するので、setTimeoutにて300msウェイト掛けてから表示させています(これでeditor-incorrect-elementを回避出来る)
  • watchの対象としてるtempdialogがダイアログのオンオフ用の変数です。

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。