UEditor API使用建议——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
UEditor API使用建议

发布作者:iuan   发布时间:2014-03-6   阅读次数:10248

WEB发展以来依托后台的富文本编辑器越来越花眼,开源的JS为根基的编辑器让我们这些站长越来越受益。他让我们免去了很多对于编辑文章的问题,以前的很崇拜的Kindeditor随着使用的关系发现很多问题随之而来,文章发布要转义,代码的二次生成问题,但是伴随着那个年代,我也渐渐的将他的API瞄了下下,其实是个很好的开源编辑器,后台我变心了改成了百度的UEditor,

这里就是要介绍UEditor的简单使用下载地址http://ueditor.baidu.com,直接引入两个核心文件


<script type="text/javascript" src="__ROOT__/Data/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__ROOT__/Data/ueditor/ueditor.all.min.js"></script>
我这里很习惯性的将一些配置写入到引用的页面中,当然你可以修改
ueditor.config.js
这个配置,为了使用方便我直接将其写在了静态页面中



<SCRIPT TYPE="text/javascript">
  window.UEDITOR_HOME_URL = '__ROOT__/Data/ueditor';
  window.onload = function (){
  window.UEDITOR_CONFIG.initialFrameWidth = 660;
  window.UEDITOR_CONFIG.initialFrameHeight = 200;
  window.UEDITOR_CONFIG.imageUrl = "{:U(GROUP_NAME . '/Blog/upload')}";
   window.UEDITOR_CONFIG.imagePath = "__ROOT__/Uploads/";
   window.UEDITOR_CONFIG.imageManagerPath = "__ROOT__/";
   UE.getEditor('content');
  }
</SCRIPT>
具体的配置项目,你可以参见
ueditor.config.js
这里有很多详细的解说,当然你也可以去官网,我只是个刚刚接触JQUERY和JS,对于UEditor可以配置他的工具栏,自主使用



window.UEDITOR_CONFIG.toolbars = [
          ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'removeformat','|', 'forecolor', 'backcolor', '|',
                 'fontfamily', 'fontsize', '|','justifyleft', 'justifycenter', 'justifyright', 
'justifyjustify', '|',
                'link', 'unlink',  '|',
          ]
    ]
    UE.getEditor('content');
  }

因为项目的需要,我需要将编辑器中文字动态的获取我去了官网找到了相应的API后台我发现了很简单的引用实例

getPlainTxt()
这个函数,但是我半天不会使用后台我进入源码发现了很多实例

var domUtils = UE.dom.domUtils;
var options = {
    imageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php",
    imagePath:"http://",

    scrawlUrl:UEDITOR_HOME_URL + "../yunserver/yunScrawlUp.php",
    scrawlPath:"http://",

    fileUrl:UEDITOR_HOME_URL + "../yunserver/yunFileUp.php",
    filePath:"http://",

    catcherUrl:UEDITOR_HOME_URL + "php/getRemoteImage.php",
    catcherPath:UEDITOR_HOME_URL + "php/",

    imageManagerUrl:UEDITOR_HOME_URL + "../yunserver/yunImgManage.php",
    imageManagerPath:"http://",

    snapscreenHost: location.host,
    snapscreenServerUrl:"http://"+ location.host +"/yunserver/yunSnapImgUp.php",
    snapscreenPath:"http://",
    snapscreenServerPort: 80,

    wordImageUrl:UEDITOR_HOME_URL + "../yunserver/yunImageUp.php",
    wordImagePath:"http://",

    getMovieUrl:UEDITOR_HOME_URL + "../yunserver/getMovie.php",
    videoUrl:UEDITOR_HOME_URL + "../yunserver/yunFileUp.php",
    videoPath:"http://",

    lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ?
 'zh-cn' : 'en',
    langPath:UEDITOR_HOME_URL + "lang/",

    webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",
    initialFrameWidth:860,
    initialFrameHeight:420,
    focus:true,
    shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor",
 "insertorderedlist", "insertunorderedlist"]
};

function setLanguage(obj) {
    var value = obj.value,
        opt = {
            lang:value
        };
    UE.utils.extend(opt, options, true);

    UE.delEditor("editor");
    //清空语言
    if( !UE.I18N[ opt.lang ] ) {
        UE.I18N = {};
    }
    UE.getEditor('editor', opt);
}
function isFocus(e){
    alert(ue.isFocus());
    UE.dom.domUtils.preventDefault(e)
}
function setblur(e){
    ue.blur();
    UE.dom.domUtils.preventDefault(e)
}
function insertHtml() {
    var value = prompt('插入html代码', '');
    ue.execCommand('insertHtml', value)
}
function createEditor() {
    enableBtn();
    UE.getEditor('editor', {
        initialFrameWidth:"100%"
    })
}
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("\n"));
}
function getPlainTxt() {
    var arr = [];
    arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    arr.push("内容为:");
    arr.push(UE.getEditor('editor').getPlainTxt());
    alert(arr.join('\n'))
}
function setContent(isAppendTo) {
    var arr = [];
    arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    alert(arr.join("\n"));
}
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("\n"));
}
function hasContent() {
    var arr = [];
    arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    arr.push("判断结果为:");
    arr.push(UE.getEditor('editor').hasContents());
    alert(arr.join("\n"));
}
function setFocus() {
    UE.getEditor('editor').focus();
}
function deleteEditor() {
    disableBtn();
    UE.getEditor('editor').destroy();
}
function disableBtn(str) {
    var div = document.getElementById('btns');
    var btns = domUtils.getElementsByTagName(div, "button");
    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, "button");
    for (var i = 0, btn; btn = btns[i++];) {
        domUtils.removeAttributes(btn, ["disabled"]);
    }
}

function getLocalData () {
    alert(ue.execCommand( "getlocaldata" ));
}
function clearLocalData () {
    ue.execCommand( "clearlocaldata" );
    alert("已清空草稿箱")
}

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

前端资源

热点文章

新闻资讯

标签云

友情赞助