保存並加載Bootstrap Wysiwyg編輯器內容

Question

我正在使用Bootstrap Wysiwyg Editor。它看起來不錯，我的文字和插入的圖像添加到內容區域。

我只需要將內容保存到數據庫中，當用戶從下拉菜單中加載模板名稱時，我需要從數據庫中填充編輯器。

我試過$('#editor').html()但不知道如何我可以將此數據發送到服務器

注：使用ASP.Net MVC

Answer 1

使用AJAX來保存數據（反之亦然負載）

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

Answer 2

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

考慮一個簡單的型號：

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

Answer 3

對於內容發送到服務器保存，它似乎是st raightforward，只需通過$（「＃editor」）。html（）獲取數據並將其發送到服務器端。

對於加載數據到編輯器，這樣做：

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

不要把逃出內容的編輯這樣的：

​​

大多數服務器側視圖轉義輸出，但編輯器無法接受轉義格式。

希望這會有所幫助。

Answer 4

我只是使用了一個隱藏的textarea，我從表單提交中的編輯器複製了html。

我還使用了數據屬性來給出目標輸入名稱，以便您可以在同一頁上使用此方法和多個編輯器。

編輯HTML：

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

隱藏textarea的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; 
} 

Answer 5

嘗試一些選項（加載數據）後，我已經找到了解決方案。

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

您必須用帶有內容的div的id和帶有要加載的字符串的STRING1替換div1。 我希望有所幫助。