1.首先我们要去官网下载UEditor编辑器,选择语言,这里我用的是php utf-8版本(李昌辉)

2.下载完成之后解压文件,将解压的文件放到我们的网站目录里面

3.ueditor/utf8-php目录下面有个index.html,也就是官方做的demo

可以打开这个demo看一下源代码,它的功能非常多,我们要用的时候选择自己想用的功能使用就可以了。

4.下一步我们自己建一个页面来测试

5.在页面内引入以下三个JS文件,注意根据自己的文件位置修改路径:

<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="ueditor/utf8-php/lang/zh-cn/zh-cn.js"></script>

6.然后在页面要显示编辑器的地方写入以下代码,可以修改宽度高度,注意要取一个唯一id:

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>  

7.在页面最后嵌入JS来实例化出编辑器:

<script type="text/javascript">  

    //实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor'); function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为:");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
} </script>

其中getContent()函数是我们取的其中一个功能,就是获取编辑器中的内容(包含html代码)。

8.其中以下这句代码是实例化编辑器,注意id是和第6步里面的id一致

var ue = UE.getEditor('editor');

9.如果要修改路径,可以在ueditor.config.js文件中修改

window.UEDITOR_HOME_URL = "/xxxx/xxxx/";  

10.编辑器默认上传的图片在ueditor\php\upload\image里面

11.要修改图片的上传存储路径可以在ueditor\utf8-php\php路径下config.json文件里面修改

 "imagePathFormat": "/zuoye/chajian/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

UEditor编辑器的使用的更多相关文章

  1. tp中ueditor编辑器的使用

    1/引入三个文件 <script type="text/javascript" charset="utf-8" src="{$Think.con ...

  2. 一个页面实例化两个ueditor编辑器,同样的出生却有不同的命运

    今天遇到一个比较怪异的问题,有一项目需要在同一个页面上展现两个ueditor编辑器,在展现时并不任何问题,但当点击了“保存”按钮时就出错了,有其中一个ueditor在asp.net中无法获取编辑器的值 ...

  3. 使用 UEditor 编辑器获取数据库中的数据

    在 ThinkPHP 3.2.2 中,使用 UEditor 编辑器获取数据库中保存的数据,可以使用 UEditor 自身提供的方法. 首先在视图模板中实例化编辑器,这是出现编辑器界面的必须的行为: & ...

  4. html 实体转换为字符:转换 UEditor 编辑器 ( 在 ThinkPHP 3.2.2 中 ) 保存的数据

    在 ThinkPHP 3.2.2 中使用 UEditor 编辑器保存文章内容时,数据库中保存的数据都被转义成实体,例如:&lt;p&gt;&lt;strong&gt;& ...

  5. 百度Ueditor编辑器的Html模式自动替换样式的解决方法

    百度的Ueditor编辑器出于安全性考虑,用户在html模式下粘贴进去的html文档会自动被去除样式和转义.虽然安全的,但是非常不方便. 做一下修改把这个功能去掉. 一.打开ueditor.all.j ...

  6. 织梦更换Ueditor编辑器后栏目内容提交更新失败

    今天在使用网友的相关经验<百度编辑器(Ueditor)整合到dedecms>,给织梦dedecms系统更换编辑器后,文章编辑器使用正常,在编辑栏目内容的时候,出现提交后不更新内容的情况,上 ...

  7. 解决在 MVC  局部视图中加载 ueditor 编辑器时, 编辑器加载不出的 bug

    在 MVC 局部视图中,有时我们需要 加载 ueditor 编辑器,或进行局部刷新, 但是在加载局部视图后,ueditor 编辑器加载不出,这是由于 ueditor 使用的缓存,只要清空缓存,重新实例 ...

  8. asp.net mvc4使用百度ueditor编辑器

    原文  http://www.cnblogs.com/flykai/p/3285307.html    已测试 相当不错 前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好 ...

  9. Thinkphp整合最新Ueditor编辑器

    说到最新的富文本编辑器的确不少(ckeditor.fkeditor.ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 ...

随机推荐

  1. Java为何用xml做配置文件?

    在Java世界里xml配置文件几乎是首选,xml有什么好的特性呢? xml能存储小量数据,仅仅是存储数据. xml可以跨平台,主流各种平台都对xml有支持, 真正的跨平台, xml读取速度快. xml ...

  2. 学习3ds max插件开发过程中的一些小结

    1. 3ds max是以树状结构来管理整个场景的,每个树节点类型为INode 2. Interface类很关键,可以通过其中的GetRootNode.NumberOfChildren和GetChild ...

  3. VXLAN 概念(Part II)- 每天5分钟玩转 OpenStack(109)

    上一节我们介绍了 VXLAN 的封装格式以及 VTEP.今天我们将通过例子讨论 VXLAN 封装和转发包的过程,以及 Linux 对 VXLAN 的原生支持. VXLAN 包转发流程 VXLAN 在 ...

  4. EntityFramework之异步、事务及性能优化(九)

    前言 本文开始前我将循序渐进先了解下实现EF中的异步,并将重点主要是放在EF中的事务以及性能优化上,希望通过此文能够帮助到你. 异步 既然是异步我们就得知道我们知道在什么情况下需要使用异步编程,当等待 ...

  5. (第七天)DOM练习一

    动态删除元素 给定一个ul列表,点击ul中子节点进行删除 window.onload = function() { ].childNodes; () console.log(list.length); ...

  6. SubSonic3.0.0.4.2源码包与调用Dll

    ================================================================ 名    称:SubSonic插件版    本:3.0.0.4.2最后 ...

  7. Kubernetes集群搭建过程中遇到的问题

    1. 创建Nginx Pod过程中报如下错误: #kubectlcreate -f nginx-pod.yaml Error from server: error when creating &quo ...

  8. 如何使用Xmanager及VNC登录远程桌面

    如何调用远程桌面,比较常见的有两种方式:Xmanager及VNC 正好今天鼓捣了一下,特整理如下: Xmanager Xmanager的调用也有两种方式: 一.直接在Xshell中调用 这时需设置会话 ...

  9. c/c++系列的运算符优先级总结

    经常写程序的时候,遇到运算符优先级的问题,令我汗颜的是,查书的次数挺多的……狠狠心,总结下.不过还要结合大量的编程实践来深入脑海. 1.首先永远忘不了的是,逗号运算符级别最低,毫无争议的还有()括起来 ...

  10. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...