[Grails] grails中为ckeditor插件添加flv视频支持并且解决中文文件名上传问题

vottot 2010-05-28
    原文请看:
http://www.gudkj.com/c/blogShow/18

http://hi.baidu.com/vottot/blog/item/fd6465069b99e277020881e2.html
     在内容管理系统中,一个好的编辑器是系统的灵魂,ckeditor前生叫fckeditor,是目前应用得最广的一个web编辑器。

         该版本基于: grails 1.2 , ckeditor 0.4,其它版本自己根据说明修改:

        一.修改ckeditor插件,加入flv视频插入功能:

         1.下载修改过的插件包:http://code.google.com/p/gudian/downloads/list

          grails-ckeditor-0.4.zip

         解压\web-app\js\ckeditor\plugins\flv整个目录到你的ckeditor插件中同样的位置。

         2.修改\web-app\js\ckeditor\skins\kama\editor.css样式,加入;

          .cke_skin_kama .cke_button_Flv .cke_icon{background:url(images/insertflv.gif);}

          3.把\web-app\js\ckeditor\skins\kama\images\insertflv.gif图片拷贝到同样的位置,这样插件修改就完成了。

          4.grails中使用ckeditor需要配置grails-app\conf\Config.groovy文件:在这个配置中,我指定了ckeditor的配置文件/js/edit-config.js,具体的配置参数意思查询相应的文档,有很多说明。

ckeditor {
config = "/js/edit-config.js"
upload {
    //basedir = "/tmp/storagearea/"
    // baseurl = "/uploads/"
    overwrite = false
    link {
      browser = true
      upload = true
      allowed = ['doc', 'docx', 'flv', 'xls']
      denied = ['html', 'htm', 'php', 'php2', 'php3', 'php4', 'php5',
              'phtml', 'pwml', 'inc', 'asp', 'aspx', 'ascx', 'jsp',
              'cfm', 'cfc', 'pl', 'bat', 'exe', 'com', 'dll', 'vbs', 'js', 'reg',
              'cgi', 'htaccess', 'asis', 'sh', 'shtml', 'shtm', 'phtm']
    }
    image {
      browser = true
      upload = true
      allowed = ['jpg', 'gif', 'jpeg', 'png']
      denied = []
    }
    flash {
      browser = true
      upload = true
      allowed = ['swf']
      denied = []
    }
    flv {
      browser = true
      upload = true
      allowed = ['flv']
      denied = []
    }

}



        5.在网站的个web-app/js目录下添加edit-config.js文件,定义了两种工具栏,Full 和Simple,默认使用:Full,需要使用到Simple的地方如此引用:

<ckeditor:editor name="description" height="100px" width="100%" toolbar="Simple">
                    ${articleInstance?.description}
                  </ckeditor:editor>

edit-config.js内容如下:具体的配置参数意思查询相应的文档,有很多说明。注意就是在这个文件中加入新flv插入按钮:

CKEDITOR.editorConfig = function( config )
{
//界面的语言配置 设置为'zh-cn'即可
    config.defaultLanguage = 'zh-cn';
//界面的现实语言 可选择"zh-cn"
config.language = 'zh-cn';
//编辑器的高度
config.height = 200

//是否使用完整的html编辑模式 如使用,其源码将包含:<html><body></body></html>等标签
//config.fullPage = false
//在清除图片属性框中的链接属性时 是否同时清除两边的<a>标签 plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true
//当从word里复制文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = true
  
//使用的工具栏 plugins/toolbar/plugin.js
config.toolbar = 'Full'
config.toolbar_Full =[
   ['Source','RemoveFormat','Font','FontSize'],
   ['Bold','Italic','Underline','Strike','TextColor','BGColor'],
   ['Link','Unlink','Smiley','Image','Flash','flv'],
   ['Table','NumberedList','BulletedList','Outdent','Indent'],
   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
];
    config.toolbar_Simple =[
   ['Source','RemoveFormat','Font','FontSize']
];

config.extraPlugins = 'flv';


};

最终效果如下:



         二.解决中文文件名上传问题:

          默认的grails ckeditro上传是直接服务器存储的文件名和本地文件名一致,如果重复的则在文件名上加数字,所以一旦上传本地的中文文件名的文件,传到服务器上后就读取不了。要读取的话就要调整编码等问题,如此还不如直接修改默认的上传方法,让上传后的文件名为当前时间格式:

        
       打开ckedito插件包,进入\grails-app\controllers\org\gualdi\grails\plugins\ckeditor目录,打开CkeditorController.groovy文件,找到:

if (isAllowed(f.ext, type)) {
                                      def fileToSave = new File(finalDir, newName)      

修改为:

   if (isAllowed(f.ext, type)) {
                                SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmssSSSS");
                                newName = formatter.format(new Date())+"."+f.ext;
                                def fileToSave = new File(finalDir, newName)

在头部导入SimpleDateFormat 包:

import java.text.SimpleDateFormat

          这样通过ckeditor上传后在服务器上文件名为:201005282120500109.jpg了。
violetluna 2011-10-17
不错,我去试试看。。。
kidli 2011-10-31
呵呵,我这怎么就从来没出现过中文问题呢
Global site tag (gtag.js) - Google Analytics