UE百度编辑器的使用

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 id="container" name="content" type="text/plain" style="width: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上传保存路径，可以根据其提示进行各种设置。

百度编辑器自定义的写法

// 百度编辑器初始化设置

 var update_ue = UE.getEditor('taskMessage',{maximumWords:20000,toolbars:[['bold','italic','underline','fontborder','rowspacingtop', 'rowspacingbottom', 'lineheight','paragraph', 'fontfamily', 'fontsize','customstyle','inserttable', 'deletetable','insertorderedlist', 'insertunorderedlist']],autoHeightEnabled:true,initialFrameHeight:220,initialFrameWidth:680,textarea:"context"});

UE百度编辑器的使用相关推荐

解决：百度编辑器UEditor，怎么将图片保存到图片服务器，或者上传到ftp服务器的问题（如果你正在用UE，这篇文章值得你看下）
解决:百度编辑器UEditor,怎么将图片保存到图片服务器,或者上传到ftp服务器的问题(如果你正在用UE,这篇文章值得你看下) 参考文章: (1)解决:百度编辑器UEditor,怎么将图片保存到图片 ...
百度编辑器（ueditor）@功能之获取坐标
//获取百度编辑器的工具类var domUtils = UE.dom.domUtils;//获取编辑器的坐标var $ueditor_offset = $("#ueditor_0" ...
ueditor百度编辑器常见报错的解决方法
如果是第一次使用ueditor百度编辑器,或者对它不熟悉的情况下使用,会出现一些常见问题和报错.怎么使用建议参考ueditor官网,这里只谈一些常见错误. 问题:'UE' is not defind ...
又一编辑神器-百度编辑器-Ueditor
(Lionden<hsdlionden@gmail.com> 转载说明) 前段时间发表过一篇关于"KindEditor在JSP中使用"的博文.这几天在沈阳东软进行Jav ...
Ueditor百度编辑器中的 setContent()方法的使用
百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容函数说明:setContent(string,boolean); 参数string ...
百度php editor图片上传到其他盘,百度编辑器Editor图片独立上传
将百度编辑器中的图片独立出来上传: html:代码 var myEditorImage,d,myEditorImage = new UE.ui.Editor(); myEditorImage.rend ...
html编辑器不支持自定义样式,百度编辑器自定义按钮样式问题（写在cssRules不起做用）？...
UE.registerUI('dialog',function(editor,uiName){ //创建dialog var dialog = new UE.ui.Dialog({ //指定弹出层中页 ...
百度在线编辑器显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
作为一名程序员,在文章中经常会插入各种代码,大部分代码都不会发生问题,但div和script标签是经常会被使用到的. 而在之前的文章编写过程中,插入JS代码后,第一次文章会显示正常,而之后在后台编辑器 ...
手机token记录、支付宝、个推、goeasy、手机前端框架、阿里大于、百度编辑器、秀米集成解决方案
goeasy:web页面推送解决方案包名:goeasy jar:goeasy-sdk-0.3.5.jar gson-2.3.1.jar slf4j-api-1.7.2.jar 个推:app通知栏等推 ...

UE百度编辑器的使用

UE百度编辑器的使用相关推荐

最新文章

热门文章