百度UEditor基本使用
1 首先奉上链接其http://ueditor.baidu.com/website/index.html 更多更详细内容在其官方api上,本文只是一个归类总结性文章。
2 下载链接http://ueditor.baidu.com/website/download.html
3 看demo.html
首先导入导入三个配置文件
在代码中创建一个编辑器容器 此容器为一个
这个script标签就是ueditor的容器我们内容就是在这里面显示的
再创建一个script标签写js代码
初始化ueditor的代码为
4 介绍一下Editor的常用方法
本人喜欢无论获取对象用工厂模式
var editor = UE.getEditor('lxt');
function GetEditor() {
if (editor==null||editor==undefined) {
editor = UE.getEditor('lxt');
}
return editor;
}//以后获取ediotr 对象直接用GetEditor方法就行了。
1)获取编辑器里面的内容(html代码):
2)设置编辑器里面的内容(支持html代码):
3)获取编辑器里面的纯文本:
4)获取编辑器带格式的纯文本(也就是包含一些等标签的文本,但是不包含文本的格式,上一个方法不包含等标签): GetEditro()..getPlainTxt();
5)判断编辑器是否有内容返回true或者false
6)使编辑器获取焦点:
7)判断编辑器是否获取焦点 :GetEditor().isFocus();
8)使编辑器失去焦点:GetEditor().blur();
9)获取编辑器选中的文本:可以封装为一个方法,具体代码的意思可以看一下百度api链接为
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(),
13)设置编辑器高度:setHeight(Number heigth);
5 定制工具栏图标
6上传功能
2)把config.json文件放在项目根目录下,也可以在Config.cs进行设置进行
3)修改config.json里面的路径以及需要修改的配置,里面写的很详细 如imageUrlPrefix为图片访问路径前缀一般为空就可以了,imagePathFormat上传保存路径,可以根据其提示进行各种设置。
赞赏码
非学,无以致疑;非问,无以广识