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地址
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片的更多相关文章
- vue-quill-editor富文本编辑器,上传图片自定义为借口上传
vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194
- 富文本编辑器 - wangEditor 上传图片
效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传< ...
- ExtJs Ext.form.field.TextArea+Ckeditor 扩展富文本编辑器
Ext.define("MyApp.base.BaseTextArea", { extend: "Ext.form.field.TextArea", xtype ...
- 富文本编辑器--FCKEditor 上传图片
FCKEditor的最新版本已经更改名称为CKEditor: 1.在页面引入fckeditor目录下的fckeditor.js <script type="text/javascrip ...
- KindEditor - 富文本编辑器 - 使用+上传图片
代码高亮:http://www.cnblogs.com/KTblog/p/5205214.html 效果: 项目结构: Extend:存放各种扩展 BlogAction.class.php:博文模块 ...
- 百度富文本编辑器Ueditor上传图片时标签中添加宽高
ueditor.all.js中:直接搜索callback() function callback(){ try{ var link, json, loader, body = (iframe.cont ...
- (转)淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
- xadmin引入django-ckeditor富文本编辑器
一.安装: pip install django-ckeditor 安装django-ckeditor库 https://github.com/django-ckeditor/django-ckedi ...
随机推荐
- c++实现的顺序栈
栈是一种运算受限的线性表,是一种先进后出的数据结构,限定只能在一端进行插入和删除操作,允许操作的一端称为栈顶,不允许操作的称为栈底 因此需要的成员变量如下 int *_stack; //指向申请的空间 ...
- Git Gui、Ssh key的使用和ideaui配置使用Git解决冲突(下)
目的: 1.Git Gui的使用 2.Ssh key 介绍及使用 2.1小结:https 和 SSH 的区别 3.Idea配置使用并使用git 4.ideaui使用Git冲突问题解决 Git Gui的 ...
- babel tsc webpack
我要用啥?js的话:babel编译+webpack模块打包ts的话:tsc编译成js+babel编译+webpack模块打包浏览器情况:如果您的浏览器支持es6所有语法那么就可以只用webpack来处 ...
- hdu 2132... 被基本问题考住了。。
Problem Description We once did a lot of recursional problem . I think some of them is easy for you ...
- JavaDoc工具和Ideade javadoc工具
命令参考: javadoc -locale zh_CN -protected -notree -nonavbar -noindex -use -author -version -encoding UT ...
- C# 字符串补位方法
string i=9; 方法1:Console.WriteLine(i.ToString("D5")); 方法2:Console.WriteLine(i.ToString().Pa ...
- [转]github 上传project代码
原文地址:https://www.cnblogs.com/f1194361820/p/4741558.html 1)将远程仓库纳入管理 其实就是添加远程仓库,在你已有的本地仓库目录下执行如下命令: $ ...
- flutter常见编译运行等奇怪问题的汇总汇(l转)
1. flutter ios 卡死在闪屏页:解决办法: 1) flutter doctor 2) flutter clean 3) flutter build ios --release 4) Arc ...
- 作为一名SAP从业人员,需要专门学习数学么
最近和SAP成都研究院的开发同事聊到过这个话题,Jerry来说说自己的看法. 先回忆回忆自己本科和研究生学过的数学课程.Jerry的大一生活是在电子科技大学的九里堤校区度过的,本科第一门数学课就是微积 ...
- osi七层网络模型(一)
在网络中OSI分为七层网络模型,怎么理解七层模型呢?简单理解我们的手机都有手机壳.屏幕.摄像头.电池.芯片等很多原件,每个原件都是由不同的 厂家生产,最终组装成了一部功能完整的手机,同样,在网络中,也 ...