介绍

使用范围较广的富文本编辑器。官方文档

config.js的常用配置

参考:https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

CKEDITOR.editorConfig = function( config ) {
config.toolbar = 'Full';
config.toolbarLocation = 'top';
config.height = 700;
config.toolbar = [
// { name: 'document', items: [ 'Source'] },
// { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ] },
// { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace' ] },
//{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton' ] },
// '/',
{ name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic', 'Underline', 'Strike'] },
{ name: 'paragraph', groups: [ 'list', 'blocks' ], items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote' ] },
{ name: 'links', items: [ 'Link' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
{ name: 'styles', items: [ 'Styles', 'Format', 'FontSize','CodeSnippet' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize' ] }
]; config.plugins = 'dialogui,dialog,basicstyles,blockquote,button,toolbar,clipboard,menu,filetools,filebrowser,floatingspace,listblock,font,format,horizontalrule,wysiwygarea,image,menubutton,link,list,liststyle,maximize,pastetext,tab,table,tabletools,tableselection,lineutils,uploadwidget,uploadimage,textwatcher,htmlwriter,undo';
config.skin = 'moono-lisa';
config.resize_enabled = false; //禁止拖拽改变尺寸
config.removePlugins = 'elementspath'; //删除底边栏
config.image_previewText=' '; //清空图片上传预览的内容
config.image_prefillDimensions = false; //禁止图片上传完毕后自动填充图片长和宽
config.imageUploadUrl = '/post/upload'; //图片上传接口
config.filebrowserImageUploadUrl= '/post/upload';
config.extraPlugins = 'wordcount,codesnippet'; //其他插件:字数统计、提示信息、语法高亮
config.wordcount = {
showParagraphs: false, // 是否统计段落数
showWordCount: false, // 是否统计词数
showCharCount: true, // 是否统计字符数
countSpacesAsChars: false, // 是否统计空间字符
countHTML: false, // 是否统计包括HTML字符的字符数
maxWordCount: -1, // 最大允许词数,-1表示无上限
maxCharCount: -1, //最大允许字符数,-1表示无上限
filter: new CKEDITOR.htmlParser.filter({ //添加筛选器添加或删除元素之前计数(CKEDITOR.htmlParser.filter),默认值:null (no filter)
elements: {
div: function( element ) {
if(element.attributes.class == 'mediaembed') {
return false;
}
}
}
})
};
config.codeSnippet_theme = 'github'; //添加中文字体
//config.font_names="宋体/SimSun;新宋体/NSimSun;仿宋_GB2312/FangSong_GB2312;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;微软雅黑/Microsoft YaHei;幼圆/YouYuan;华文彩云/STCaiyun;华文行楷/STXingkai;方正舒体/FZShuTi;方正姚体/FZYaoti;"+ config.font_names;
};

配置图片上传接口

参考:https://blog.csdn.net/sayoko06/article/details/81450441

@ResponseBody
@PostMapping("/upload")
public String upload(@RequestParam("upload") MultipartFile file, HttpServletRequest request, HttpServletResponse response){
FileResponse fileResponse = new FileResponse();
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
String newFileName = IDUtils.getUUID()+suffixName;
Calendar cal = Calendar.getInstance();
int month = cal.get(Calendar.MONTH) + 1;
int year = cal.get(Calendar.YEAR);
String uploadPath = baseUploadPath+ File.separator+String.valueOf(year)+File.separator+String.valueOf(month);
File uploadPathFile = new File(uploadPath);
if(!uploadPathFile.exists()){
uploadPathFile.mkdirs();
} //System.out.println("上传路径:"+uploadPath); try {
String realPath = uploadPath+File.separator+newFileName;
file.transferTo(new File(baseUploadPath+newFileName));
// return {"uploaded":1, "fileName" : "image.png", "url":"http://localhost:15593/UploadImages/RickEditorFiles/Content/2017-05-23 10_39_54.png" };
return fileResponse.success(1, newFileName, ckeditorAccessImageUrl + newFileName, null);
// return "{\"uploaded\" : 1, \"fileName\" : \"image.png\", \"url\": , \"error\" : { \"message\":\"\" } }";
} catch (IOException e) {
e.printStackTrace();
return fileResponse.error(0,"系统异常!");
} }

初始化ckeditor

var editor;
$(function () {
editor = CKEDITOR.replace('m_content');
});

获取HTML文本

postContent = CKEDITOR.instances.editor.getData().trim();

获取纯文本

postTextContent = CKEDITOR.instances.editor.document.getBody().getText();

ckeditor实战总结的更多相关文章

  1. Drupal 实战

    <Drupal 实战> 基本信息 作者: 葛红儒    丛书名: 实战系列 出版社:机械工业出版社 ISBN:9787111429999 上架时间:2013-6-28 出版日期:2013 ...

  2. SSH实战 · 唯唯乐购项目(上)

    前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...

  3. GitHub实战系列汇总篇

    基础: 1.GitHub实战系列~1.环境部署+创建第一个文件 2015-12-9 http://www.cnblogs.com/dunitian/p/5034624.html 2.GitHub实战系 ...

  4. 七牛云:ckeditor JS SDK 结合 C#实现多图片上传。

    成功了,搞了2天.分享一下经验. 首先是把官方的那个例子下载下来,然后照如下的方式修改. 其中tempValue是一个全局变量. function savetoqiniu() { var upload ...

  5. MySQL 系列(四)主从复制、备份恢复方案生产环境实战

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 第三篇:MySQL 系列(三)你不知道的 视图.触发器.存储过程.函数 ...

  6. Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  7. 给缺少Python项目实战经验的人

    我们在学习过程中最容易犯的一个错误就是:看的多动手的少,特别是对于一些项目的开发学习就更少了! 没有一个完整的项目开发过程,是不会对整个开发流程以及理论知识有牢固的认知的,对于怎样将所学的理论知识应用 ...

  8. asp.net core 实战之 redis 负载均衡和"高可用"实现

    1.概述 分布式系统缓存已经变得不可或缺,本文主要阐述如何实现redis主从复制集群的负载均衡,以及 redis的"高可用"实现, 呵呵双引号的"高可用"并不是 ...

  9. Linux实战教学笔记08:Linux 文件的属性(上半部分)

    第八节 Linux 文件的属性(上半部分) 标签(空格分隔):Linux实战教学笔记 第1章 Linux中的文件 1.1 文件属性概述(ls -lhi) linux里一切皆文件 Linux系统中的文件 ...

  10. Linux实战教学笔记07:Linux系统目录结构介绍

    第七节 Linux系统目录结构介绍 标签(空格分隔):Linux实战教学笔记 第1章 前言 windows目录结构 C:\windows D:\Program Files E:\你懂的\精品 F:\你 ...

随机推荐

  1. MySQL为什么不推荐使用in

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 当使用IN语句时,MySQL可能会遇到以下问题: ...

  2. [转帖]Redis优化:Redis使用TCMalloc提高内存分配性能

    TCMalloc(Thread-Caching Malloc)是google开发的开源工具──"google-perftools"中的成员.与标准的glibc库的malloc相比, ...

  3. ingress nginx 支持的K8S版本以及nginx版本信息

  4. [转帖]是的你没看错,HTTP3来了

    https://www.jianshu.com/p/288ce6a8ab88 简介 很多小伙伴可能还沉浸在HTTP1.1的世界无法自拔,但是时代的洪流已经带领我们来到了HTTP3的世界了.是的,你在桥 ...

  5. [转帖]TiDB调优小结

    https://www.jianshu.com/p/d5ee4dca66d8 TiDB概览 先来一段官网的描述     TiDB server:无状态SQL解析层,支持二级索引,在线ddl,兼容MyS ...

  6. [转帖]SPEC测试arm服务器性能,SPECJVM2008测试处理器性能_服务器评测与技术-中关村在线...

    首先,我们使用SPECJVM2008测试最新至强E5处理器的虚拟化性能. SPECJVM2008是一种通用的多线程Java基准测试工具,它能够反映JRE(Java Runtime Environmen ...

  7. 最小化安装的CentOS7 上面安装Oracle12C的简单过程

    首先声明自己对静默安装不熟,也害怕初问题,所以不使用静默安装的方式. 因为是最小化安装,所以必须安装GUI界面才可以,以下是过程(早上回忆的,全文字,无截图) 1. 安装GUI界面 yum group ...

  8. [官方]Beyond Compare里面 二进制比较的含义.

    Content Comparisons Actions > Compare Contents In the Actions menu, the Compare Contents command ...

  9. IdentityServer4 系列文章01---密码授权模式

    IdentityServer4实现.Net Core API接口权限认证(快速入门)   什么是IdentityServer4 官方解释:IdentityServer4是基于ASP.NET Core实 ...

  10. c++基础之字符串、向量和数组

    上一次整理完了<c++ primer>的第二章的内容.这次整理本书的第3章内容. 这里还是声明一下,我整理的主要是自己不知道的或者需要注意的内容,以我本人的主观意志为准,并不具备普适性. ...