3

我正在使用Bootstrap Wysiwyg Editor。它看起来很棒，并将我的文本和插入的图像添加到内容区域。

我只需要将内容保存到数据库中，当用户从下拉列表中加载模板名称时，我需要从数据库中填充编辑器。

我试过$('#editor').html()但不确定如何将这些数据发送到服务器

注意：使用ASP.Net MVC

4

5 回答 5

3

（我不知道这是否是最好的方法，但它正在工作）

考虑一个简单的模型：

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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
    });
});

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);
于 2013-07-02T14:16:46.497 回答
1

我只是使用了一个隐藏的文本区域，并在表单提交时从编辑器中复制了 html。

我还使用了一个数据属性来给目标输入名称，因此您可以在同一页面上将此方法与多个编辑器一起使用。

编辑器HTML：

<div id="editor" name="editor" data-target="content" class="form-control wysiwyg mt-lg">*<?php fill the value on loading ?>*</div>

隐藏的文本区域 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;
}
于 2015-03-31T08:37:15.080 回答
1

要将内容发送到服务器进行保存，看起来很简单，只需通过 $("#editor").html() 获取数据并将其发送到服务器端即可。

要将数据加载到编辑器，请执行以下操作：

$("#editor").html("<div><ul><li>demo</li></ul></div>")

不要像这样将转义的内容放到编辑器中：

$("#editor").html("&lt;div&gt;&lt;ul&gt;&lt;li&gt;demo&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;")

大多数服务器端视图转义输出，但编辑器不能接受转义格式。

希望这可以帮助。

于 2013-11-26T03:49:18.263 回答
1

使用 ajax 保存数据（反之加载）

$.ajax({
  类型：“发布”，
  网址：你的网址，
  数据：$('#editor').html(),
  成功：成功，
  数据类型：数据类型
});
于 2013-06-01T19:21:37.603 回答
0

在尝试了一些选项（加载数据）后，我找到了解决方案。

var shortdescrip = STRING1;
var findInit = '&lt;';
var reInit = new RegExp(findInit,'g');
shortdescrip = shortdescrip.replace(reInit, '<');
var findOut = '&gt;';
var reOut = new RegExp(findOut, 'g');

shortdescrip = shortdescrip.replace(reInit, '<').replace(reOut,'>');
$("#div1").html(shortdescrip);

您必须将 div1 替换为包含内容的 div 的 id，并将 STRING1 替换为要加载的字符串。我希望这会有所帮助。

于 2015-07-06T11:51:41.597 回答