![](/img/trans.png)
[英]Strip HTML formatting from contenteditable div but preserve line breaks on paste?
[英]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());
});
新的演示是把內容從div
到textarea
上單擊事件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.