やりたいこと/知りたいこと
EvernoteやSimpleMDEのような、
テキストエリアを太文字などの拡張可能なエディタにしたい。
やってみたこと
- こちらの記事を参考に、
textarea
とdiv
要素を準備 textarea
要素を画面外(left: -1000
など)に配置し、div
要素のwidthとheightを100%にdiv
がクリックされたらfocusをtextareaに当てるkeyup
イベントを拾い、textareaの文字をdivに描画
この方法を使うことで、対象の文字列を置換する(例:対象の文字列
-> <b>対象の文字列</b>
)事により、
太文字などの一部の文字列の装飾が可能になりました。
しかし、ドラッグのハイライトや、コピー&ペースト、キャレットの表示などがかなり困難です。
また、Twitterのつぶやきを行うボックスでは、contenteditable=true
という要素を使っているようですが、
実際に使ってみたところ、大量のテキストを入力するには向いていない気がします(動きがカクカクし始める)。
そこでevernoteやSimpleMDEで作成される編集部分を開発者ツールで見てみたところ、
両者とも、私の作成した方法や、contenteditableの利用は行っておりませんでした。
そこから処理を追えたら良かったのですが、どのような仕組みで動いているのかがわからず、今に至ります。
ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
所管
SimpleMDEをずっと観察しているのですが、
キャレットは独自のCSSを当て、ブライトさせており、
入力文字はpre
タグの中にしまわれていっています。
textarea
タグは存在しており、そこと連携しているようなのですが、
どのような流れかがわかりません。
また、キャレットの横に常にtextareaがついて回る挙動も、謎です。。。
参考
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/11 13:52
2018/11/12 13:10