富文本插件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的其他使用.................................................