国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【NKeditor】富文本編輯器上傳圖片

這篇具有很好參考價(jià)值的文章主要介紹了【NKeditor】富文本編輯器上傳圖片。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

目的:

使用NKeditor富文本編輯器上傳圖片,同時(shí)上傳到七牛云存儲(chǔ)上。后端語(yǔ)言使用ThinkPHP。

效果

【NKeditor】富文本編輯器上傳圖片

實(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)的功能

    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)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • Vue +vue-quill-editor+ Element UI使用富文本編輯器,上傳圖片,上傳視頻

    Vue +vue-quill-editor+ Element UI使用富文本編輯器,上傳圖片,上傳視頻

    如果你們有問(wèn)題,可以發(fā)評(píng)論提問(wèn),我看見(jiàn)一定回復(fù)?。。。。?一、基本使用 1、下載vue-quill-editor組件 2、引入· 富文本組件 方式一:全局引入 (在 main.js 文件中) 方式二:按需引入 (在 單個(gè)組件 中引用) 3、工具欄相關(guān)配置 4、設(shè)置工具欄中文提示 5、修改vue-quill-editor字體

    2024年02月08日
    瀏覽(113)
  • 【vue】 Tinymce 富文本編輯器 不想讓上傳的圖片轉(zhuǎn)換成base64,而是鏈接

    【vue】 Tinymce 富文本編輯器 不想讓上傳的圖片轉(zhuǎn)換成base64,而是鏈接

    前言:最近項(xiàng)目上需要使用富文本編輯器,覺(jué)得tinymce很不錯(cuò)就用了,具體怎么在項(xiàng)目中使用參考 【vue】 vue2 中使用 Tinymce 富文本編輯器 【vue】 Tinymce 數(shù)據(jù) 回顯問(wèn)題 | 第一次正?;仫@后面,顯示空白bug不能編輯 這兩天又遇到了新的問(wèn)題,圖片上傳后是看地址欄發(fā)現(xiàn)是base64的

    2024年02月14日
    瀏覽(297)
  • UEditor富文本編輯器上傳圖片打不開(kāi),提示“后端配置項(xiàng)沒(méi)有正常加載,上傳插件不能正常使用”

    UEditor富文本編輯器上傳圖片打不開(kāi),提示“后端配置項(xiàng)沒(méi)有正常加載,上傳插件不能正常使用”

    1、安裝 npm install?vue-ueditor-wrap 2、下載所需資源 這一步在解決報(bào)錯(cuò)的時(shí)候會(huì)用到 ?????????? UEditor資源下載鏈接 上面的打不開(kāi)請(qǐng)從下面鏈接下載項(xiàng)目 ueditor-download: vue項(xiàng)目中集成ueditor的UE資源 3、下載完成后將文件夾放到public文件夾下 4、 配置ueditor.config.js,并且在main.j

    2024年02月13日
    瀏覽(95)
  • vue2+wangEditor5富文本編輯器(圖片視頻自定義上傳七牛云/服務(wù)器)

    vue2+wangEditor5富文本編輯器(圖片視頻自定義上傳七牛云/服務(wù)器)

    1、安裝使用 安裝 在main.js中引入樣式 在使用編輯器的頁(yè)面引入js 模板 js ?到這一步編輯器就可以正常顯示了 2、上傳圖片、視頻 上傳到后臺(tái)接口的可直接按照文檔這個(gè)配置就行接口返回格式也要可文檔上一致 ? ?2)自定義上傳(一般上傳到別的服務(wù)器上,我這邊是上傳到七

    2024年02月11日
    瀏覽(100)
  • android項(xiàng)目實(shí)戰(zhàn)之編輯器圖片上傳預(yù)覽

    現(xiàn)狀分析 項(xiàng)目的需求用到編輯器,編輯器中又可能用到圖片上傳功能。 實(shí)現(xiàn)方案 1. 增加依賴庫(kù),可以參考前面的幾篇文章,都有描述。 2. 核心代碼實(shí)現(xiàn) 歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)。

    2024年02月04日
    瀏覽(35)
  • 20230711----重返學(xué)習(xí)-組件緩存-圖片上傳-富文編輯器-鑒權(quán)處理

    keep-alive組件的使用 keep-alive組件的原理 圖片上傳流程 點(diǎn)擊上傳圖片后,把圖片發(fā)送給服務(wù)器。 服務(wù)器返回一個(gè)相對(duì)或絕對(duì)地址。 提交時(shí),把圖片地址與其余表單數(shù)據(jù)一起傳遞給服務(wù)器。 el-upload組件 圖片上傳分為兩步: 選取圖片 規(guī)則限制:類型、大小… multiple 是否支持多

    2024年02月16日
    瀏覽(26)
  • dede ckeditor編輯器讓上傳圖片自動(dòng)使用絕對(duì)地址顯示

    dedecms ckeditor編輯器讓上傳圖片自動(dòng)使用絕對(duì)地址顯示,本教程適合織夢(mèng)cms v57,其他版本未測(cè)試。由于我們網(wǎng)站為了更好更有效的解決seo方案,于是在考慮到發(fā)布文章的時(shí)候,上傳的正文圖片,是非絕對(duì)路徑的,于是我們把織夢(mèng)cms默認(rèn)編輯器ckeditor進(jìn)行了小幅度的修改: 首先

    2024年02月16日
    瀏覽(18)
  • Vue3 中vue-quill富文本編輯器圖片縮放

    Vue3 中vue-quill富文本編輯器圖片縮放

    ?導(dǎo)包 ? 添加配置? ?注: 該編輯器已經(jīng)不在維護(hù)了,很古老了,打包后如果報(bào)錯(cuò),建議使用其他編輯器

    2024年04月25日
    瀏覽(98)
  • vue-quill-editor富文本編輯器-擴(kuò)展表格、圖片調(diào)整大小

    vue-quill-editor富文本編輯器-擴(kuò)展表格、圖片調(diào)整大小

    上篇文章已經(jīng)講到、vue-quill-editor的基本配置和圖片轉(zhuǎn)成url 這篇文章主要使用插件來(lái)完成 圖片調(diào)整大小 和 表格的插件使用( 這兩個(gè)目前quill 版本并不兼容 如果有大神解決了還望指點(diǎn) ) 參考文章: vue-quill-editor 富文本編輯器支持圖片拖拽和放大縮小_*且聽(tīng)風(fēng)吟的博客-CSDN博

    2024年02月04日
    瀏覽(90)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包