目的：

使用NKeditor富文本編輯器上傳圖片，同時上傳到七牛雲存儲上。後端語言使用ThinkPHP。

效果

實現方法：

1、下載NKeditor插件庫

下載地址：NKeditor: NKedtior是一款優秀的輕量級Web編輯器，基於 Kindedior 二次開發

裡面的文檔demo寫的比較詳細，可以直接使用，不過裡面上傳七牛雲的代碼不能用，所以我是自己寫的。 

2、部署

 把下載的NKeditor插件庫放到/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是一款優秀的漂亮，輕量級的js彈出框插件 不是必須引入的，如果不引入則使用預設的 window.alert() 來彈出提示信息 -->
<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, //對話框距離頁面頂部的位置，預設為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", //主題
        //錯誤處理 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);  //文件尾碼
         // 尾碼大寫轉換成小寫
         $ext = strtolower($ext);
 
        $format = array('png','jpg','gif','jpeg','bmp','tif','svg','webp');  //允許上傳的格式
        if (!in_array($ext,$format)) {
            $result = array(
                'code'=>'001',
                'message'=>'格式錯誤'
            );
        }
 
        // 上傳到七牛後保存的文件名
        $key = 'shouyi_img/'.substr(md5($filePath) , 0, 5) .'/'. date('YmdHis') . rand(0, 9999) . '.' . $ext;
 
        // 構建鑒權對象
        $auth = new Auth($accessKey, $secretKey);
 
        $token = $auth->uploadToken($bucket);
 
        // 初始化 UploadManager 對象併進行文件的上傳
        $uploadMgr = new UploadManager();
 
        // 調用 UploadManager 的 putFile 方法進行文件的上傳
        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));
    }
}

文件上傳到七牛雲可參看之前寫的文章：【七牛雲】使用PHP把文件上傳到七牛雲_php 七牛雲上傳_下頁、再停留的博客-CSDN博客

4、自定義工具欄

在items根據需要添加相應的功能

    source : 'HTML代碼',
    preview : '預覽',
    undo : '後退(Ctrl+Z)',
    redo : '前進(Ctrl+Y)',
    cut : '剪切(Ctrl+X)',
    copy : '複製(Ctrl+C)',
    paste : '粘貼(Ctrl+V)',
    plainpaste : '粘貼為無格式文本',
    wordpaste : '從Word粘貼',
    selectall : '全選(Ctrl+A)',
    justifyleft : '左對齊',
    justifycenter : '居中',
    justifyright : '右對齊',
    justifyfull : '兩端對齊',
    insertorderedlist : '編號',
    insertunorderedlist : '項目符號',
    indent : '增加縮進',
    outdent : '減少縮進',
    subscript : '下標',
    superscript : '上標',
    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 : '超級鏈接',
    unlink : '取消超級鏈接',
    fullscreen : '全屏顯示',
    about : '關於',
    print : '列印(Ctrl+P)',
    filemanager : '文件空間',
    code : '插入程式代碼',
    quote : '插入引用',
    map : 'Google地圖',
    baidumap : '百度地圖',
    lineheight : '行距',
    clearhtml : '清理HTML代碼',
    pagebreak : '插入分頁符',
    quickformat : '一鍵排版',
    insertfile : '插入文件',
    template : '插入模板'