使用Simditor和七牛上传图片

2019独角兽企业重金招聘Python工程师标准>>>

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
            }
        });
    });

 

转载于:https://my.oschina.net/u/1760791/blog/643768