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，因为我在大脑中完全翻转了 textarea 和 Richtext。对不起！

更新 4 好的，我现在几乎解决了。我只有一个小问题，在初始化时，如果我不关注 contenteditable div 并切换到源视图\textarea。textarea 被清空，然后当我返回 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());
});

​新的 演示，将内容从div点击textarea事件中。

于 2012-08-31T06:39:25.590 回答
0

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

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