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，以满足其需求。我会继续做一些研究。

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

Demo

UPD：

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

new demo将点击事件中的div内容放入textarea。

将textarea中的html粘贴到Contenteditable Div

3 个答案: