0

ラッパー div を使用して RTE (リッチ テキスト エディター) を開発しています。

<div id="myeditor"></div>
//then
editorfunction(myeditor);
What the function does is add the following elements
<div id="myeditor">
    <div class="toolbar">buttons here</div>
    <div class="editorwrapper">
      <div class="editor-richtext">
         rich text etc
      </div>
      <textarea class="editor-source"><p>rich text etc</p></textarea>
    </div>
</div>

.editor-richtext から html を正常に取得して textarea 内に配置できますが、textarea を編集すると、それをリッチ テキストに貼り付けることができないようです。

前もって感謝します！

更新 1
わかりました。

$("richtext").blur(function() {
   $("textarea").val($(this).html());
});

正常に動作しますが、その逆ではありません (テキストエリアからリッチテキストへ)。

更新 2 非常に不安定なようです。部分的に動作しますが、動作がおかしいです:\ textarea からコンテンツを完全に取得して、html として contenteditable に貼り付けることができません。私はいくつかの研究を続けます。

更新 3 更新 1 と更新 2 を更新したところ、テキストエリアとリッチテキストを脳内で完全に反転させました。ごめん！

更新 4 わかりました。これでほとんど解決しました。contenteditable div にフォーカスせず、ソース ビュー\テキストエリアに切り替えないと、初期化時にわずかな問題が 1 つあります。テキストエリアが空になり、RTE view\contenteditable div に戻ると空になります。空の textarea\source から。私は回避策に取り組んでいます。

4

3 に答える 3

2

textarea の onBlur イベントをフックして、テキストをコピーし、editor-richtext に貼り付けることができます。

$("textarea.editor-source").blur(function(){
   $("div.editor-richtext").html($(this).val());
});

編集

他の方法では、次のコード セグメントを使用できます。

$("textarea.editor-source").focus(function(){
   $(this).val($("div.editor-richtext").text());
});
于 2012-08-31T06:17:11.890 に答える
0

すべて正常に動作します。あなたの例のセレクターは間違った考えです:

HTML:

  <div class="editor-richtext">
     original text
  </div>

  <textarea class="editor-source">modified text</textarea>

JS:

  $(".editor-source").blur(function() {
     $(".editor-richtext").html($(this).val());
  });​

デモ

更新: 

$(".editor-richtext").click(function(){
    $(".editor-source").val($(this).html().trim());
});

からのコンテンツをクリック イベントに入れる新しいデモ。 divtextarea

于 2012-08-31T06:39:25.590 に答える
0

jQuery と次の機能を使用したい場合がありますか?

$(".editor-source").keyup(function() {
    $(".editor-richtext").html($(this).val());
});
于 2012-08-31T06:19:32.073 に答える