保存并加载Bootstrap Wysiwyg编辑器内容 [英] Save and Load Bootstrap Wysiwyg editor content

问题描述

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

I am using Bootstrap Wysiwyg Editor. It looks great and adding my text and inserted image into the content area.

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

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.

我试过 $（'＃editor'）。html（）但不知道如何将这些数据发送到服务器

I tried $('#editor').html() but not sure how can i send this data to server

注意：使用 ASP.Net MVC

推荐答案

（我不知道这是不是最好的方式，但它有效）

(I don't know if it is the best way, but it's working)

考虑一个简单模型：

public class Contact
{
    public string Notes { get; set; }
}

我正在使用一个简单的jquery脚本来获取wysiwyg并将其置于隐藏的输入中。

I'm using a simple jquery script in order to get the content of the wysiwyg and put it into a hidden input.

当用户点击保存按钮时，我会自动执行此操作。

I do this automatically when the user clicks on the "Save" button.

这是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);

这篇关于保存并加载Bootstrap Wysiwyg编辑器内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！