将textarea中的html粘贴到Contenteditable Div

Question

我正在使用包装器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());
});

工作正常，但不是相反（从textarea到richtext）。

更新2它似乎非常不稳定，它部分工作但行为奇怪：\\我无法从textarea完全获取内容并粘贴为html成为contenteditable。 我会继续做一些研究。

更新3我刚刚更新了更新1并更新了2，因为我在脑中完全翻转了textarea和richtext。 抱歉!

更新4好的，我现在几乎已经解决了。 我只是有一个小问题，在初始化时，如果我不关注contenteditable div并切换到源视图\\ textarea。 textarea被清空，当我回到RTE视图\\ contenteditable div时，它被清空。 来自空的textarea \\ source。 我正在努力解决问题。

Answer 1

您可以挂钩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());
}); 

Answer 2

您可能想使用jQuery和以下功能？

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

Answer 3

一切正常。 您的示例中的选择器是错误的想法：

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());
  });​

演示

UPD：

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

新的演示是把内容从div到textarea上单击事件。