UEditor的使用 - s0611163－IT工程師數位筆記本

文章出處

一、引用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>

View Code

三、創建編輯器對象：

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

});

View Code

四、保存數據：

//添加
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);
            }
        }
    });
}

View Code

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

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

View Code

效果圖：