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

Question

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.

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

Note: Using ASP.Net MVC

Answer 1

(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.

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

Here's the JS :

<script language=javascript>

$(function () {
    $('#NotesWysiwyg').wysiwyg();
    $('#btnSave').bind('click', function () {
        $("#Notes").val($("#NotesWysiwyg").html().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
    });
});

The HTML content :

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

Answer 2

Use ajax to save the data (and vice versa for load)

$.ajax({
  type: "POST",
  url: your_url,
  data: $('#editor').html(),
  success: success,
  dataType: dataType
});

Answer 3

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.

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.

Answer 4

I simply used an hidden textarea and I copied html from the editor on form submit.

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 :

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

Hidden Textarea Html :

<textarea type="text" class="hidden" name="content" id="content"></textarea>

Submit Button 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;
}

Answer 5

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 = '&gt;';
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.