码迷,mamicode.com
首页 > 其他好文 > 详细

UEditor实战分享(一)入门

时间:2014-08-02 15:12:53      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   os   io   

UEditor 介绍

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

1 入门体验    

1.1 下载编辑器

到官网下载 UEditor 最新版:[官网地址]

1.2 创建basic_config文件

解压下载的包,在解压后的目录创建一个目录为Demo,并在Demo目录下创建 basic_config.html 文件,填入下面的html代码

 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2           "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title>配置</title>
 6     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 7     <!--配置文件-->
 8     <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>    
 9     <!--ueditor.js 1.4.3最新版本-->
10     <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script>     
11     <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
12     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
13     <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
14 </head>
15 <body>
16     <div>
17         <h1>配置demo</h1>
18         <script id="editor" type="text/plain" style="width:100%;height:500px;">
19         hello world!  //初始化内容
20         </script>
21     </div>  
22     <script type="text/javascript">
23         //实例化编辑器
24         //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor‘)就能拿到相关的实例
25         var ue = UE.getEditor(editor});     
26     </script>
27 </body>
28 </html>

 

1.3 在浏览器打开basic_config.html

如果看到了下面这样的编辑器,恭喜你,初次部署成功!

bubuko.com,布布扣

2.配置方式

2.1 配置ueditor.config.js

 ueditor.config.js是完整的配置文件,可以在这该文件里面配置整个编辑器的特性,文件里面的注释非常详细,修改默认配置请首先确保已经完全明确该参数的真实用途,在此不想做太多展开。

2.2 配置实例化编辑器

1 var ue = UE.getEditor(‘container‘, {
2     autoHeight: false,
3     @configName:@configValue //@configName:ueditor.config.js中配置项名称,@configValue是对应的值
4 });

 2.3 Hello world!

2.3.1 配置config实现

 1 initialContent:‘Hello world!‘ //初始化编辑器的内容 

2.3.2 编辑器赋值

1     <div>
2         <script id="editor" type="text/plain" style="width:100%;height:500px;">
3         hello world!
4         </script>
5     </div>  

2.3.3 实例化编辑器

1 //实例化编辑器
2 var ue = UE.getEditor(‘editor‘,{
3         initialContent:‘Hello world!‘
4         });     

好了,第一篇先介绍到这,请期待第二篇关于UEditor定制方面的介绍。

 

 

 

UEditor实战分享(一)入门,布布扣,bubuko.com

UEditor实战分享(一)入门

标签:style   blog   http   color   java   使用   os   io   

原文地址:http://www.cnblogs.com/xiaoqingwu/p/3886775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!