UEditor的使用

一、引用CSS和JS：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="/Content/Plugins/UEditor/ueditor.config.bbs.js"></script>
<script type="text/javascript" src="/Content/Plugins/UEditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/Plugins/UEditor/lang/zh-cn/zh-cn.js"></script>      

View Code

二、HTML：

<!-- 加載編輯器的容器 -->
<script id="ueditor" type="text/plain" style="width: 99%; height: 300px;"></script>      

三、建立編輯器對象：

var ue;

$(function () {
    $(function () {
        ue = UE.getEditor('ueditor', {
            maximumWords: 4000 //允許的最大字元數
        }); //建立和引用編輯器執行個體
        ue.addListener('ready', function (editor) {
            // ue.setHeight(500); //編輯器家在完成後，設定高度為300預設關閉了自動長高
        });
        ue.addListener("contentChange", function () {
            SimpoValidate.removehilight($("#ueditor").find("iframe").parent());
        });
    });

});      

四、儲存資料：

//添加
function btnAdd() {
    var title = $("#Title").val();
    var contents = ue.getContent().replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var txt = ue.getContentTxt();
    var boardId = "@board.Id";

    $.ajax({
        url: "/BBS/Board/SaveTopicAdd",
        type: "POST",
        dataType: "json",
        data: { BoardId: boardId, Title: title, Contents: contents, Txt: txt },
        success: function (data) {
            if (fnet.ajax.success(data)) {
                fnet.msg.info("發帖成功");
                back();
            }
            else {
                fnet.msg.error(data.msg);
            }
        }
    });
}      

五、編輯器的工具欄配置：

, toolbars: [[
        'undo', 'redo',
        '|', 'emotion', 'scrawl', 'insertimage', 'insertvideo', 'music',
        '|', 'preview', 'fullscreen', 'drafts'
]]      

效果圖：