最近打算自己做一个博客系统,并不打算使用帝国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. Java多线程基础学习(一)

    1. 创建线程    1.1 通过构造函数:public Thread(Runnable target, String name){}  或:public Thread(Runnable target ...

  2. 浅谈我对DDD领域驱动设计的理解

    从遇到问题开始 当人们要做一个软件系统时,一般总是因为遇到了什么问题,然后希望通过一个软件系统来解决. 比如,我是一家企业,然后我觉得我现在线下销售自己的产品还不够,我希望能够在线上也能销售自己的产品 ...

  3. Python学习--04条件控制与循环结构

    Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...

  4. 2D、3D形变

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...

  5. 用scikit-learn学习DBSCAN聚类

    在DBSCAN密度聚类算法中,我们对DBSCAN聚类算法的原理做了总结,本文就对如何用scikit-learn来学习DBSCAN聚类做一个总结,重点讲述参数的意义和需要调参的参数. 1. scikit ...

  6. 微信小程序教程汇总

    目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下 ...

  7. Android开发学习—— Broadcast广播接收者

    现实中:电台要发布消息,通过广播把消息广播出去,使用收音机,就可以收听广播,得知这条消息.Android中:系统在运行过程中,会产生许多事件,那么某些事件产生时,比如:电量改变.收发短信.拨打电话.屏 ...

  8. 敏捷软件开发VS传统软件工程

    敏捷软件开发:又称敏捷开发,是一种从1990年代开始逐渐引起广泛关注的一些新兴软件开发方法,是一种应对快速变化的需求的一种软件开发能力. 与传统软件工程相比,它们的具体名称.理念.过程.术语都不尽相同 ...

  9. A/B Testing的简要知识

    A/B testing主要用来检测网站或者APP的两个版本中哪一个更好,它的中心思想是把流量一分为二,一份用作experiment group,访问新的版本,另一份用作control group,访问 ...

  10. 使用win10远程控制ubuntu16.04

    使用win10远程控制ubuntu16.04,网上很多需要安装xfce桌面的.今天介绍一下,不需要安装其他桌面,使用Ubuntu16.04自带桌面,漂亮美观. Ubuntu16.04端: 1.打开终端 ...