您的位置：首页 > 其它

121 项目 017 笔记向 ckeditor 简单使用

2017-02-18 00:00 483 查看

下载 && 引入

可以看到有四种下载方式，分别是基本版、标准版、完整版以及定制

这里我下载的是完整版，之后还会说明怎么定制。

然后解压后放到你的网站目录中，引用代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>

<textarea name="editor" id="editor" cols="80" rows="10">
Hello CKEditor
</textarea>

<script type="text/javascript" src="static/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>

运行效果：

定制ToolBar

现在打开解压后的CKEditor中的samples文件夹中的index

点击

TOOLBARCONFIGURATOR

按钮

选中

Advanced

此时就可以看到 ToolBar 中每一个组件对应的名称，你可以像默认的那样给组件分组，也可以直接写

然后把你想要的组件的名字写入：

ckeditor/config.js

如下是我的配置：

/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license */

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.extraPlugins = 'widgetselection';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'widget';
config.extraPlugins = 'codesnippet';
config.codeSnippet_theme = 'railscasts';

config.toolbar = [
[
'Link', 'Unlink',
'-' ,
'TextColor', 'BGColor',
'-',
'Image', 'Flash', 'Table',
'-',
'Bold', 'Italic', 'Strike',
'-',
'NumberedList', 'BulletedList',
'-',
'JustifyLeft', 'JustifyCenter',
'-',
'Blockquote','CodeSnippet',
'-',
'Format',
'-',
'Preview','Source','Maximize'

]
];

};

运行效果如下：

其实我就是按照开源中国的排列方式做的

添加插件

这里以一个插件代码的插件

codesnippet

为例

你可以在如下网址搜索插件：http://ckeditor.com/addons/plugins/all

找到后下载

也可以点击

Add to my editor

这样你可以需要什么插件就添加什么插件，完事之后点击右边的

Build My Editor

下载你的定制版，这个方法还有个好处就是可以自动包含依赖包，不用你手动的下载了，推荐这种方法

下载后用使用方法的提示

注意第3条提示

你只是下载这个插件还不行，直接引用的话会有错误，因为你还要下载他的依赖包

下载好依赖包后，根据提示配置好，如下：

/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license */

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.extraPlugins = 'widgetselection';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'widget';
config.extraPlugins = 'codesnippet';
config.codeSnippet_theme = 'railscasts';

config.toolbar = [
[
'Link', 'Unlink',
'-' ,
'TextColor', 'BGColor',
'-',
'Image', 'Flash', 'Table',
'-',
'Bold', 'Italic', 'Strike',
'-',
'NumberedList', 'BulletedList',
'-',
'JustifyLeft', 'JustifyCenter',
'-',
'Blockquote','CodeSnippet',
'-',
'Format',
'-',
'Preview','Source','Maximize'

]
];

};

每个插件都有相应的文档，比如这个插件的配色方案在：http://docs.ckeditor.com/#!/guide/dev_codesnippet

根据文档可知修改配色方案的方法在：http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-codeSnippet_theme

图片上传和回显

首先是显示上传的tab

// 上传路径
config.filebrowserUploadUrl = '/uploadck';
// 图片服务器路径
//config.filebrowserBrowseUrl='/browser/browse.php',
// 预览图片时的文字
config.image_previewText=' ';

运行之后的效果：

前台页面代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<form action="/upload" enctype="multipart/form-data" method="post">
<p>文件：<input type="file" name="file"/></p>
<p><input type="submit" value="上传"/></p>
</form>

<br/>
<br/>
<textarea name="editor" id="editor" cols="80" rows="10">
Hello CKEditor
</textarea>

<script type="text/javascript" src="http://static.bookstore.com/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace('editor',{
customConfig:'http://static.bookstore.com/js/ckeditor-config.js'
});
</script>

</body>

</html>

后台代码

package com.laolang.gongda.bookstore.web;

import com.laolang.gongda.bookstore.service.PicUploadService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@Controller
public class UploadController {

@Autowired
private PicUploadService picUploadService;

@RequestMapping(value = "/upload")
public String uploadForm(){
return "upload";
}

@RequestMapping(value = "/upload",method = RequestMethod.POST)
public String upload( @RequestParam("file")MultipartFile multipartFile , Model model){
String result = picUploadService.uploadPic(multipartFile);

if( null == result ){
result = "上传失败";
}

System.out.println(result);
model.addAttribute("msg",result);
return "result";
}

// ckeditor 上传和回显
@RequestMapping(value = "/uploadck", method = RequestMethod.POST)
public void uploadCk(@RequestParam(name = "upload") MultipartFile multipartFile, HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("hello");
System.out.println("world");

// 上传
String fileName = picUploadService.uploadPic(multipartFile);

// 回显
response.setContentType("text/html;charset=UTF-8");
String callback = request.getParameter("CKEditorFuncNum");
PrintWriter out = response.getWriter();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + fileName + "',''" + ")");
out.println("</script>");
out.flush();
out.close();
}
}

关键是回显的那一部分
我返回的

fileName

是图片在服务器上的绝对路径，然后这个控制器向浏览器返回了一段JS脚本，这样就可以上传图片之后立即预览。效果图就不发了。

参考

CKEditor实现图片上传以及预览

CKEditor图片上传实现详细步骤(使用Struts 2)

http://docs.ckeditor.com/#!/guide/dev_file_browse_upload

未完项

详细设置，比如禁止修改高度

自定义插件

其它问题

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航