javascript 保存和加载 Bootstrap 所见即所得编辑器内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16875932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save and Load Bootstrap Wysiwyg editor content
提问by Billa
I am using Bootstrap Wysiwyg Editor. It looks great and adding my text and inserted image into the content area.
我正在使用Bootstrap 所见即所得编辑器。它看起来很棒，并将我的文本和插入的图像添加到内容区域中。
All i need is i want to save the content into database and again when user loads the template name from dropdown i need to fill the editor from the database.
我所需要的只是将内容保存到数据库中，当用户从下拉列表中加载模板名称时，我需要从数据库中填充编辑器。
I tried $('#editor').html()but not sure how can i send this data to server
我试过了，$('#editor').html()但不确定如何将这些数据发送到服务器
Note:Using ASP.Net MVC
注意：使用ASP.Net MVC
回答by Fusor
(I don't know if it is the best way, but it's working)
（我不知道这是否是最好的方法，但它有效）
Consider a simple model :
考虑一个简单的模型：
public class Contact
{
public string Notes { get; set; }
}
I'm using a simple jquery script in order to get the content of the wysiwyg and put it into a hidden input.
我正在使用一个简单的 jquery 脚本来获取所见即所得的内容并将其放入隐藏的输入中。
I do this automatically when the user clicks on the "Save" button.
当用户单击“保存”按钮时，我会自动执行此操作。
Here's the JS :
这是JS：
<script language=javascript>
$(function () {
$('#NotesWysiwyg').wysiwyg();
$('#btnSave').bind('click', function () {
$("#Notes").val($("#NotesWysiwyg").html().replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'));
});
});
The HTML content :
HTML 内容：
<div id="NotesWysiwyg"style="height:166px; width:395px; border:1px solid lightgray;display:table-cell"></div>
@Html.HiddenFor(contact => contact.Notes)
<button id="btnSave" type="submit">Save</button>
On the server side :
在服务器端：
// Workaround : Encode WYSIWYG HTML
if (model.Notes != null)
model.Notes = WebUtility.HtmlDecode(model.Notes);
回答by Sven
Use ajax to save the data (and vice versa for load)
使用ajax保存数据（加载反之亦然）
$.ajax({
type: "POST",
url: your_url,
data: $('#editor').html(),
success: success,
dataType: dataType
});
回答by Andrew Feng
For sending the content to server for saving, it seems straightforward, just get the data by $("#editor").html() and send it to the server side.
要将内容发送到服务器进行保存，看起来很简单，只需通过 $("#editor").html() 获取数据并将其发送到服务器端即可。
For loading the data to editor, do this:
要将数据加载到编辑器，请执行以下操作：
$("#editor").html("<div><ul><li>demo</li></ul></div>")
Do NOT put the escaped content to the editor like this:
不要像这样将转义的内容放到编辑器中：
$("#editor").html("<div><ul><li>demo</li></ul></div>")
Most server side views escape output, but editor cannot accept the escaped format.
大多数服务器端查看转义输出，但编辑器不能接受转义格式。
Hope this helps.
希望这可以帮助。
回答by Fran?ois-Xavier Gourvès
I simply used an hidden textarea and I copied html from the editor on form submit.
我只是使用了一个隐藏的文本区域，然后在表单提交时从编辑器中复制了 html。
I also used a data attribute to give the target input name so you can use this method with several editor on the same page.
我还使用了一个数据属性来指定目标输入名称，以便您可以在同一页面上的多个编辑器中使用此方法。
Editor Html :
编辑器 HTML :
<div id="editor" name="editor" data-target="content" class="form-control wysiwyg mt-lg">*<?php fill the value on loading ?>*</div>
Hidden Textarea Html :
隐藏的文本区域 Html ：
<textarea type="text" class="hidden" name="content" id="content"></textarea>
Submit Button html :
提交按钮 html ：
<button type="submit" class="btn btn-danger copyeditor">Save</button>
Js :
JS：
$(".copyeditor").on("click", function() {
var targetName = $("#editor").attr('data-target');
$('#'+targetName).val($('#editor').html());
});
css :
css :
.hidden {
display: none !important;
visibility: hidden !important;
}
回答by javaboygo
After trying some options (loading data), i have found a solution.
在尝试了一些选项（加载数据）后，我找到了一个解决方案。
var shortdescrip = STRING1;
var findInit = '<';
var reInit = new RegExp(findInit,'g');
shortdescrip = shortdescrip.replace(reInit, '<');
var findOut = '>';
var reOut = new RegExp(findOut, 'g');
shortdescrip = shortdescrip.replace(reInit, '<').replace(reOut,'>');
$("#div1").html(shortdescrip);
You must replace div1 by the id of the div with the content and STRING1 with the string to load. I hope that helps.
您必须将 div1 替换为内容的 div id 和要加载的字符串的 STRING1。我希望这有帮助。
