• 百度UEditor基本使用


    1 首先奉上链接其http://ueditor.baidu.com/website/index.html 更多更详细内容在其官方api上,本文只是一个归类总结性文章。

    2 下载链接http://ueditor.baidu.com/website/download.html  本人是.net开发人员就直接下载了最新的.net版本,可以直接把下载好的代码直接放到项目中(需要注意的是,它里面有后代ashx代码,需要添加其中bin目录下的Json.net)。

    3 看demo.html

    首先导入导入三个配置文件

    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>//此处注意顺序不能变

    在代码中创建一个编辑器容器 此容器为一个 <script id="container" name="content" type="text/plain" style="1024px;height:500px;"> </script>//建议设置样式,

    这个script标签就是ueditor的容器我们内容就是在这里面显示的

    再创建一个script标签写js代码 

    初始化ueditor的代码为  var ue = UE.getEditor('editor');此出单引号里面的为编辑器容器id 保存刷新页面就可以看到最简单的editor的demo了。

    4 介绍一下Editor的常用方法

    本人喜欢无论获取对象用工厂模式 

    var editor = UE.getEditor('lxt');
    function GetEditor() {
    if (editor==null||editor==undefined) {
    editor = UE.getEditor('lxt');
    }
    return editor;
    }//以后获取ediotr 对象直接用GetEditor方法就行了。

    1)获取编辑器里面的内容(html代码): GetEditor().getContent();

    2)设置编辑器里面的内容(支持html代码): GetEditor().setContent("李啸天", boolean是否追加);

    3)获取编辑器里面的纯文本: GetEditor().getContentTxt();

    4)获取编辑器带格式的纯文本(也就是包含一些<img>等标签的文本,但是不包含文本的格式,上一个方法不包含<ima>等标签): GetEditro()..getPlainTxt();

    5)判断编辑器是否有内容返回true或者false GetEditor().hasContents();

    6)使编辑器获取焦点:  GetEditor().focus();

    7)判断编辑器是否获取焦点 :GetEditor().isFocus();

    8)使编辑器失去焦点:GetEditor().blur();

    9)获取编辑器选中的文本:可以封装为一个方法,具体代码的意思可以看一下百度api链接为 http://ueditor.baidu.com/doc/#UE.dom.Range:select()

    function getText() {
    //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
    var range = UE.getEditor('editor').selection.getRange();
    range.select();
    var txt = UE.getEditor('editor').selection.getText();
    alert(txt)
    }

    10)使编辑器不可编辑:GetEditor().setDisabled();里面可以设置参数string或者Array[string]设置除此之外为disable,各个按钮代表的英文在http://fex.baidu.com/ueditor/#start-toolbar

    11)是编辑器可以编辑:GetEditor().setEnabled(); 

    12)显示隐藏编辑器方法为:setShow(), setHide()

    13)设置编辑器高度:setHeight(Number heigth);

    5 定制工具栏图标

     1). 方法一:修改 ueditor.config.js 里面的 toolbars 2). 方法二:实例化编辑器的时候传入 toolbars 参数

    6上传功能

     1)首先需要在ueditor.config.js里制定处理上传的handler.ashx,下载的demo中叫做controller.ashx 开发者可以随意更换其位置,本人习惯把它放在根目录或者handler文件夹下,如果在根目录下,就把地址改为serverUrl: "/controller.ashx",另外提一下配置文件中获取的url就是配置文件所在的路径如http://localhost:4761/utf8-net/

    2)把config.json文件放在项目根目录下,也可以在Config.cs进行设置进行

    3)修改config.json里面的路径以及需要修改的配置,里面写的很详细 如imageUrlPrefix为图片访问路径前缀一般为空就可以了,imagePathFormat上传保存路径,可以根据其提示进行各种设置。

  • 相关阅读:
    Android Camera Api的心得
    apache禁止訪问某些文件或文件夹的方法
    查询和删除数据表中反复数据的sql
    设计模式C++实现——外观模式
    排序(杭电1106)
    《JAVA程序设计》实训第一天——《猜猜看》游戏
    CSS3选择器(全)
    【原创】TCP超时重传机制探索
    使用Win32 API实现生产者消费者线程同步
    翻翻git之---溜的飞起的载入效果AVLoadingIndicatorView
  • 原文地址:https://www.cnblogs.com/lxtblogs/p/4805079.html
Copyright © 2020-2023  润新知