首页 > 代码库 > CKEditor学习笔记1（CKEditor安装、简单调用）

CKEditor学习笔记1（CKEditor安装、简单调用）

2024-07-02 08:29:38   225人阅读

安装
1、下载CKEDitor（我下载的是3.6.4） 官网：CKEditor
2、提取ckeditor目录，放入你的Web站点根目录下（WebRoot）

调用CKEditor
调用CKEditor前，先将ckeditor.js引入
<script type="text/javascript" src=http://www.mamicode.com/"ckeditor/ckeditor.js"></script>


方式一：

通过JavaScript调用（我知道有3种方式）
1、创建一个textarea多行文本框，提供一个class="ckeditor"属性
<textarea class="ckeditor"></textarea>
2、创建一个textarea多行文本框，提供一个id或name，再通过CKEDITOR.replace()方法调用
<textarea id="editor1" name="editor1"></textarea>
CKEDITOR.replace( ‘editor1‘,
{
    toolbar : ‘Basic‘,
    uiColor : ‘#9AB8F3‘
});
3、首先创建一个DIV层（填充textarea容器），然后调用CKEDITOR.appendTo()方法
<div id="editorSpace"></div>
<script type="text/javascript">
    CKEDITOR.appendTo("editorSpace");
</script>


方式二：

JSP中通过自定义标签调用（我知道有2种方式，反正大同小异）
1、
步骤一：导入jar包(ckeditor-java-core-3.5.3.jar，官网下载)
步骤二：添加标签库
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
步骤三：添加一个textarea
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
步骤四：通过replace标签，将普通textarea替代成CKEditor编辑器
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />

2、

步骤一：导入jar包(ckeditor-java-core-3.5.3.jar，官网下载)
步骤二：添加标签库
<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
步骤三：（无须添加textarea）
<ckeditor:editor editor="myEditor" basePath="/CKEditorSample/ckeditor/" value=http://www.mamicode.com/"Type here">
属性介绍：
basePath:CKEditor目录
editor:textarea name名称
value:textarea默认值

第一篇先这样了，文档参考
里面含有一些Java的基本配置，大家可以参考一下。

CKEditor学习笔记1（CKEditor安装、简单调用）


联系
我们