您的位置:首页 > 产品设计 > UI/UE

很好用的百度ueditor1_2_3_0_utf8_net富文本框,功能强大

2013-07-01 15:35 302 查看
Uedit下载地址:http://ueditor.baidu.com/website/

//Head部分代码如下

//*************************************************************************************
    <script type="text/javascript">

//注意此处:富文本控件在项目中的相对路径

        window.UEDITOR_HOME_URL = "../ueditor1_2_3_0_utf8_net/";  //editor_all.js 里需要用到的地址名

    </script>

    <script type="text/javascript" charset="utf-8" src="../ueditor1_2_3_0_utf8_net/editor_config.js"></script>

    <script type="text/javascript" charset="utf-8" src="../ueditor1_2_3_0_utf8_net/_examples/editor_api.js"></script>

//*************************************************************************************

//Body部分代码如下

//*************************************************************************************

             <textarea id="txteditor" name="txteditor" runat="server" cols="30" rows="10" style=" margin-left:140px;width:1000px;">

                             <p>请输入内容介绍</p>

                 </textarea>

                 <script language="javascript" type="text/javascript">  

                      var editor = new baidu.editor.ui.Editor();

                            editor.render("txteditor");

                 </script>

//*************************************************************************************

                    

//body 后面的脚本(此部分代码可省略)

//*************************************************************************************

<script type="text/javascript">

    ue.addListener("selectionchange", function () {

        var state = ue.queryCommandState("source");

        var btndiv = document.getElementById("btns");

        if (btndiv && state == -1) {

            disableBtn("enable");

        }

    });

    function getContent() {

        $("#txtHTMLContent").html(ue.getContent());

        alert($("#txtHTMLContent").val());

    }

    function setEnabled() {

        ue.setEnabled();

        enableBtn();

    }

    function getText() {

        //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容

        var range = ue.selection.getRange();

        range.select();

        var txt = ue.selection.getText();

        alert(txt)

    }

    function getContentTxt() {

        var arr = [];

        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");

        arr.push("编辑器的纯文本内容为:");

        arr.push(ue.getContentTxt());

        alert(arr.join("\n"));

    }

    function hasContent() {

        var arr = [];

        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");

        arr.push("判断结果为:");

        arr.push(ue.hasContents());

        alert(arr.join("\n"));

    }

    function setFocus() {

        ue.focus();

    }

    function deleteEditor() {

        disableBtn();

        ue.destroy();

    }

    function disableBtn(str) {

        var div = document.getElementById('btns');

        var btns = domUtils.getElementsByTagName(div, "input");

        for (var i = 0, btn; btn = btns[i++]; ) {

            if (btn.id == str) {

                domUtils.removeAttributes(btn, ["disabled"]);

            } else {

                btn.setAttribute("disabled", "true");

            }

        }

    }

    function enableBtn() {

        var div = document.getElementById('btns');

        var btns = domUtils.getElementsByTagName(div, "input");

        for (var i = 0, btn; btn = btns[i++]; ) {

            domUtils.removeAttributes(btn, ["disabled"]);

        }

    }

</script>
</html>

后台就可以直接获得文本内容了:通过:Server.HtmlEncode(txteditor.Value);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: