最近打算自己做一个博客系统,并不打算使用帝国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. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  2. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  3. 高大上的微服务可以很简单,使用node写微服务

    安装 npm install m-service --save 使用 编写服务处理函数 // dir1/file1.js // 使用传入的console参数输出可以自动在日志里带上request id ...

  4. Content Security Policy 入门教程

    阮一峰文章:Content Security Policy 入门教程

  5. 转:聊聊mavenCenter和JCenter

    Gradle支持从maven中央仓库和JCenter上获取构件,那这两者有什么区别呢? maven中央仓库(http://repo1.maven.org/maven2/)是由Sonatype公司提供的 ...

  6. 步入angularjs directive(指令)--准备工作熟悉hasOwnProperty

    在讲解directive之前,先做一下准备工作,为何要这样呢? 因为我们不是简单的说说directive怎么用,还要知道为什么这么用!(今天我们先磨磨刀!). 首先我们讲讲js 基础的知识--hasO ...

  7. SQL Server2008R2 在windows8上安装,出现“兼容性”和 “执行未经授权的操作”的错误!

    本人是windows8.1的操作系统,亲测安装成功 解决方法如下: 1.卸载干净sql Server2008r2,包括注册表内容,删除c盘下的安装路径! 2.关闭防火墙(这步很重要) 3.断开网络连接 ...

  8. 【转】为什么我们都理解错了HTTP中GET与POST的区别

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...

  9. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  10. JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...