保存并加载Bootstrap Wysiwyg编辑器内容

Save and Load Bootstrap Wysiwyg editor content

本文关键字：编辑器 Wysiwyg Bootstrap 加载 保存      更新时间：2023-09-26

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

所有我需要的是我想保存到数据库中的内容，再次当用户从下拉菜单加载模板名称时，我需要从数据库中填充编辑器。

我尝试了$('#editor').html()，但不确定如何将此数据发送到服务器

注:使用ASP.Net MVC

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

考虑一个简单的模型:

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

使用ajax保存数据(反之亦然)

<>之前. ajax({美元类型:"文章",url: your_url,编辑数据:$ (' # '). html (),成功:成功,数据类型:数据类型}）;

要将内容发送到服务器保存，看起来很简单，只需通过$("#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;")

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

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

我还使用了一个data属性来指定目标输入名称，以便您可以在同一页面上的多个编辑器中使用此方法。

编辑器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;
}

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

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替换为要加载的字符串。

相关文章：