我正在使用Bootstrap Wysiwyg Editor。它看起来不错,我的文字和插入的图像添加到内容区域。保存并加载Bootstrap Wysiwyg编辑器内容
我只需要将内容保存到数据库中,当用户从下拉菜单中加载模板名称时,我需要从数据库中填充编辑器。
我试过$('#editor').html()
但不知道如何我可以将此数据发送到服务器
注:使用ASP.Net MVC
我正在使用Bootstrap Wysiwyg Editor。它看起来不错,我的文字和插入的图像添加到内容区域。保存并加载Bootstrap Wysiwyg编辑器内容
我只需要将内容保存到数据库中,当用户从下拉菜单中加载模板名称时,我需要从数据库中填充编辑器。
我试过$('#editor').html()
但不知道如何我可以将此数据发送到服务器
注:使用ASP.Net MVC
使用AJAX来保存数据(反之亦然负载)
$.ajax({ type: "POST", url: your_url, data: $('#editor').html(), success: success, dataType: dataType });
(我不知道它是不是最好的方法,但它的工作)
考虑一个简单的型号:
public class Contact
{
public string Notes { get; set; }
}
我用一个简单的jQuery脚本,以获得所见即所得的内容并把它变成一个隐藏的输入。
我会在用户点击“保存”按钮时自动执行此操作。
这里的JS:
<script language=javascript>
$(function() {
$('#NotesWysiwyg').wysiwyg();
$('#btnSave').bind('click', function() {
$("#Notes").val($("#NotesWysiwyg").html().replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'));
});
});
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>
在服务器端:
// Workaround : Encode WYSIWYG HTML
if (model.Notes != null)
model.Notes = WebUtility.HtmlDecode(model.Notes);
对于内容发送到服务器保存,它似乎是st raightforward,只需通过$(“#editor”)。html()获取数据并将其发送到服务器端。
对于加载数据到编辑器,这样做:
$("#editor").html("<div><ul><li>demo</li></ul></div>")
不要把逃出内容的编辑这样的:
大多数服务器侧视图转义输出,但编辑器无法接受转义格式。
希望这会有所帮助。
我只是使用了一个隐藏的textarea,我从表单提交中的编辑器复制了html。
我还使用了数据属性来给出目标输入名称,以便您可以在同一页上使用此方法和多个编辑器。
编辑HTML:
<div id="editor" name="editor" data-target="content" class="form-control wysiwyg mt-lg">*<?php fill the value on loading ?>*</div>
隐藏textarea的HTML:
<textarea type="text" class="hidden" name="content" id="content"></textarea>
提交按钮HTML:
<button type="submit" class="btn btn-danger copyeditor">Save</button>
JS:
$(".copyeditor").on("click", function() {
var targetName = $("#editor").attr('data-target');
$('#'+targetName).val($('#editor').html());
});
个
CSS:
.hidden {
display: none !important;
visibility: hidden !important;
}
尝试一些选项(加载数据)后,我已经找到了解决方案。
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);
您必须用带有内容的div的id和带有要加载的字符串的STRING1替换div1。 我希望有所帮助。
加载数据怎么样?显示一些例子,plz。 – bandit