bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
时间:2019-10-31
本文章向大家介绍bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片,主要包括bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可
1、找到ckeditor文件夹内image.js 并打开 路径为 ckeditor\plugins\image\dialogs\image.js
在image.js内搜索.config.image_previewText将看到
将其英文删除 修改后效果如下
2、在image.js内搜索id:"Upload"将看到
将id:"Upload",hidden:!0 修改为id:"Upload",hidden:false
3、打开ckeditor目录下的config.js 路径为ckeditor\config.js
在
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
下添加
config.image_previewText = '';
config.filebrowserImageUploadUrl = "FileUpload.ashx"; //这里FileUpload.ashx为自定义的处理程序 用于上传图片
4、创建自定义的图片上传处理程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace FileImg { /// <summary> /// FileUpload 的摘要说明 /// </summary> public class FileUpload : IHttpHandler { public void ProcessRequest(HttpContext context) { //图片上传 ImgUpLoad load = new ImgUpLoad(); //这里的 ImgUpLoad 为已经写好的图片上传程序 可以参考另一篇博文 地址在下面 string imgUrl = load.ImgUp(context); context.Request.ContentType = "text/html;charset=UTF-8"; String callback = context.Request.Params["CKEditorFuncNum"];//必须获取 用于判断上传的那个图片 context.Response.Write("<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" + imgUrl + "',''" + ")</script>"); // 必须返回 用于告诉编辑器上传的图片的位置和地址 } public bool IsReusable { get { return false; } } } }
已经写好的图片上传程序ImgUpLoad地址
https://www.cnblogs.com/taikongbai/p/11770379.html
原文地址:https://www.cnblogs.com/taikongbai/p/11770665.html
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失下篇
- ONOS1.3.0集群实验
- Spring Boot下的TDD(测试驱动开发)
- MySQL的索引是什么?怎么优化?
- C语言之函数
- ElasticSearch搜索引擎在SpringBoot中的实践
- 消费者驱动的微服务契约测试套件Spring Cloud Contract
- 使用Spring Boot开发一个Spring Mobile程序
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失
- 内网穿透工具-ittun
- Elastic-Job-Spring-Boot-Starter简化你的任务配置
- Spring Boot处理REST API错误的正确姿势
- C语言之位运算
- C语言之预处理命令与用typedef命名已有类型
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- linux把一个文件的内容复制到另一个文件的末尾
- 详解linux下nohup日志输出过大问题解决方案
- K8S dashboard 2.0 安装配置并使用 ingress-nginx 访问
- linux模糊查找文件用什么命令比较好
- Ubuntu14.04服务器环境下配置PHP7.0+Apache2+Mysql5.7的方法
- Linux C 后台服务程序单进程控制的实现
- Linux下SSH免密码登录配置详解
- SSH端口转发实现内网穿透的实现
- 在linux中用同一个版本的R 同时安装 Seurat2 和 Seurat3的教程
- AUCell:在单细胞转录组中识别细胞对“基因集”的响应
- linux查看硬件配置命令的方法示例
- Ubuntu环境编译安装PHP和Nginx的方法
- Ubuntu环境源码编译安装xdebug的方法
- CNS图表复现07—原来这篇文章有两个单细胞表达矩阵
- CentOS 7.x 安装 ZSH 终端的配置方法