富文本插件Ckeditor的使用方法——效果很好

 

       Ckeditor插件的下载首页：http://ckeditor.com/download，您可以根据自己的实际需要选择是Basic Package、Standard Package、Full Package。这三个版本实际上就是插件包含的js数量不同，也就是插件功能的差别。建议选择Full Package，因为ckeditor可以自定义插件的工具栏。下载ckeditor之后，将ckeditor存放至项目的WebRoot根目录下面即可。在页面引入js文件即可，如： <script type="text/javascript" src="<%=basePath %>ckeditor/ckeditor.js"></script>。这样，我们就将该插件配置好了。

       以该插件和textarea标签的使用为例，<textarea name="editor"/>，在该标签后面接着加载该插件     

     <script type="text/javascript">
      CKEDITOR.replace( 'editor',{toolbar:'mybar'});
      </script>

    其中绿色字体的是textarea的name属性的值，红色字体的是自定义的工具栏。自定义工具栏在配置文件config.js中，目录结构如下：打开该配置文件，进行相关的配置：

CKEDITOR.editorConfig = function( config ) {
  config.language = 'zh-cn';
  config.uiColor = '#9AB8F3';
  config.toolbar = 'Basic';
  //自定义工具栏1

  config.toolbar_Basic =
  [
   ['Bold','Italic','Underline','Strike','-','Font','FontSize','TextColor','Print']

  ];
 //自定义工具栏2

  config.toolbar_mybar =
  [
   ['Font','FontSize']

  ];
 config.skin='kama';
 //去掉编辑面板下方的元素提示
 config.removePlugins='elementspath';
};

红色阴影部分表示配置默认加载自定义工具栏1，当然在页面也可以动态加载如上面的mybar就是在加载的时候动态加载自定义工具栏2.比较方便的是ckeditor还可以自定义皮肤，官网现在提供了三种皮肤。直接将下载的皮肤包放到skins文件夹下即可，插件默认的是moono，以kama皮肤为例如下图：

config.removePlugins='elementspath';这句话很有用啊，默认的编辑框左下角会显示使用的效果标签如：font、p等，十分不美观，加上这句话就可以将该麻烦去除。

        在后台获取前台form提交的内容时使用 String content=request.getParameter("editor")。在前台获取显示时，如果不想使用该插件而想使用普通的div显示时，可以这样取数据<div><s:property  value="entity.editor"  escape="false"/></div>，其中 escape该属性的配置十分重要。一定不要把s:property 标签写在textarea标签之间，如<textarea><s:property  value="entity.editor"  escape="false"/></textarea>  这种写法是无效的，建议放在div标签内。

      设置ckeditor编辑器只读，可以使用如下js代码：

<script>

    //设置富文本编辑器内容只读

    var editor;

    CKEDITOR.on( 'instanceReady', function( ev ) {

       editor = ev.editor;

       editor.setReadOnly( true );

    });

</script>

富实际上在编辑框内所有的操作都是产生相应的html标签，按下回车键时默认的是翻译成p标签，按下shift+Enter时默认翻译成br标签。我们可以根据自己的需要修改相应的配置，修改如下目录的文件：

只需要修改ckeditor.js文件中的配置即可，ctr+F查找并修改enterMode:CKEDITOR.ENTER_P,只要修改为enterMode:CKEDITOR.ENTER_BR这样按下回车键，默认的行距就没有那么大了。

   好了，今天还有工作要做，未完待续讨论ckfinder和ckeditor的其他使用.................................................