知问前端--编辑器插件

知问前端

编辑器（Editor），一般用于类似于word一样的文本编辑器，只不过是编辑为HTML格式的。有纯JS类型的，还有jQuery插件类型的。

一、编辑器简介

我们使用的jQuery版本比较新，但尚未全面使用2.0的版本，因为IE6,7,8被抛弃了。而恰恰在这个时期，就出现编辑器插件的两极分化的局面。高端和先进的HTML编辑器已经全面不支持IE6,7,8了，而老版本的HTML编辑器，在使用jQuery1.10.x版本时会发生这样那样的不兼容。为此，还需要引入jquery-migrate-1.2.1.js向下兼容插件才能解决一部分问题。并且需要手动修改源代码保证正常运行。

二、引入uEditor

第一步：引入jquery-migrate-1.2.1.js文件，排除编辑器低版本的问题。
第二步：把编辑器文件夹包放入根目录下。
第三步：引入uEditor.js和uEditor.css两个文件。
第四步：插入textarea，设置规定值。
第五步：jQuery调用运行。
HTML部分：

<button id="question_button">提问</button>
<form id="question" title="提问">
    <p>
        <label for="title">问题名称：</label>
        <input type="text" name="title" style="width: 390px;" class="text" id="title"></input>
    </p>
    <p>
        <textarea class="uEditorCustom" name="content">请输入问题描述！</textarea>
    </p>
</form>
<div id="error">请登录后操作...</div>

jQuery部分代码：

$("#question_button").button({
    icons:{
        primary:"ui-icon-lightbulb",
    }
}).click(function() {
    if($.cookie("user")) {
        $("#question").dialog("open");
    } else {
        $("#error").dialog("open");
        setTimeout(function() {
            $("#error").dialog("close");
            $("#login").dialog("open");
        }, 1000);
    }
});
$("#question").dialog({
    autoOpen : false,
    modal : true,
    resizable:false,
    width:500,
    height:360,
    buttons:{
        '发布':function() {
            $(this).submit();
        }
    }
});
$("#error").dialog({
    autoOpen:false,
    modal:true,
    closeOnEscape:false, // 禁用Esc键关闭对话框
    resizable:false,
    draggable:false,
    width:180,
    //height:80
    height:50
}).parent().find(".ui-widget-header").hide();
$(".uEditorCustom").uEditor(); // HTML代码中<textarea>中定要添加类选择符uEditorCustom才可