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. crossplatfrom---electron入门教程

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  2. iOS-UI-UI控件概述

    以下列举一些在开发中可能用得上的UI控件: IBAction和IBOutlet,UIView 1 @interface ViewController : UIViewController 2 3 @p ...

  3. Android开发-之五大布局

    在html中大家都知道布局是什么意思了,简单来说就是将页面划分模块,比如html中的div.table等.那么Android中也是这样的.Android五大布局让界面更加美化,开发起来也更加方便.当然 ...

  4. Powershell 切换IE代理

    买了一个穿越防火墙的代理,在 Windows 下每次手动设置代理都好麻烦,最后不断尝试 Powershell 来设置,最后也终于成功了.   其实利用 Powershell 来设置 IE 的代理,就是 ...

  5. windows下实现Git在局域网使用

    1.首先在主机A上创建一个文件夹用于存放你要公开的版本库.然后进入这个文件夹,右键->Git create repository here,弹出的窗口中勾选Make it Bare!之后将这个文 ...

  6. 使用karma测试平时写的小demo(arguments为例)

    有人说前端自动化测试非常困难,我觉得确实如此.在项目中,我个人也不放心写的测试,还是要手动测试.但是我们平时写demo学习时,完全可以使用自动化测试. 传统demo 1,新建一个html 2,写入js ...

  7. 【记录】AutoMapper Project To OrderBy Skip Take 正确写法

    AutoMapper:Queryable Extensions 示例代码: using (var context = new orderEntities()) { return context.Ord ...

  8. 小菜学习设计模式(四)—原型(Prototype)模式

    前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...

  9. spring websocket源码分析续Handler的使用

    1. handler的定义 spring websocket支持的消息有以下几种: 对消息的处理就使用了Handler模式,抽象handler类AbstractWebSocketHandler.jav ...

  10. supervisor 安装、配置、常用命令

    前言 在 web 应用部署到线上后,需要保证应用一直处于运行状态,在遇到程序异常.报错等情况,导致 web 应用终止时,需要保证程序可以立刻重启,继续提供服务. 所以,就需要一个工具,时刻监控 web ...