LoginSignup
1
2

More than 1 year has passed since last update.

まともなファイルメーカー用WYSIWYGエディタを組み込む

Last updated at Posted at 2021-05-27

WYSIWYGEditor.gif

アドオンのテキストがイケてない

ファイルメーカー19からアドオン機能が追加され、その中にテキストエディタが含まれていますが、ちょっと使った感じでもちょっと使うのをためらう感じだったので、まともに使えそうなサンプルを作ってみましたので紹介します。

データの保存は、入力時にリアルタイムでファイルメーカーに保存されるようにしています。

追加した機能

標準アドオンとほぼ同じ機能を実現していますが、それに加えて以下の機能を追加しています。
主に画像埋め込みに関する機能です。

  • 画像のDrag&Dropによる追加
  • 埋め込んだ画像のサイズ変更
  • 埋め込んだ画像の配置変更

カスタマイズについて

このサンプルの機能を再利用して、カスタマイズなどはご自由にどうぞ。
なるべくシンプルに実装したつもりですので、ある程度JavaScriptの知識があれば、内容は理解できるかと思います。

なお利用しているエディタライブラリは、Quill.js(https://quilljs.com) ですので、カスタマイズ等はQuillの情報を参考にすれば可能かと思います。
サンプルでは、標準アドオンのツールバーオプションを詳細にしたときとほぼ同等に設定してみました。

サンプルファイルはこちら
※要 Claris FileMaker 19

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2