文档章节

使用Simditor和七牛上传图片

上官胡闹
 上官胡闹
发布于 2016/03/19 18:44
字数 279
阅读 321
收藏 0

Simditor是tower开源的一款网页编辑器官方网址:http://simditor.tower.im

为了使Simditor编辑文档时能将图片自动从前端上传到qn,需要修改它的uploader.js源码,修改后的uploader代码http://git.oschina.net/sunyurepository/javascript/tree/master/src/js的qnuploader.js

引入Simditor的css和相关的js(ps:qnuploader是自己改来支持七牛的,非官方的)

 <link rel="stylesheet" type="text/css" href="/simditor2.1.5/styles/simditor.css"/>
 <script type="text/javascript" src="../simditor2.1.5/scripts/jquery.min.js"></script>
 <script type="text/javascript" src="../simditor2.1.5/scripts/module.js"></script>
 <script type="text/javascript" src="../simditor2.1.5/scripts/hotkeys.js"></script>
 <script type="text/javascript" src="../simditor2.1.5/scripts/qnuploader.js"></script>
 <script type="text/javascript" src="../simditor2.1.5/scripts/simditor.js"></script>

使用实例:

  $(function () {
        //启用编辑器
        var toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'];
        var editor = new Simditor({
            textarea: $("#content"),
            toolbar: toolbar,
            imageButton: ['upload', 'external'],
            toolbarFloat: true,
            placeholder:'请填写内容',
            upload: {
                url: 'http://up.qiniu.com', //文件上传的接口地址
                qnTokenUrl: '../xxx/getToken',//从服务器获取token接口地址
                fileKey: 'file', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件,你确定要离开这个页面吗?',
                fileSize: 2097152
            }
        });
    });

 

© 著作权归作者所有

共有 人打赏支持
上官胡闹
粉丝 54
博文 82
码字总数 58868
作品 1
成都
程序员
私信 提问
加载中

评论(2)

上官胡闹
上官胡闹
可以的
fatsnake_o
fatsnake_o
您好,我在工作中也遇到了同样的问题,可否参考下你的修改的代码?
http://git.oschina.net/sunyurepository/javascript/tree/master/src/js 这个链接访问时 返回403
微信小程序 - 接入七牛云系列

针对自己开发中对七牛的使用,准备总结几篇接入七牛云系列的文章: 1、会简单介绍七牛云和基本使用。 2、小程序前台接入七牛云上传图片和视频。(微信小程序 - 前台接入七牛云上传图片和视频...

几个栗子
2018/08/22
0
0
ueditor上传图片到七牛云存储(form api,java)

ueditor上传图片到七牛云存储 重要说明,本人已不做java多年,请不要加qq再问我java的东东,欢迎提问python。 ueditor结合七牛传图片 传统上,图片是存在自己的服务器上(图片->自己服务器),...

duoduo3_69
2013/11/06
0
16
七牛云模块化文档

前言 闲来无事,搭建了个人私仓来放模块化项目,以便项目引入直接使用。关键是,模块化可以根据项目所需进行版本迭代,每一次的使用都是完善的根基,效果贼棒。 介绍 七牛云是国内领先的企业...

Joryun刘家源
2018/01/02
0
0
微信小程序 - 前台接入七牛云上传图片和视频

相信小程序开发者在开发过程中都会遇到上传代码包遇到大小限制这个问题,因为微信现在规定代码不能超过 2 MB 大小,但我们实际开发过程中难免会有业务需求要使用一些图片和视频等媒体文件,这...

几个栗子
2018/10/14
0
0
mikey.zhaopeng/ndpediter

ndpediter 原因 现在使用 markdown 编辑器,但是图片存储是个问题,是放在本地还是上传到哪里,目前已有的编辑器中,没有能满足我自己使用的,由于当下就造了一个轮子出来. 特性 支持 markdown, ...

mikey.zhaopeng
2015/11/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 世界的源代码

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @小鱼丁 :#今日歌曲推荐# 分享Jason Mraz的单曲《Prettiest Friend (Demo)》: 《Prettiest Friend (Demo)》- Jason Mraz 手机党少年们想听歌...

小小编辑
13分钟前
2
0
java框架学习日志-13(Mybatis基本概念和简单的例子)

在mybatis初次学习Mybatis的时候,遇到了很多问题,虽然阿里云的视频有教学,但是视频教学所使用的软件和我自己使用的软件不用,我自己用的数据库是oracle数据库,开发环境是idea。而且视频中...

白话
今天
4
0
Java基础:String、StringBuffer和StringBuilder的区别

1 String String:字符串常量,字符串长度不可变。Java中String是immutable(不可变)的。 String类的包含如下定义: /** The value is used for character storage. */private final cha...

watermelon11
今天
3
0
mogodb服务

部署MongoDB 官网: https://www.mongodb.com/download-center/community 创建mongo数据目录 mkdir /data/mongodb 二进制部署 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x8......

以谁为师
昨天
5
0
大神教你Debian GNU/Linux 9.7 “Stretch” Live和安装镜像开放下载

Debian项目团队于昨天发布了Debian GNU/Linux 9 "Stretch" 的第7个维护版本更新,重点修复了APT软件管理器中存在的安全漏洞。在敦促每位用户尽快升级系统的同时,Debian团队还发布了Debian ...

linux-tao
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部