[转] http://fex.baidu.com/ueditor/

UEditor 介绍

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

1 入门部署和体验

1.1 下载编辑器

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

1.2 创建demo文件

解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>ueditor demo</title>
  7. </head>
  8.  
  9. <body>
  10.     <!-- 加载编辑器的容器 -->
  11.     <script id="container" name="content" type="text/plain">
  12.         这里写你的初始化内容
  13.     </script>
  14.     <!-- 配置文件 -->
  15.     <script type="text/javascript" src="ueditor.config.js"></script>
  16.     <!-- 编辑器源码文件 -->
  17.     <script type="text/javascript" src="ueditor.all.js"></script>
  18.     <!-- 实例化编辑器 -->
  19.     <script type="text/javascript">
  20.         var ue = UE.getEditor('container');
  21.     </script>
  22. </body>
  23.  
  24. </html>
  1.  

1.3 在浏览器打开demo.html

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

1.4 传入自定义的参数

编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器：

  1. var ue = UE.getEditor('container', {
  2.     autoHeight: false
  3. });
  1.  

配置项也可以通过 ueditor.config.js 文件修改，具体的配置方法请看前端配置项说明

1.5 设置和读取编辑器的内容

通 getContent 和 setContent 方法可以设置和读取编辑器的内容

  1. var ue = UE.getContent();
  2. //对编辑器的操作最好在编辑器ready之后再做
  3. ue.ready(function() {
  4.     //设置编辑器的内容
  5.     ue.setContent('hello');
  6.     //获取html内容，返回: <p>hello</p>
  7.     var html = ue.getContent();
  8.     //获取纯文本内容，返回: hello
  9.     var txt = ue.getContentTxt();
  10. });
  1.  

UEditor富文本编辑器的使用 http://fex.baidu.com/ueditor/的更多相关文章

  1. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

  2. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  3. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  4. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  5. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  6. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  7. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  8. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

  9. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

随机推荐

  1. jQuery可放大预览的图片滑块

    在线演示 本地下载

  2. 20145240 《Java程序设计》第九周学习总结

    20145240 <Java程序设计>第九周学习总结 教材学习内容总结 JBDC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商对接口直接操作,开发人员无须接触底层数 ...

  3. debug（实验）

    一.用到的简单的DOS命令: cd\ ——首先要用cd\ 退回到根目录C>下 dir ——显示文件列表 md hb ——建立hb子目录 cd hb ——进入hb子目录 copy d:\dos\m ...

  4. jack server 常见错误解决方法【转】

    本文转载自:https://blog.csdn.net/qq_27061049/article/details/70156200 jack 服务常见错误解决方法 当你编译Android时,你不需要修改 ...

  5. ubuntu centos macos 配置上网代理

    因为我国强大的GFW,导致很多国外的应用无法安装,因为需要在系统中配置http/https代理. Ubuntu代理配置 配置方式非常简单,在~/.bashrc文件中增加: echo "exp ...

  6. RHEL 7 安装 ngnix

    安装ngnix yum install -y make apr* autoconf automake curl curl-devel gcc gcc-c++ gtk+-devel zlib-devel ...

  7. springmvc请求参数的绑定和获取

    请求参数的绑定和获取: 获取页面请求的参数,是javaweb必不可少的一个环节,在struts中,是通过再Action中定义属性,或者Model的方式进行数据绑定和获取.需要提供setter或gett ...

  8. AJAX跨域资源共享 CORS 详解

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  9. 域名解析中TTL是什么意思

    在做域名解析的时候都会看到一个叫“TTL”的值,一般都有一个默认的值,不过不同注册商默认的值也会不一样,常见的是3600和7200这两个值. 另外ping的时候也可以看到“TTL=XXX”的字样,(如 ...

  10. COUNT(DISTINCT a.TransportOrderID)的用法

    DECLARE @StartDate DATETIME= '2017-12-20 00:00:00';DECLARE @EndDate DATETIME= '2017-12-26 00:00:00'; ...