博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[ckeditor系列]CKEditor 3.6 入门
阅读量:4580 次
发布时间:2019-06-09

本文共 2816 字,大约阅读时间需要 9 分钟。

第一步:载入 CKEditor

 下载ckeditor的最新版本(我下了个5月9号发布的3.6),解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码,将其引入:

 

      ...         

第二部:创建 CKEditor 实例

 

首先,在页面中插入一个<textarea>节点:

或者在 window.onload 中:

第三步:更改config.js

config.js是 CKEditor 的主配置文件,更改config.js来定制自己的 CKEditor 样式:

/*  Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.  For licensing, see LICENSE.html or http://ckeditor.com/license  */    CKEDITOR.editorConfig = function( config )   {       // Define changes to default configuration here. For example:       // config.language = 'fr';       // config.uiColor = '#AADC6E';       config.language = 'zh-cn'; // 配置语言       config.uiColor = '#FFF'; // 背景颜色       config.width = 'auto'; // 宽度       config.height = '300px'; // 高度       config.skin = 'office2003';// 界面v2,kama,office2003       config.toolbar = 'MyToolbar';// 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js       config.toolbarCanCollapse = false;// 工具栏是否可以被收缩       config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js              //自定义的工具栏           config.toolbar_MyToolbar =       [           ['Source','-','Save','Preview','Print'],           ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],           ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],           ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],           '/',           ['Styles','Format'],           ['Bold','Italic','Strike'],           ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],           ['Link','Unlink','Anchor'],           ['Maximize','-','About']       ];   };

第四步:提交编辑器内容

 

可以将 CKEditor 实例看作一个<textarea>处理,在表单提交时, CKEditor 实例中的内容被提交到服务器,可以通过<textarea> 的名称获得其内容。

 

如果需要在客户端获得 CKEditor 实例的内容,可以通过调用 CKEditor API,在表单提交前对其进行处理,如下:

一个完整的例子:

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%   String path = request.getContextPath();   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   %>                             CKEditor      
内容:

 

转载于:https://www.cnblogs.com/101rico/archive/2013/01/20/2868539.html

你可能感兴趣的文章