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>

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, "<").replace(/>/g, ">");
    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

效果图：