やりたいこと/知りたいこと

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件

ベストアンサー

質問者さんの実現したい内容と違ったら申し訳ございません。また、セキュリティ的な面からいうと直接での利用は避けた方がいい方法です。

PHP
1<html lang="ja">
2<head>
3<meta charset="UTF-8">
4<title>jQuery</title>
5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
6<script>
7$(function(){
8$('#preview').bind('keyup change', function(){
9$('#preview_area').html($("#preview").val());
10});
11});
12</script>
13</head>
14<body>
15<input type="button" onclick="document.getElementById('preview').value='<b>ここに書いて</b>'">太字</input>
16<table>
17<tr>
18<td>
19<form action="./index.php" method="post">
20<textarea id="preview" style="width:200px; height:100px;"></textarea>
21</form>
22</td>
23<td style="border:1px solid; width:200px; height:100px;" id="preview_area">
24</td>
25</tr>
26</table>
27</body>
28</html>