文档章节

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

小代码2016
 小代码2016
发布于 2017/02/18 11:35
字数 1026
阅读 31
收藏 1

下载 && 引入

下载地址:http://ckeditor.com/download

输入图片说明

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

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

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

<!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脚本,这样就可以上传图片之后立即预览。效果图就不发了。

参考

  1. CKEditor实现图片上传以及预览
  2. CKEditor图片上传实现详细步骤(使用Struts 2)
  3. http://docs.ckeditor.com/#!/guide/dev_file_browse_upload

未完项

  1. 详细设置,比如禁止修改高度
  2. 自定义插件
  3. 其它问题

© 著作权归作者所有

小代码2016
粉丝 42
博文 328
码字总数 153495
作品 0
安阳
程序员
私信 提问
CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

CKEditor 3.x配置说明 一、基本使用: 1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2、配置使用 A.将下载下来的CKEditor压缩...

一枚Sir
2014/05/29
0
0
CKEditor 又拍云上传插件新鲜出炉!

What is CKEditor? CKEditor 是一个基于网页的开源 WYSIWYG 编辑器。CKEditor 因为十分轻便,很容易在不同的环境中嵌入。 How to install origin CKEditor? Ckeditor 的安装十分简单,下载链...

又拍云
2016/12/30
0
0
在django的admin使用ckeditor模块

首先在这个网站下载最新的django-ckeditor安装包: https://github.com/jeffh/django-ckeditor 然后解压缩,使用:python setup.py install安装,如果不是root用户,需要sudo 一。在你的解压缩...

岭南六少
2011/08/06
0
0
CKEditor SDK 发布,包括示例,文档和 API

CKEditor SDK 发布,现已提供下载。CKEditor SDK 是巨大的资源集合,帮助你熟悉所有编辑器的特性和实现过程,能更好的帮助你配置和集成 CKEditor 到你的项目中。最重要的是,完全免费! CKEd...

oschina
2014/10/25
7.1K
0
CKEditor 5:富文本编辑器的未来

CKEditor 已经存在 12 年之久,在这期间,它在很多方面都做了改进,成为一个稳健的 web 应用解决方案,目前下载量已经达到 15 million downloads 。 Web 本身也在改变,新的标准和信息分享的...

李中凯
2015/10/19
9.9K
27

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
7
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
6
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部