问题
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
回答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, '&').replace(/</g, '<').replace(/>/g, '>'));
});
});
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);
回答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 });
回答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.
回答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;
}
回答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 = '>';
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.
来源:https://stackoverflow.com/questions/16875932/save-and-load-bootstrap-wysiwyg-editor-content