最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了。好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是地址,由于里面有些demo和代码实例,我就不再赘述了。直接到官网下载到zip包,解压会有下面的东西

  我们将这些东西全部引入我们的项目中,在自己的html页面引入,大致如下

  初始化SimDitor只用在html页写一个textarea标签和javascript写入初始化就行了

  var editor = new Simditor({ textarea:$('#Editor')});

  注意,上面引入的js文件顺序不同的话可能导致页面不能完全初始化。

  如此美丽的富文本编辑器看到就想摸两下,呵呵。

  这里是初始化好了,这里问题来了,就是图片问题。SimDitor提供了图片上传功能,在设置的时候讲upload设置为键值对就行了,详情见官网。大致的东西就是一个后台处理程序的接口(一般采用一般处理程序ASHX处理【asp.net】),我们来看看需要上传功能的SimDitor初始化

$(function () {

       //var editor = new Simditor({ textarea:$('#Editor')});

       toolbar = ['title', 'bold', 'italic','underline', 'strikethrough',

           'color','|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',

           'link','image', 'hr', '|', 'indent', 'outdent'];//设置工具栏

       var editor = new Simditor({

           textarea:$('#Editor'),

          placeholder: '这里输入内容...',

           toolbar:toolbar,  //工具栏  

          defaultImage: '/Content/SimDetor/images/image.png',//编辑器插入图片时使用的默认图片  

           upload:{

              url: 'Api/UploadImg.ashx',//文件上传的接口地址  

              params: null,//键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交  

              fileKey: 'fileDataFileName',//服务器端获取文件数据的参数名  

              connectionCount: 3,

              leaveConfirm: '正在上传文件'

           }

       });

    });

  

  我们通过后台的处理文件就可以实现图片上传啦,后台要求返回一个json字符串,其中必须包括success和file_path这两个东西,file_path一定不能错,错了会显示‘上传出错了’,看代码

public void ProcessRequest(HttpContextcontext)

       {         

          context.Response.Charset="UTF-8";

          context.Response.ContentType="text/plain";

           var files= context.Request.Files;

           stringtimeString=DateTime.Now.ToString("yyyyMMdd/");

           stringuploadFilePath = HttpContext.Current.Server.MapPath("/upload/") +timeString;

           if(!Directory.Exists(uploadFilePath))

           {

             Directory.CreateDirectory(uploadFilePath);//如果不存在,则创建

           }

          files[0].SaveAs(uploadFilePath +System.IO.Path.GetFileName(files[0].FileName));

           stringimgurl = "/upload/"+timeString +System.IO.Path.GetFileName(files[0].FileName);

           string msg= "{\"success\":\"" + true + "\",\"file_path\":\"" + imgurl +"\"}";

          context.Response.Write(msg);

          context.Response.End();

       }

  

  这里没有对上传的文件类型做判断,朋友们自己写咯。好了,完整的运行效果如下

  如有疑问,欢迎访问seesharply.com留言

富文本编辑器Simditor的简易使用的更多相关文章

  1. 富文本编辑器Simditor

    文档地址:https://simditor.tower.im/docs/doc-usage.html 父组件: options: { placeHolder: 'this is placeHolder ...

  2. 简易富文本编辑器bootstrap-wysiwyg源码注释

    好久没写随笔了,因为最近比较忙,小公司基本都是一个前端干所有属于和部分不属于前端的事情,所以就没空弄了,即使想分享,也因为没有时间和精力就搁置了. 这周周六日休息,正好时间比较充裕(ps:目前处在单休 ...

  3. Simditor 富文本编辑器多选图片上传、视频连接插入

    simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...

  4. Simditor 富文本编辑器

    Simditor 是团队协作工具 Tower 使用的富文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速 输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验 兼容的浏览器:IE1 ...

  5. 【前端】wangEditor(富文本编辑器) 简易使用示例

    转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...

  6. C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)

    描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示 ...

  7. c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)

    描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看. 注:此项目不是MVC架构的. 1.引用文件 项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显 ...

  8. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  9. 浅析富文本编辑器框架Slate.js

    浅析富文本编辑器框架Slate.js 本文不是关于Slate.js使用入门的文章,如果还不了解该框架,建议先阅读下官方的文档:Slate官网文档 关于Slate的一些特性 不同于其他编辑器类的库,Sl ...

随机推荐

  1. 一步步开发自己的博客 .NET版(11、Web.config文件的读取和修改)

    Web.config的读取 对于Web.config的读取大家都很属性了.平时我们用得比较多的就是appSettings节点下配置.如: 我们对应的代码是: = ConfigurationManage ...

  2. MVC Core 网站开发(Ninesky) 2、栏目

    栏目是网站的常用功能,按照惯例栏目分常规栏目,单页栏目,链接栏目三种类型,这次主要做添加栏目控制器和栏目模型两个内容,控制器这里会用到特性路由,模型放入业务逻辑层中(网站计划分数据访问.业务逻辑和We ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统 (源码购买说明)

    系列目录 升级日志 !!!重大版本更新:于2016-12-20日完成了系统的结构重构并合并简化了T4(这是一次重要的更新,不需要修改现有功能的代码),代码总行数比上个版本又少了1/3.更新了代码生成器 ...

  4. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  5. 代码的坏味道(17)——夸夸其谈未来性(Speculative Generality)

    坏味道--夸夸其谈未来性(Speculative Generality) 特征 存在未被使用的类.函数.字段或参数. 问题原因 有时,代码仅仅为了支持未来的特性而产生,然而却一直未实现.结果,代码变得 ...

  6. css样式之超出隐藏

    文本超出部分隐藏,总结两种方法. 1.单行隐藏 html代码 <div class="mi">当文字超过范围的时候,超出部分会隐藏起来.</div> css ...

  7. Android中ListView实现图文并列并且自定义分割线(完善仿微信APP)

    昨天的(今天凌晨)的博文<Android中Fragment和ViewPager那点事儿>中,我们通过使用Fragment和ViewPager模仿实现了微信的布局框架.今天我们来通过使用Li ...

  8. 在ASP.NET MVC 4 on Mono中使用OracleClient in CentOS 6.x的问题记录

    在ASP.NET MVC 4 on Mono中使用OracleClient in CentOS 6.x的问题记录 前言 最近有个Web项目,业务功能不复杂,但是这个客户(某政府部门)有两个硬性要求:1 ...

  9. chrome拓展开发实战:页面脚本的拦截注入

    原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入 目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理, ...

  10. 分布式理论之一:Paxos算法的通俗理解

    维基的简介:Paxos算法是莱斯利·兰伯特(Leslie Lamport,就是 LaTeX 中的"La",此人现在在微软研究院)于1990年提出的一种基于消息传递且具有高度容错特性 ...