在使用中，可能需要对其进行优化，特此记录一下。
- 简化工具栏
- 多张图片上传
- 剪切板图片直接上传
var config = {
// uploadUrl: '/ckupload_img', // 有压缩的上传照片，防止手机拍照图片文件太大，加载慢
height: '300px',
toolbar: [[
'Blockquote', 'NumberedList', 'BulletedList',
'Smiley', 'Image', 'Link', 'SpecialChar',
'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
'CodeSnippet', 'Maximize'
]]
};
CKEDITOR.replace('content', config);
2. 多张图片上传，需要用到SimpleImageUpload插件
var config = {
uploadUrl: '/ckupload_img', // 有压缩的上传照片，防止手机拍照图片文件太大，加载慢
extraPlugins: 'smiley,simpleImageUpload', // 简化上传，自动裁切图片
height: '100px',
toolbar: [
['Smiley', 'Image']
]
};
CKEDITOR.replace('content', config);
注意：页面中的extraPlugins设置会覆盖根目录下 config.js 中extraPlugins 的设置在后端的图片上传函数：
@app.route('/ckupload_img', methods=['POST', 'OPTIONS'])
def ckupload_img():
'''
@description: 用于有压缩的图片上传，主要用在说说页面
@param :
@return:
'''
error = ''
url = ''
if request.method == 'POST' and 'file' in request.files:
images = []
fileobjs = request.files.getlist("file")
for fileobj in fileobjs:
fname, fext = os.path.splitext(fileobj.filename)
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
# print(rnd_name)
filepath = os.path.join(STATIC_FOLDER, 'upload/article', rnd_name)
# 检查路径是否存在，不存在则创建
dirname = os.path.dirname(filepath)
if not os.path.exists(dirname):
try:
os.makedirs(dirname)
except:
error = 'ERROR_CREATE_DIR'
elif not os.access(dirname, os.W_OK):
error = 'ERROR_DIR_NOT_WRITEABLE'
if not error:
fileobj.save(filepath)
url = url_for('static', filename='%s/%s' % ('upload/article', rnd_name))
data = compress_image(filepath, url, 400, 800)
images.append(data)
return jsonify(images=images)
压缩图片函数：
def compress_image(filepath, url, max_width, max_height):
'''
@description: 压缩尺寸过大的图片
@param : 文件路径，图片网址，图片最大宽度，图片最大高度
@return:
'''
data = {}
# 打开原始图片，并后去宽度和高度
original_image = Image.open(filepath)
w, h = original_image.size
# 只有当原图尺寸大于 允许的最大宽和高 的时候才进行压缩
if h > max_height or w > max_width:
if w >= h:
ratio = float(max_width / h)
new_w = int(ratio * w)
new_h = max_width
big_h = max_height
big_w = int(max_height * w / h)
else:
ratio = float(max_width / h)
new_w = int(ratio * w)
new_h = max_width
big_w = max_width
big_h = int(max_width * h / w)
new_image = original_image.resize((big_w, big_h), Image.ANTIALIAS)
new_image.save(filepath)
data['url'] = url
data['width'] = new_w
data['height'] = new_h
data['data_width'] = big_w
data['data_height'] = big_h
else:
data['url'] = url
data['width'] = w
data['height'] = h
data['data_width'] = w
data['data_height'] = h
return data
最后奉上SimpleImageUpload.js函数
CKEDITOR.plugins.add( 'simpleImageUpload', {
init: function( editor ) {
var fileDialog = $('<input type="file" multiple="multiple">');
fileDialog.on('change', function (e) {
var uploadUrl = editor.config.uploadUrl;
var files = fileDialog[0].files;
var imageData = new FormData();
for (var i = 0; i<files.length; i++){
imageData.append('file', files[i]);
}
$.ajax({
url: uploadUrl,
type: 'POST',
contentType: false,
processData: false,
data: imageData
}).done(function(data) {
//console.log(data);
for (var i = 0; i < data.images.length; i++) {
image = data.images[i];
var ele = editor.document.createElement('img');
ele.setAttribute('src', image.url);
ele.setAttribute('data-action', 'zoom');
ele.setAttribute('data-width', image.data_width);
ele.setAttribute('data-height', image.data_height);
ele.setAttribute('class','zoom-image');
// ele.setAttribute('style', 'width:'+image.width+'px;height:'+image.height+'px;');
editor.insertElement(ele);
}
});
});
editor.ui.addButton( 'Image', {
label: 'Insert Image',
command: 'openDialog',
toolbar: 'insert'
});
editor.addCommand('openDialog', {
exec: function(editor) {
fileDialog.click();
}
})
}
});
3. 剪切板内容上传，需要CKEditor 4.11版本之后，具体是多少忘了，反正早期的版本是不支持的。
config.plugins = 'dialogui,dialog,about,a11yhelp,basicstyles,blockquote,notification,button,toolbar,clipboard,panel,floatpanel,menu,contextmenu,resize,elementspath,enterkey,entities,popup,filetools,filebrowser,floatingspace,listblock,richcombo,format,horizontalrule,htmlwriter,wysiwygarea,image,indent,indentlist,fakeobjects,link,list,magicline,maximize,pastetext,pastefromword,removeformat,showborders,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,tableselection,undo,lineutils,widgetselection,widget,notificationaggregator,uploadwidget,uploadimage,wsc';
config.skin = 'moono-lisa';
config.extraPlugins = 'uploadimage,codesnippet,texzilla,image2,preview,font,smiley';
4. 工具栏样式。修改根目录下contents.css中body的样式，使文本框内部padding变小。
body
{
/* Font */
/* Emoji fonts are added to visualise them nicely in Internet Explorer. */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent. */
background-color: #fff;
margin: 10px;
}
mainui.css
/*
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/*
mainui.css (part of editor.css)
=================================
This file styles the basic structure of the CKEditor user interface - the box
that holds everything.
CKEditor offers two main editing modes. The main UI blocks that compose these
modes are:
For "Theme UI" mode, the one most generally used:
+-- .cke_chrome ----------------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_contents --------------+ ||
|| | | ||
|| +-------------------------------+ ||
|| +-- .cke_bottom ----------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
For "Inline Editing" mode:
+-- .cke_chrome .cke_float------------+
|+-- .cke_inner ---------------------+|
|| +-- .cke_top -------------------+ ||
|| | | ||
|| +-------------------------------+ ||
|+-----------------------------------+|
+-------------------------------------+
Special outer level classes used in this file:
.cke_hc: Available when the editor is rendered on "High Contrast".
*/
/* The outer boundary of the interface. */
.cke_chrome
{
/* This is <span>, so transform it into a block.*/
display: block;
border: 1px solid #d1d1d1;
padding: 0;
}
/* The inner boundary of the interface. */
.cke_inner
{
/* This is <span>, so transform it into a block.*/
display: block;
background: #fff;
padding: 0;
-webkit-touch-callout: none; /* Safari only */
}
/* Added to the outer boundary of the UI when in inline editing,
when the UI is floating. */
.cke_float
{
/* Make white the space between the outer and the inner borders. */
border: none;
}
.cke_float .cke_inner
{
/* As we don't have blocks following top (toolbar) we suppress the padding
as the toolbar defines its own margin. */
padding-bottom: 0;
}
/* Make the main spaces enlarge to hold potentially floated content. */
.cke_top,
.cke_contents,
.cke_bottom
{
/* These are <span>s, so transform them into blocks.*/
display: block;
/* Ideally this should be "auto", but it shows scrollbars in IE7. */
overflow: hidden;
}
.cke_top
{
border-bottom: 1px solid #d1d1d1;
/* background: #f8f8f8; */
padding: 4px 6px 0px;
/* Allow breaking toolbars when in a narrow editor. (#9947) */
white-space: normal;
}
.cke_float .cke_top
{
border: 1px solid #d1d1d1;
}
.cke_bottom
{
padding: 6px 8px 2px;
position: relative;
border-top: 1px solid #d1d1d1;
background: #f8f8f8;
}
/* On iOS we need to manually enable scrolling in the contents block. (#9945) */
.cke_browser_ios .cke_contents
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* The resizer is the small UI element that is rendered at the bottom right
part of the editor. It makes is possible to resize the editor UI. */
.cke_resizer
{
/* To avoid using images for the resizer, we create a small triangle,
using some CSS magic. */
width: 0;
height: 0;
overflow: hidden;
border-width: 10px 10px 0 0;
border-color: transparent #bcbcbc transparent transparent;
border-style: dashed solid dashed dashed;
font-size: 0;
vertical-align: bottom;
margin-top: 6px;
/* A margin in case of no other element in the same container
to keep a distance to the bottom edge. */
margin-bottom: 2px;
}
.cke_hc .cke_resizer
{
font-size: 15px;
width: auto;
height: auto;
border-width: 0;
}
.cke_resizer_ltr
{
cursor: se-resize;
float: right;
margin-right: -4px;
}
/* This class is added in RTL mode. This is a special case for the resizer
(usually the .cke_rtl class is used), because it may not necessarily be in
RTL mode if the main UI is RTL. It depends instead on the context where the
editor is inserted on. */
.cke_resizer_rtl
{
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent #bcbcbc;
border-style: dashed dashed dashed solid;
cursor: sw-resize;
float: left;
margin-left: -4px;
right: auto;
}
/* The editing area (where users type) can be rendered as an editable <div>
element (e.g. divarea plugin). In that case, this is the class applied to
that element. */
.cke_wysiwyg_div
{
display: block;
height: 100%;
overflow: auto;
padding: 0 8px;
outline-style: none;
box-sizing: border-box;
}