簡體   English   中英

將textarea中的html粘貼到Contenteditable Div

[英]Paste html from textarea to Contenteditable Div

我正在使用包裝器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。 我正在努力解決問題。

您可以掛鈎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());
}); 

您可能想使用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());
});

新的演示是把內容從divtextarea上單擊事件。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM