TP怎么用ckeditor？

http://topic.csdn.net/u/20110526/14/cafb9256-09eb-4891-ade6-6ed00ffa1d62.html
FckEditor升级到CKEditor 3.0了！thinkphp没见到有人把使用的方法给贴出来，自己捣鼓了一圈，写一下，有和我一样的朋友们可以看一下，有问题大家探讨。要让thinkphp使用，需要修改在TagLibHtml.class.php中修改代码。找到public function _editor($attr)
    {这段，大概在40行，你可以看到        $tag = $this->parseXmlAttr($attr,'editor');
        $id    = !empty($tag['id'])?$tag['id']: '_editor';
        $name   = $tag['name'];
        $style        = !empty($tag['style'])?$tag['style']:'';
        $width   = !empty($tag['width'])?$tag['width']: '100%';
        $height     = !empty($tag['height'])?$tag['height'] :'320px';
        $content    =   $tag['content'];
        $type       =   $tag['type'] ;
        switch(strtoupper($type)) {
            case 'FCKEDITOR':        这样一段，在case 'FCKEDITOR':这段后面加上：        case 'CKEDITOR':    // This section is write and test by Zhx 2009-12-19 you may test
                $parseStr = '<script type="text/javascript" src="__ROOT__/Public/Js/CKeditor/ckeditor.js"></script><textarea id="'.$id.'" name="'.$name.'">'.$content.'</textarea><script type="text/javascript">CKEDITOR.replace(\''.$id.'\');CKEDITOR.config.width="'.$width.'";CKEDITOR.config.height="'.$height.'";</script> ';
                break;保存后，你可以在你需要引用的页面里加上<tagLib name="html" />
     <html:editor type="ckeditor" id="memo" width="100px" height="200px" name="memo" />这样的引用，就能使用了！如果需要对编辑器的其它属性进行管理和动态修改，在$parseStr中的<script type="text/javascript">CKEDITOR.replace(\''.$id.'\');CKEDITOR.config.width="'.$width.'";CKEDITOR.config.height="'.$height.'";</script>这里面加上CKEDITOR.config.porperty的方式指定就可以了。另外，需要多说一句的是，我把编辑器的js文件放到根目录下的/Public/Js/CKeditor/里了，请注意！
thinkphp下ckeditor+ckfinder的图片上传配置(JS实现)
开源网页编辑软件FCKEditor在09年发布更新到3.0，并改名为CKEditor。改进后的ckeditor更加模块话，配置更加灵活，和以前的fckeditor使用方式上也有所不同。在我的mvc项目中由于要用到 ckeditor，特意研究了下它的使用方法，写下来和大家分享。
最新发布的CKFinder 1.4版已经提供了对CKEditor3.0的支持CKFinder 1.4 下载地址：http://ckfinder.com/CKEditor3.0 下载地址：http://ckeditor.com/
下载后直接解压得到ckeditor文件夹，包括如下内容：ck配置图片其中sample为例子，source为源文件，为了减少editor的体积，直接删除。其他你也可删除一些，像语言只留zh-cn。然后将整个文件夹直接拷贝到网站\htdocs\newtp\Public\Js下ck配置图片在你需要使用editor控件的页面头部添加：1 <head>    <scripttype="text/javascript"src="__PUBLIC__/Js/ckeditor/ckeditor.js"></script></head> 在页面相应位置上添加：1 <textareaname="editor1"></textarea>
2 <scripttype="text/javascript">   window.onload = function()  {       CKEDITOR.replace( 'editor1' );  };</script> 注意：js代码一定要写在textarea后,其实可以这样理解editor控件只是对textarea做了一个漂亮的包装，我们的输入其实都在上面的texarea中，最终也是通过textarea提交到服务器端。新的editor中去除了上传功能，也就是说我们不能通过上传插入图片、flash 了。如图：editor中的插入图片对话框并没有提供上传功能：幸好有个插件ckfinder可以辅助我们完成以下功能，插件的下载地址同样在http://ckeditor.com/ 最新版本：ckfinder_aspnet_1.4.1.1解压后，得到一个名为ckfinder的文件夹，同样删除掉source、sample目录（原因同上），拷贝到和ckeditor同级。如图：
ck配置图片注意：这里还有些配置必须要做：
把文件夹中的bin目录下的dll文件添加到网站的引用中，防止出现找不到类的错误。
打开config.php，修改function CheckAuthentication() { reture false；//改为return true； }此处修改是为了有权限上传。
及上传的目录$baseUrl = ‘/newtp/Public/uploads/’;
接下来就要把ckfinder集成到ckeditor中了，代码如下：1 vareditor = CKEDITOR.replace('editor1'); CKFinder.SetupCKEditor(editor, '/newtp/Public/Js/ckeditor/ckeditor.js'); 当然，在页面相应位置引用script代码是必不可少的。好了，最后一步了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得不爽。去除方法如下：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，将其中的 en.call(window,qo); 代码注释或直接删除。至此我们的ckfinder全部配置完毕，运行效果如下： ck配置图片补充：要自己配置eidtor的外观，可打开eidtor文件夹下的：config.js文件进行配置。1 CKEDITOR.editorConfig = function( config ){    // Define changes to default configuration here. For example:    // config.language = 'fr';    // config.uiColor = '#AADC6E';   // config.width = 200;}; 此处配置是针对网站中所有页面的editor，如单个页面需要单独配置，直接在页面中写配置代码，示例如下：CKEDITOR.config.height = 400;完整的调用如下：
{*FCK_IMAGE_PATH}是在index.php定义的常量为define(‘CKFINDER_PATH’, ‘__PUBLIC__/Js/ckfinder/’);，便于更改路径。01 <script src="__ROOT__/Public/Js/ckeditor/ckeditor.js"type="text/javascript"></script>
02             <script src="__ROOT__/Public/Js/ckfinder/ckfinder.js"type="text/javascript"></script>
03             <script type="text/javascript">
04             if(typeofCKEDITOR == 'undefined') {
05                 document.write('加载CKEditor失败');
06                 }
07                 else{
08                 vareditor = CKEDITOR.replace('details');
09                 CKFinder.SetupCKEditor(editor, '{*FCK_IMAGE_PATH}'); //ckfinder总目录的相对路径.
10                 }
11         CKEDITOR.config.width = 710;
12                 CKEDITOR.config.height = 300;
13             </script>

调试易

TP怎么用ckeditor？

解决方案 »