1. 首页
  2. 问题列表
  3. 将html从文本区粘贴到可内容分区
提问者：小点点

将html从文本区粘贴到可内容分区


我正在使用包装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>

我可以成功地从编辑器中获取html并将其放入文本区域，但是当我编辑文本区域时，我似乎无法将其粘贴回富文本。

提前谢谢！

更新1
好的，看起来

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

工作正常，但不是相反的方式（从文本区到富文本）。

更新2它看起来很不稳定，它部分工作，但表现奇怪：我不能完全从文本区获取内容，并将HTML粘贴到可满足的内容中。我会继续做一些研究。

更新3我刚刚更新了更新1和更新2，因为我完全翻转了我大脑中的文本区域和富文本。抱歉！

更新4好的，我现在差不多解决了。我只是有一个小问题，在初始化时，如果我没有聚焦contenteditable div并切换到source view\textarea。textarea被清空，当我返回RTE view\contenteditable div时，它被清空。从空的textarea\source。我正在做一个工作。


共3个答案

匿名用户

您可以钩住textarea的onBlur事件来复制文本并将其粘贴到编辑器richtext中

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

编辑

另一方面，您可以使用以下代码段

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

匿名用户

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

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

匿名用户

一切正常。示例中的选择器是不正确的：

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点击事件。

相关问题