百度UEditor基本使用

百度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标签就是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)获取编辑器带格式的纯文本(也就是包含一些等标签的文本,但是不包含文本的格式,上一个方法不包含等标签): 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();

}

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上传保存路径,可以根据其提示进行各种设置。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/114395.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 常用正则说明

    常用正则说明

    2021年10月31日
    40
  • setPositiveButton和setNegativeButton的区别[通俗易懂]

    setPositiveButton和setNegativeButton的区别[通俗易懂]setPositiveButton和setNegativeButton的区别和setNeutralButton的区别三者都是AlertDialog弹出框的按钮,都是封装好的button,只是显示的位置不同,项目中可根据情况选择使用,setNegativeButton一般用于确认,setNegativeButton一般用于取消。newAlertDialog.Builder(MainActivi…

    2022年6月28日
    50
  • WIN10系统开机一个WIFI都找不到,网络适配器里没有WLAN驱动,连接不了网络问题【耗时3天测试10多种方法】

    WIN10系统开机一个WIFI都找不到,网络适配器里没有WLAN驱动,连接不了网络问题【耗时3天测试10多种方法】目录1.前言2.出现的问题情况2.1找不到WIFI,连不了网。2.2网络适配器里没有WLAN选项3.解决方法(推荐按顺序进行)。1.先检查WLAN是否存在2.修改服务设置3.直接重启4.通过驱动软件修复电脑网络5.通过ccleaner修复注册表6.进入bios系统修改wireless设置7.重装系统(最好不要)8.博主问题的解决1.前言最近每天打开电脑时都会出现这样的情况,每次折腾半天,有时候运气好重启一下就…

    2022年7月11日
    45
  • UCML月份控件

    UCML月份控件扁平化版本效果图 找到项目中对应路径 BPObject UCML JS 中的 UCML Datebox js 这个文件若文件中无以下代码则插入 UCML DateYMBox function id UCML DateYMBox superclass constructor call this id 修改控件类型 UCML DateYMBox nbsp

    2025年11月13日
    6
  • vscode新建html文件并快速生成标准的html代码_用vscode写一个html页面

    vscode新建html文件并快速生成标准的html代码_用vscode写一个html页面在vscode中新建html文件的两种方法:第一个方法:1点击菜单【文件】,如图所示。2点击【新建文件】,如图所示。3就会创建一个没有命名的文件,如图所示。4点击选择语言开始,会弹出选择语言模式,在自动检测的下拉菜单中选择html,一个没有命名的html文件就创建好了。5点击保存或者另存为,给没有命名的html起个名字,可以起字母,数字,中文,起好名字,点击保存,一个html文件就创建好了。6我们在html文件上输入【!】叹号(在英文状态下),然后按键盘的【Tab】键,只

    2022年8月22日
    16
  • teamviwer-无限绑定

    teamviwer-无限绑定

    2021年5月18日
    164

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号