用户
 找回密码
 入住 CI 中国社区

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
查看: 24307|回复: 52
收起左侧

最简单的 CI 集成 FCKEditor 的方法

  [复制链接]
发表于 2009-6-17 14:40:48 | 显示全部楼层 |阅读模式
此教程里的 CI 版本是 1.7.1,FCKEditor 的版本是 2.6.4,根据理论上来说,通吃所有 CI 和 FCKEditor 版本,有问题欢迎大家提出来,谢谢。


设置:
  • 解压缩 CI 到一个 Web 可访问的目录,比如 D:\ci,index.php 文件在 D:\ci 中。(以下“CI 根目录”均指 D:\ci)
  • 在 CI 根目录下建立 js 子目录,然后解压缩 fckeditor 到 js 目录中,js 中创建一个 fckeditor 目录,最终保证 fckeditor.js 在 D:\ci\js\fckeditor\ 目录中。(当然,这些目录怎么安排都无所谓,这只影响视图里的绝对 URL 路径而已)
  • 记得在 config/autoload.php 中添加一个 url helper,或者在控制器里 load 一下。


代码:
  • 在需要放置 FCKEditor 编辑器的页面的视图中添加(比如:视图 welcome_message.php)
    HTML复制代码
    <script type="text/javascript" src="<?=base_url()?>js/fckeditor/fckeditor.js"></script>
    复制代码
    (推荐放在 <head></head> 中,当然放到编辑器 js 代码的前面也行)
  • 在此视图中真正需要放置编辑器的位置上添加代码:
    JS复制代码
    <script type="text/javascript">
    <!--
    var sBasePath = '<?=base_url()?>js/fckeditor/';
     
    var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
    oFCKeditor.BasePath     = sBasePath ;
    oFCKeditor.Height       = 300 ;
    oFCKeditor.Value        = '<p>This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>.<\/p>' ;
    oFCKeditor.Create() ;
    //-->
    </script>
    复制代码



上面的代码例子是在页面里创建一个编辑器,如果要把某个 <textarea> 变成编辑器,则代码是:
HTML复制代码
 
<script type="text/javascript" src="<?=base_url()?>js/fckeditor/fckeditor.js"></script>
 
复制代码
JS复制代码
 
<script type="text/javascript">
window.onload = function()
{
        var sBasePath = '<?=base_url()?>js/fckeditor/';
 
        var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
        oFCKeditor.BasePath     = sBasePath ;
        oFCKeditor.ReplaceTextarea() ;
}
</script>
 
复制代码
HTML复制代码
 
<textarea name="FCKeditor1" rows="10" cols="80" style="width: 100%; height: 200px">这是编辑的内容。。。。。。</textarea>
 
复制代码



注意:
  • 上面视图里的路径都是基于我之前定义的“CI 根目录”和“js 目录”来说的,所以大家可以根据自己的目录情况随意设定。
  • 如果用 rewrite 隐藏过 index.php,请记得把 js 目录从 rewrite 规则中排除,否则访问不到 js 目录。
  • 本教程基于 FCKEditor 的 javascript 集成方法而编写,理论上适用于各种情况,希望大家提出宝贵意见。
发表于 2009-6-17 15:06:03 | 显示全部楼层
发表于 2009-6-17 15:07:08 | 显示全部楼层
收藏,目前用的是Sablog-X(一博客程序)里改过的FCK,感觉挺好
 楼主| 发表于 2009-6-17 15:07:13 | 显示全部楼层
哪里有问题,提出来!呵呵
发表于 2009-6-17 15:10:36 | 显示全部楼层
JS复制代码
<script type="text/javascript">
var FCKeditor = new FCKeditor("content");
FCKeditor.BasePath = "<?=base_url()?>js/fckeditor/"; //文件夹位置
oFCKeditor.Height = 400;//高度
oFCKeditor.ToolbarSet = "Default";//这里可以设置样式哦!
oFCKeditor.ReplaceTextarea();
</script>
 
复制代码


Hex 留: 我给你的 BasePath 修改了一下,这样才可以。最主要的是要用绝对 URL 来定位。
发表于 2009-6-17 16:04:33 | 显示全部楼层
谢谢。不过之前的那个贴子 我已经集成FCK了
发表于 2009-7-23 13:57:44 | 显示全部楼层
我是新手。。。第三步能不能说具体一点啊?
发表于 2009-7-23 14:31:36 | 显示全部楼层
3.记得在 config/autoload.php 中添加一个 url helper,或者在控制器里 load 一下。



代码:



在需要放置 FCKEditor 编辑器的页面的视图中添加(比如:视图 welcome_message.php) HTML
<script type="text/javascript" src="<?=base_url()?>js/fckeditor/fckeditor.js"></script>
复制代码
-------------------------------------------------------------------------

以上第三步,需要在 config/autoload.php 中添加一个 url helper,或者在控制器里 load 一下。
是因为下面的那个"<?=base_url()?>"这个函数。是需要加载url_helper,才能使用的。也就是说base_url()是urlhelper里面的东西,建议看看手册辅助函数那一部分http://codeigniter.org.cn/user_guide/general/helpers.html
 楼主| 发表于 2009-7-23 17:15:11 | 显示全部楼层
发表于 2009-8-17 13:37:43 | 显示全部楼层
为什么我调textarea的高和宽,FCK没有变化呢?

本版积分规则