zoukankan      html  css  js  c++  java
  • 百度编辑器UEditor

    1,首先在head标签里引入编辑器的js文件

    <script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ued/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ued/ueditor.all.min.js"> </script>
        <!--建议手动加载语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
        <script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ued/lang/zh-cn/zh-cn.js"></script>

    2,在需要使用的地方引入编辑器

    <div class="inp_div">
                <span class="inp_lx">详细内容:</span>
                <div>
                   <script id="editor" type="text/plain" style="900px;height:500px;margin-left: 160px;"></script>  <!--引入编辑器-->
           </div> 
    </div>

    3,实例化编辑器

    <script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
        function isFocus(e){
            alert(UE.getEditor('editor').isFocus());
            UE.dom.domUtils.preventDefault(e)
        }
        function setblur(e){
            UE.getEditor('editor').blur();
            UE.dom.domUtils.preventDefault(e)
        }
        function insertHtml() {
            var value = prompt('插入html代码', '');
            UE.getEditor('editor').execCommand('insertHtml', value)
        }
        function createEditor() {
            enableBtn();
            UE.getEditor('editor');
        }
        function getAllHtml() {
            alert(UE.getEditor('editor').getAllHtml())
        }
        function getContent() {
            var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为:");
            arr.push(UE.getEditor('editor').getContent());
            alert(arr.join("
    "));
        }
        function getPlainTxt() {
            var arr = [];
            arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
            arr.push("内容为:");
            arr.push(UE.getEditor('editor').getPlainTxt());
            alert(arr.join('
    '))
        }
        function setContent(isAppendTo) {
            var arr = [];
            arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
            UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
            alert(arr.join("
    "));
        }
        function setDisabled() {
            UE.getEditor('editor').setDisabled('fullscreen');
            disableBtn("enable");
        }
    
        function setEnabled() {
            UE.getEditor('editor').setEnabled();
            enableBtn();
        }
    
        function getText() {
            //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
            var range = UE.getEditor('editor').selection.getRange();
            range.select();
            var txt = UE.getEditor('editor').selection.getText();
            alert(txt)
        }
    
        function getContentTxt() {
            var arr = [];
            arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
            arr.push("编辑器的纯文本内容为:");
            arr.push(UE.getEditor('editor').getContentTxt());
            alert(arr.join("
    "));
        }
        function hasContent() {
            var arr = [];
            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
            arr.push("判断结果为:");
            arr.push(UE.getEditor('editor').hasContents());
            alert(arr.join("
    "));
        }
        function setFocus() {
            UE.getEditor('editor').focus();
        }
        function deleteEditor() {
            disableBtn();
            UE.getEditor('editor').destroy();
        }
        function disableBtn(str) {
            var div = document.getElementById('btns');
            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                if (btn.id == str) {
                    UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                } else {
                    btn.setAttribute("disabled", "true");
                }
            }
        }
        function enableBtn() {
            var div = document.getElementById('btns');
            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            }
        }
    
        function getLocalData () {
            alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
        }
    
        function clearLocalData () {
            UE.getEditor('editor').execCommand( "clearlocaldata" );
            alert("已清空草稿箱")
        }
    </script>

    4,获取编辑器里的内容

    var content = [];
            content.push(UE.getEditor('editor').hasContents());
            if(content[0]==false){
                alert("请填写详细内容!")
                return false;
            }else{
                var content = [];
                content.push(UE.getEditor('editor').getContent());
                console.log(content[0])
            }

    5,获取和设置上一次的内容

    <div class="inp_div">
                <span class="inp_lx">详细内容:</span>
                <div>
                    <script id="editor" type="text/plain" style="900px;height:500px;margin-left: 160px;"></script>
                </div>
                <textarea name='content' style="display: none;" id="content">prevContent</textarea>  //prevContent就是上一次的内容,一般有后台保存好,再发回来,用文本域先保存
        </div>
      function fo(){
            ue.ready(function() {
                var con = document.getElementById('content').value; //获取文本域所保存的内容再设置回编辑器里
                ue.setContent( con , true);
            });
        }
        fo();
       
  • 相关阅读:
    【DFS】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem D. Divisibility Game
    【二分】【三分】【计算几何】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem L. Lines and Polygon
    【线段树】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem J. Jedi Training
    【贪心】【后缀自动机】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem E. Enter the Word
    【转载】随机生成k个范围为1-n的随机数,其中有多少个不同的随机数?
    【推导】【贪心】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem H. Path or Coloring
    【枚举】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem D. Cutting Potatoes
    【找规律】【递归】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem F. Doubling
    【贪心】Codeforces Round #436 (Div. 2) D. Make a Permutation!
    【计算几何】【圆反演】计蒜客17314 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 G. Finding the Radius for an Inserted Circle
  • 原文地址:https://www.cnblogs.com/haqiao/p/8399325.html
Copyright © 2011-2022 走看看