使用Simditor和七牛上传图片
生活随笔
收集整理的這篇文章主要介紹了
使用Simditor和七牛上传图片
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
Simditor是tower開(kāi)源的一款網(wǎng)頁(yè)編輯器官方網(wǎng)址:http://simditor.tower.im
為了使Simditor編輯文檔時(shí)能將圖片自動(dòng)從前端上傳到qn,需要修改它的uploader.js源碼,修改后的uploader代碼http://git.oschina.net/sunyurepository/javascript/tree/master/src/js的qnuploader.js
引入Simditor的css和相關(guān)的js(ps:qnuploader是自己改來(lái)支持七牛的,非官方的)
<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>使用實(shí)例:
$(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:'請(qǐng)?zhí)顚?xiě)內(nèi)容',upload: {url: 'http://up.qiniu.com', //文件上傳的接口地址qnTokenUrl: '../xxx/getToken',//從服務(wù)器獲取token接口地址fileKey: 'file', //服務(wù)器端獲取文件數(shù)據(jù)的參數(shù)名connectionCount: 3,leaveConfirm: '正在上傳文件,你確定要離開(kāi)這個(gè)頁(yè)面嗎?',fileSize: 2097152}});});?
轉(zhuǎn)載于:https://my.oschina.net/u/1760791/blog/643768
《新程序員》:云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的使用Simditor和七牛上传图片的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 堆垛管理,下料管理系统
- 下一篇: ansible playbook实战——