bootstrap富文本
先把设定富文本框架
先去AdminLET官网下载一个AdminLET源码 在将需要的框架复制过来
<div class=”form-group”>
<label class=”col-sm-2 control-label”>内容简介</label>
<div class=”col-sm-10″>
<textarea class=”form-control” rows=”3″ id=”FAbout” placeholder=”请输入内容描述”></textarea>
</div>
使用前将第三方文件的ckeditor文件夹 整个复制过来 （注：不能单独复制JS 如果单独复制 富文本样式会显示不出来）
再引用ckeditor文件夹中的js
<script src=”../ckeditor/ckeditor.js”></script>
再写一个页面刷新后直接调用的方法
$(function () { //添加富文本样式 // Replace the <textarea id="editor1"> with a CKEditor // instance, using default configuration. obj = CKEDITOR.replace(\'editor1\') })
保存刷新页面即可
如果想让富文本加入图片；
就在指定JS中修改代码
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、创建自定义的图片上传处理程序（这里是创建一般处理程序：（ashx页面）） 这里传递的值为（HttpContext context）
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方法为
/// <summary> /// 图片上传 并保存至服务器 返回 保存图片的相对路径URL /// </summary> /// <param name="context"></param> /// <param name="file"></param> /// <returns></returns> public string ImgUp(HttpContext context) { //上传的第一个文件 HttpPostedFile file = context.Request.Files[0]; //获取图片的名称 string ImgName = file.FileName; //获取图片的扩展名 string ImgExtention = System.IO.Path.GetExtension(ImgName); //将图片流文件保存在 字节序列容器 中 Stream stream = file.InputStream; //将图片流文件转换为Image图片对象 Image img = Image.FromStream(stream); //将图片保存在服务器上 //为了防止图片名称重复 我们使用随机数命名 Random ran = new Random((int)DateTime.Now.Ticks); //图片保存的目录 按照日期进行保存 string subPath = "/imgUploads/" + DateTime.Now.ToString("yyyyMMdd") + "/"; // 20190928 //图片保存的目录的绝对路径 string path = context.Server.MapPath(subPath); //当文件夹路径不存在时 创建文件夹 if (false == System.IO.Directory.Exists(path)) { //创建pic文件夹 System.IO.Directory.CreateDirectory(path); } string imgName = ran.Next(99999) + ImgExtention; string serverPath = path + imgName;//文件保存位置及命名 string imgPath = subPath + imgName; try { img.Save(serverPath); return imgPath; } catch { return ""; } }
如果船舰的MVC页面就不能传的值就不能用（HttpContext context）了（HttpContext context）传值，会报警 如果不写值 页面会接收不到，
这里要使用一个基类（HttpRequestBase httpRequestBase,HttpPostedFileBase file） 传值为（Request, Request.Files[0]）
public string shangchuanImg() { if(Request.Files.Count>0) { //声明SCTUController新的页面 SCTUController load = new SCTUController(); //imgUrl 等于cPTUController页面的FileImg方法 string imgUrl = load.FileImg(Request, Request.Files[0]); Request.ContentType = "text/html;charset=UTF-8"; String callback = Request.Params["CKEditorFuncNum"]; //返回前台富文本页面 return ("<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ",\'" + imgUrl + "\',\'\'" + ")</script>"); } else { return ""; } }
FileImg页面代码为
/// <summary> /// 图片上传 并保存至服务器 返回 保存图片的相对路径URL /// </summary> /// <param name="httpRequestBase"></param> /// <param name="file"></param> /// <returns></returns> public string FileImg(HttpRequestBase httpRequestBase,HttpPostedFileBase file) { //将图片保存在服务器上 string ImgName = file.FileName; string ImgExtention = System.IO.Path.GetExtension(ImgName); //将图片流保存在字节序列容器中 Stream stream = file.InputStream; //将图片流文件转换为Image图片对象 Image img = Image.FromStream(stream); //为防止图片流重复 我们使用随机数命名 Random ran = new Random((int)DateTime.Now.Ticks); //图片保存的目录 按照保存日期进行保存 string subPath = "/imgUploads/" + DateTime.Now.ToString("yyyyMMdd") + "/"; // 201901105 //图片保存的目录的绝对路径 string path = httpRequestBase.MapPath(subPath); //判断如果当保存的文件夹不存在时 创建文件夹 if (false == System.IO.Directory.Exists(path)) { //创建pic文件夹 System.IO.Directory.CreateDirectory(path); } string imgName = ran.Next(99999) + ImgExtention; string serverPath = path + imgName;//文件保存位置及命名 string imgPath = subPath + imgName; try { img.Save(serverPath); return imgPath; } catch { return ""; } }
注意： 页面不一样 传递数值的类型也不一样 不然会传值传过去 另一个方法接收不到数值
注：FileImg和ImgUpLoad方法也可以储存前台传送的图片方法，只是普通页面写法 和MVC页面写法的两种方式。