CKEditor 4 上传图片
参考资料:Basic Configuration
直接Ctrl+v(粘贴图片)报错信息:上传文件时发生网络错误(networkError:Network error occurred during file upload)
版本:4.11.4,API接口直接返回图片地址即可
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbarGroups = [
{ name: 'clipboard', groups: ['clipboard', 'undo'] },
{ name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
{ name: 'forms', groups: ['forms'] },
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
{ name: 'links', groups: ['links'] },
{ name: 'insert', groups: ['insert'] },
{ name: 'styles', groups: ['styles'] },
{ name: 'colors', groups: ['colors'] },
{ name: 'document', groups: ['document', 'doctools', 'mode'] },
{ name: 'tools', groups: ['tools'] },
{ name: 'others', groups: ['others'] },
{ name: 'about', groups: ['about'] }
];
//移除的按钮
config.removeButtons = 'Templates,Print,Find,Replace,SelectAll,Scayt,Checkbox,Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Blockquote,BidiLtr,BidiRtl,Flash,PageBreak,Iframe,About,ShowBlocks,Smiley,SpecialChar,HorizontalRule,CopyFormatting,RemoveFormat';
//上传图片窗口用到的接口
config.filebrowserImageUploadUrl = "https://192.168.0.1/api/ECategoryDetail/UploadImg";
config.filebrowserUploadUrl = "https://192.168.0.1/api/ECategoryDetail/UploadImg";
// 使上传图片弹窗出现对应的“上传”tab标签
config.removeDialogTabs = 'image:advanced;link:advanced';
//粘贴图片时用得到
config.extraPlugins = 'uploadimage';
config.uploadUrl = 'https://192.168.0.1/api/ECategoryDetail/UploadImg';
};
留下的按钮样式如下图:

建议大家有条件的直接用谷歌,百度找了半天没有有用的资料。
CKEditor 4 上传图片的更多相关文章
- CkEditor批量上传图片(java)
CKEditor上传视频CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ 最 ...
- 富文本文件CKEDITOR增加上传图片功能(.net)
如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...
- UEditor和CKEditor配置上传图片,视频,附件
UEditor: http://blog.sina.com.cn/s/blog_8bb128230102v12x.html CKEditor:http://blog.sina.com.cn/s/blo ...
- ckeditor增加上传图片的功能
1.配置config.js开启图片上传选项卡. CKEDITOR.editorConfig = function( config ) { config.filebrowserImageUploadUr ...
- drupal7中CKEditor开启上传图片功能
在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...
- ckeditor粘贴上传图片
公司做的项目需要用到文本上传功能. 网上找了很久,大部分都有一些不成熟的问题,皇天不负有心人终于让我找到了一个成熟的项目. 接下来就看一下吧 1.打开工程: 对于文档的上传我们需要知道这个项目的逻辑是 ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- CKEditor上传视频(java)
CKEditor上传视频 CKEditor批量上传图片flvplayer.swf播放器CKEditor整合包(v4.6.1) ------------------------------------ ...
- Ckeditor 中粘贴图片
我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片. 这里我们实现主要是获取对应的粘贴事件. CKEDITOR.instances[&quo ...
随机推荐
- msyql error: Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A
mysql> use mydb Reading table information for completion of table and column names You can turn o ...
- 工作必备之正则匹配、grep、sed、awk
常用正则:匹配空行:^\s*\n 匹配www开头:^www 添加行号:awk '$0=""NR". "$0' /etc/yum.conf 1.所有域名前加www ...
- nginx访问jupyter
现在jupyter已通过k8s安装完成,并通过nodeport暴露出来. 如果不能直接访问这个nodeport(像我在的公司)或是希望能组织好jupyter实例, 那应该如何调通呢? 这里包括两个技术 ...
- 洛谷P2634 [国家集训队]聪聪可可(点分治)
传送门 题意: 给出一颗树,每条边都有一定的边权. 先问点之间路径和为\(3\)的倍数的点对有多少. 思路: 点分治模板题. 可以将问题转化为经过一个点\(t\)的路径和不经过点\(t\)的路径两种情 ...
- 从零开始写Hystrix
1.springboot+自定义注解实现灵活的切面配置 利用aop我们可以实现业务代码与系统级服务例如日志记录.事务及安全相关业务的解耦,使我们的业务代码更加干净整洁. 首先创建一个springboo ...
- JS高阶---简介+数据类型
首先看下大概流程 [一]基础 接下来看下数据类型分类和判断 (1)数据类型分类 基本类型/值类型5种 ---字符串String.数字Number.布尔值Boolean.未定义undefined.空nu ...
- Word 2016中公式不能自动斜体的解决方法
参考资料: 中文版 Office 数学公式默认不是斜体 为什么Word 2007中的公式编辑器字体不能自动倾斜 归纳总结 这个问题自Word 2007开始就存在,直至我目前用的Word 2016都没有 ...
- 云服务器ECS(Elastic Compute Service),知识点
资料 网址 什么是云服务器ECS https://help.aliyun.com/document_detail/25367.html?spm=a2c4g.11186623.6.544.4e1e376 ...
- Android 获取联系人的号码的类型描述
...... int index = phonesCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER); int t ...
- MyBatisSystemException 【exception】
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.type.TypeException: ...