富文本插件Ckeditor的使用方法——效果很好
来源:互联网 发布:淘宝买家秀采集器 编辑:程序博客网 时间:2024/05/22 06:05
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>
//设置富文本编辑器内容只读
vareditor;
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的其他使用.................................................
- 富文本插件Ckeditor的使用方法——效果很好
- 富文本插件ckeditor和kindeditor
- HTML 富文本编辑器插件 CKEditor
- 很棒的富文本编辑器CKEditor
- 富文本编辑器ckeditor的使用
- ckeditor富文本编辑器的使用
- 富文本编辑器 CKeditor 的使用
- 前端富文本编辑器ckeditor的使用
- 富文本编辑器CKEditor的使用
- CKeditor富文本编辑器的使用
- 富文本编辑器CKEditor
- 富文本编辑器CKeditor
- CKEditor(在线富文本编辑器)的安装与使用
- 如何使用ckeditor控件实现华丽的富文本呢?
- 富文本ckeditor的安装和使用详解
- 富文本编辑器CKEditor的使用及同步问题
- 富文本编辑器UEditor的配置使用方法
- 富文本编辑器UEditor的配置使用方法
- 和屌丝一起学cocos2dx-开发基础
- 和屌丝一起学cocos2dx-Hello World
- 和屌丝一起学cocos2dx-自己的Hello World
- 影响所生成内容的计算
- 和屌丝一起学cocos2dx-CCTextFieldTTF
- 富文本插件Ckeditor的使用方法——效果很好
- POJ2677 DP tour 双调欧几里得旅行商问题
- 和屌丝一起学cocos2dx-win移植android
- 杭电 1732 Push Box
- java 实现元数据对象与json数据互转
- 《JAVA与模式》之访问者模式
- 和屌丝一起学cocos2dx-CCMenu菜单
- 和屌丝一起学cocos2dx-CCEditBox
- 和屌丝一起学cocos2dx-CCControlSwitch