目的:
使用NKeditor富文本編輯器上傳圖片,同時(shí)上傳到七牛云存儲(chǔ)上。后端語(yǔ)言使用ThinkPHP。
效果
實(shí)現(xiàn)方法:
1、下載NKeditor插件庫(kù)
下載地址:NKeditor: NKedtior是一款優(yōu)秀的輕量級(jí)Web編輯器,基于 Kindedior 二次開(kāi)發(fā)
里面的文檔demo寫(xiě)的比較詳細(xì),可以直接使用,不過(guò)里面上傳七牛云的代碼不能用,所以我是自己寫(xiě)的。?
2、部署
?把下載的NKeditor插件庫(kù)放到/public/文件夾下。
<link href="/NKeditor/libs/bootstrap/bootstrap.min.css" rel="stylesheet"> <div role="tabpanel" class="tab-pane fade" id="default"> <form name="example" method="post"> <textarea name="content2" style="width:900px;height:500px;visibility:hidden;"></textarea> </form> </div> <script charset="utf-8" src="/NKeditor/NKeditor-all.js"></script> <!-- 如果你不需要使用批量圖片上傳,涂鴉功能和文件管理功能,就不需要引入 jquery --> <script charset="utf-8" src="/NKeditor/libs/jquery.min.js"></script> <!-- JDialog是一款優(yōu)秀的漂亮,輕量級(jí)的js彈出框插件 不是必須引入的,如果不引入則使用默認(rèn)的 window.alert() 來(lái)彈出提示信息 --> <script charset="utf-8" src="/NKeditor/libs/JDialog/JDialog.min.js"></script> <script src="/NKeditor/libs/bootstrap/bootstrap.min.js"></script> <script> KindEditor.ready(function(K) { K.create('textarea[name="mytextarea"]', { uploadJson : '/teacher/qiniu/uploadImg', // fileManagerJson : K.basePath+'php/qiniu/file_manager_json.php', dialogOffset : 0, //對(duì)話框距離頁(yè)面頂部的位置,默認(rèn)為0居中, allowFileManager : false, allowImageUpload : true, allowMediaUpload : false, items : ['source','undo','redo','preview','print','code','quote','plainpaste','justifyleft','justifycenter','justifyright','justifyfull','insertorderedlist','insertunorderedlist','indent','outdent','subscript','superscript','clearhtml','quickformat','selectall','formatblock','fontname','fontsize','forecolor','hilitecolor','bold','italic','underline','strikethrough','lineheight','removeformat','image','table','tablecell','hr','baidumap','pagebreak','link','unlink','fullscreen' ], afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); K('form[name=example]')[0].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); K('form[name=example]')[0].submit(); }); }, showHelpGrid: false, // 是否顯示輸入輔助線 themeType : "black", //主題 //錯(cuò)誤處理 handler errorMsgHandler : function(message, type) { try { JDialog.msg({type:type, content:message, timer:2000}); } catch (Error) { alert(message); } } }); }) </script>
后端代碼:返回值是json,返回格式與下面代碼一致。
<?php namespace app\teacher\controller; use think\Controller; use Qiniu\Auth as Auth; use Qiniu\Storage\BucketManager; use Qiniu\Storage\UploadManager; /** * 七牛云操作 */ class Qiniu extends Base { public function uploadImg() { error_reporting(0); vendor('qiniu.autoload'); $accessKey = config('ACCESSKEY'); $secretKey = config('SECRETKEY'); $bucket = config('BUCKET'); $domain = config('DOMAIN'); $fileType = trim($_GET['fileType']); if (empty($fileType)) { $fileType = "image"; } // 要上傳圖片的本地路徑 $filePath = $_FILES['imgFile']['tmp_name']; $ext = substr($_FILES['imgFile']['name'],strrpos($_FILES['imgFile']['name'],'.')+1); //文件后綴 // 后綴大寫(xiě)轉(zhuǎn)換成小寫(xiě) $ext = strtolower($ext); $format = array('png','jpg','gif','jpeg','bmp','tif','svg','webp'); //允許上傳的格式 if (!in_array($ext,$format)) { $result = array( 'code'=>'001', 'message'=>'格式錯(cuò)誤' ); } // 上傳到七牛后保存的文件名 $key = 'shouyi_img/'.substr(md5($filePath) , 0, 5) .'/'. date('YmdHis') . rand(0, 9999) . '.' . $ext; // 構(gòu)建鑒權(quán)對(duì)象 $auth = new Auth($accessKey, $secretKey); $token = $auth->uploadToken($bucket); // 初始化 UploadManager 對(duì)象并進(jìn)行文件的上傳 $uploadMgr = new UploadManager(); // 調(diào)用 UploadManager 的 putFile 方法進(jìn)行文件的上傳 list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath); // var_dump($ret); if ($err !== null) { $result = array( 'code'=>'001', 'message'=>'上傳失敗' ); } else { $result = array( 'code'=>'000', 'message'=>'上傳成功'.$_FILES['imgFile']['name'], 'data'=>array('url' => $domain . $ret['key']), ); } die(json_encode($result,JSON_UNESCAPED_UNICODE)); } }
文件上傳到七牛云可參看之前寫(xiě)的文章:【七牛云】使用PHP把文件上傳到七牛云_php 七牛云上傳_下頁(yè)、再停留的博客-CSDN博客
4、自定義工具欄
在items根據(jù)需要添加相應(yīng)的功能文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-695032.html
source : 'HTML代碼', preview : '預(yù)覽', undo : '后退(Ctrl+Z)', redo : '前進(jìn)(Ctrl+Y)', cut : '剪切(Ctrl+X)', copy : '復(fù)制(Ctrl+C)', paste : '粘貼(Ctrl+V)', plainpaste : '粘貼為無(wú)格式文本', wordpaste : '從Word粘貼', selectall : '全選(Ctrl+A)', justifyleft : '左對(duì)齊', justifycenter : '居中', justifyright : '右對(duì)齊', justifyfull : '兩端對(duì)齊', insertorderedlist : '編號(hào)', insertunorderedlist : '項(xiàng)目符號(hào)', indent : '增加縮進(jìn)', outdent : '減少縮進(jìn)', subscript : '下標(biāo)', superscript : '上標(biāo)', formatblock : '段落', fontname : '字體', fontsize : '文字大小', forecolor : '文字顏色', hilitecolor : '文字背景', bold : '粗體(Ctrl+B)', italic : '斜體(Ctrl+I)', underline : '下劃線(Ctrl+U)', strikethrough : '刪除線', removeformat : '刪除格式', image : '圖片', multiimage : '批量圖片上傳', graft : '涂鴉', flash : 'Flash', media : '視音頻', table : '表格', tablecell : '單元格', hr : '插入橫線', emoticons : '插入表情', link : '超級(jí)鏈接', unlink : '取消超級(jí)鏈接', fullscreen : '全屏顯示', about : '關(guān)于', print : '打印(Ctrl+P)', filemanager : '文件空間', code : '插入程序代碼', quote : '插入引用', map : 'Google地圖', baidumap : '百度地圖', lineheight : '行距', clearhtml : '清理HTML代碼', pagebreak : '插入分頁(yè)符', quickformat : '一鍵排版', insertfile : '插入文件', template : '插入模板'
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-695032.html
到了這里,關(guān)于【NKeditor】富文本編輯器上傳圖片的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!