当前位置:首页 > CMS教程 > Thinkphp > 列表

thinkPHP下ueditor的使用方法详解

发布:smiling 来源: PHP粉丝网  添加日期:2021-07-02 10:34:56 浏览: 评论:0 

这篇文章主要介绍了thinkPHP下ueditor的使用方法,结合实例形式较为详细的讲述了thinkPHP下使用ueditor的具体步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了thinkPHP下ueditor的使用方法。分享给大家供大家参考,具体如下:

1、首先需要下载ueditor,下载地址:http://ueditor.baidu.com/website/download.html

2、下载对应的php版的,下载后重命名为ueditor,根据需要放到对应的项目目录中。我放的位置为Public/admin文件夹下,admin为后台的访问入口文件目录。

3、在项目中的使用

首先需要引入核心的js文件:

<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>

然后再文件中加入<textarea>标签,注意设置id属性,代码如下:

<textarea name="content" id="EditorId"> </textarea>

接着是初始化编辑器,注意配置路径

  1. <script type="text/javascript" charset="utf-8"
  2. window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/"
  3. window.onload=function(){ 
  4. window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的高度 
  5.    window.UEDITOR_CONFIG.initialFrameWidth=800;//编辑器的宽度 
  6.    var editor = new UE.ui.Editor({ 
  7. imageUrl : '__APP__/Editor/uploadImage'
  8. fileUrl : '__APP__/Editor/uploadFile'
  9. imagePath : ''
  10. filePath : ''
  11. imageManagerUrl:'__APP__/Editor/imageManage'//图片在线管理的处理地址 
  12. imageManagerPath:'__ROOT__/' 
  13. }); 
  14. editor.render("EditorId"); 
  15. </script> 

注意:

1、UEDITOR_HOME_URL的路径配置为ueditor所在的位置。

2、图片上传路径的配置

3、editor.render("textarea的id一致");

至此一个便算基本完成。

但是,在IE9下,编辑器没有一点效果,这是怎么回事呢?

在IE9下,需要把:

window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";

路径设置代码,放在引入js文件和初始化之间。

Tags: thinkPHP ueditor

分享到: