bootstrap summernote富文字編輯器圖片上傳乾貨分享

阿新 • • 發佈：2019-01-12

今天做後臺的時候需要一個富文字編輯器元件,由於專案使用的是bootstrap,所以毫不猶豫的用上了summernote富文字編輯器。文件各大大牛已經整理出來了但是圖片上傳到伺服器這塊比較雜大部分都是說上傳到伺服器的圖片格式是base64的，但是我使用base64接收的時候看了下控制檯竟然是二進位制上傳、、、lol 上傳方法白寫了,至此在這裡做個記錄方便自己謹記和有需要的人使用

第一步載入富文字編輯器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>編輯器</title>
<link href="/css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
<link href="/summernote/summernote.css" rel="stylesheet" th:href="@{/summernote/summernote.css}"/>
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/summernote/summernote.js" th:src="@{/summernote/summernote.js}"></script>
<script src="/summernote/lang/summernote-zh-CN.js" th:src="@{/summernote/lang/summernote-zh-CN.js}"></script>    <!-- 中文-->
<style>
   .m{ width: 500px; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
        console.info(ctxPath);
</script>
<script>
$(document).ready(function() {
    $('.summernote').summernote({  
        height: 500,
        tabsize: 2,
        lang: 'zh-CN',
        callbacks: {  
            onImageUpload: function(files) { //the onImageUpload API  
               console.log("圖片上傳"+files[0]);
                img = sendFile(files[0]);  
        }  
    }  
    });  
});
function sendFile(file) {  
    data = new FormData();  
    data.append("file", file);
    $.ajax({  
        data: data,  
        type: "POST",  
        url: ctxPath+"/common/sysFile/upload",
        cache: false,  
        contentType: false,  
        processData: false,  
        success: function(data) {
            console.log(data);
            $(".summernote").summernote('insertImage', ctxPath+data.fileName, 'image name'); // the insertImage API
        }  
    });  
}  
</script>
</head>

<body>
   <div class="m">       
      <div class="summernote">summernote 1</div>
   </div>
</body>
</html>

這一步網上的文件很詳細一些路徑請自己根據專案需要配置

2 服務端上傳介面

@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("file") MultipartFile[] file, @RequestParam(value = "type", defaultValue = "0") String type, HttpServletRequest request) throws IOException {
    if ("test".equals(getUsername())) {
        return R.error(1, "演示系統不允許修改,完整體驗請部署程式");
    }
    type = type==null||type==""?type="2":type;
    LOGGER.info(">>>>>>>>>>>>>>>>>>>>> {}", type);
    Date createTime = new Date();
    if (null != file && file.length > 0) {
        //遍歷並儲存檔案
        for (MultipartFile files : file) {
            if (file != null) {
                //取得當前上傳檔案的檔名稱
                String fileName = files.getOriginalFilename();
                //如果名稱不為“”,說明該檔案存在，否則說明該檔案不存在
                if (type.equals("1")) {//OSS方式上傳檔案
                    String suffix = files.getOriginalFilename().substring(files.getOriginalFilename().lastIndexOf("."));
                    String url = ossService.build().uploadSuffix(files.getBytes(), suffix);
                    //儲存檔案資訊
                    fileName = FileUtil.renameToUUID(fileName);
                    SysFile sysFile = new SysFile(FileType.fileType(fileName), url, new Date(), getUserId());
                    if (sysFileService.save(sysFile) > 0) {
                        LOGGER.info(">>>>>>>>>>>>>OSS上傳圖片路徑  {}", url);
                        return R.ok().put("fileName", sysFile.getUrl());
                    }
                } else {//本地上傳圖片方式
                    fileName = FileUtil.renameToUUID(fileName);
                    SysFile sysFile = new SysFile(FileType.fileType(fileName), "/files/" + fileName, new Date(), getUserId());
                    try {
                        FileUtil.uploadFile(files.getBytes(), bootdoConfig.getUploadPath(), fileName);
                    } catch (Exception e) {
                        return R.error();
                    }
                    if (sysFileService.save(sysFile) > 0) {
                        LOGGER.info(">>>>>>>>>>>>>本地上傳圖片路徑  {}", "/files/" + fileName);
                        return R.ok().put("fileName", sysFile.getUrl());
                    }
                }
            }
        }
    } else {
        return R.error("上傳檔案不能為空");
    }
    return R.ok();
}

這一步就是個簡單的二進位制上傳介面有需要的根據自己專案需要更改

最後來一張debug效果圖

bootstrap summernote富文字編輯器圖片上傳乾貨分享

今天做後臺的時候需要一個富文字編輯器元件,由於專案使用的是bootstrap,所以毫不猶豫的用上了summernote富文字編輯器。文件各大大牛已經整理出來了但是圖片上傳到伺服器這塊比較雜大部分都是說上傳到伺服器的圖片格式是base64的，但是我使用base64接

富文字編輯器圖片上傳失敗的BUG解決：IndexError：list index out of range

富文字編輯器圖片上傳失敗的BUG解決問題原因我們將通過Django上傳的圖片儲存到了FastDFS中，而儲存在FastDFS中的檔名沒有後綴名（.png/.jpg/.jif），而ckeditor在處理上傳的檔名按照有後綴名來處理，所以會出現bug錯誤解決方法找到虛擬

富文字編輯器圖片上傳功能提示falsh版本低請你升級的解決方法

1,最好先檢查下瀏覽器的falsh是否禁用如禁用需開啟 2,安裝官網falsh並重新打卡瀏覽器 falsh禁用會導致很多外掛用不了(圖片上傳外掛，編輯器外掛，視訊播放功能等), 程式碼執行中找不到錯誤，

ueditor富文字編輯器圖片上傳問題

，”imageActionName”: “uploadimage”,這個是呼叫的是外掛自帶的action，這裡的值不能修改，否則在點選圖片上傳的時候會報“無效的Action”。 index.html中新增 UE.Editor.prototype._bkG

ueditor+requirejs+springMVC+七牛（富文字編輯器圖片上傳到指定伺服器）

為了能較少引用js，提高頁面載入速度，requirejs逐漸流行起來。本文是requirejs和當下主流外掛結合的使用總結。其中：富文字編輯器是百度的UEditor，MVC框架是java開發最流行的SpringMVC，伺服器是小使用者使用較多的七牛雲（跟阿里雲等沒法比，但

富文字編輯器 UEditor上傳圖片（好用版）

最近在做富文字編輯器的功能，使用了百度的UEditor，綜合的網上資料（很多不好用）然後自己總結了一下，分享給大家。下載UEditor 下載Tomcat並進行配置更改UEditor配置檔案（重點

Django在admin後臺整合TinyMCE富文字編輯器新增上傳圖片功能

部落格網站怎麼能少了圖片，為TinyMCE編輯器新增上傳圖片功能。第一步：定義表存圖片路徑models.pyclassAdminIMG(models.Model): filename = mode

Flask學習10：Flask專案整合富文字編輯器CKEditor 上傳圖片

CKEditor下載地址：https://ckeditor.com/ckeditor-4/download/ 訪問CKeditor官方網站，進入下載頁面，選擇Standard Package（一般情況

springmvc和layui富文字編輯器實時上傳圖片功能實現

本文將介紹 springmvc 上傳功能實現，以及layui 前端外掛的使用，尤其是其富文字編輯器的上傳圖片介面的實現。一、開發準備 1、layui 官網：http://www.layui.com/ 點選"立即下載"可以獲取前端框架，沒有使用過的朋友可以自行了解下。下載

bbs專案富文字編輯器實現上傳檔案到media目錄

media目錄是在project的settings中設定的，static目錄是django自己使用的靜態檔案的上傳目錄，media目錄是使用者自定義上傳檔案的目錄 # Django使用者上傳的檔案都放在media目錄下 MEDIA_URL = "/media/" MEDIA_ROOT = os.pat

laravel富文字編輯和圖片上傳

---恢復內容開始--- 首先先找到一個適合的編輯器是勝利的一步,選擇wangEditor這個編輯器地址:http://www.wangeditor.com/ 然後選擇下載,我是通過網上學習的,所以直接選擇的是2.1.23下載下載後,將dist中的js/css/fonts,放到

解決百度富文字編輯器無法上傳視訊的問題

本文轉自：http://blog.csdn.net/qq_34787830/article/details/75092347 1、在配置檔案ueditor.config.js中，定位 //xss過濾白名單，即,whitList:{ }，對 img: 增加 “_url” 屬性： 2、在下面的 vid

百度富文字編輯器ueditor上傳檔案到bcs中

（不知為何，程式碼的排版總是不能自動對齊。有點糾結，各位將就看著）近期在做一個個人部落格，用到了百度的富文字編輯器ueditor。部落格是架在了bae中的。在測試的時候發現，上傳的圖片有時候不會或者是間接性地不會顯現出來，特別詭異的是，我用ie核心的瀏覽器（比如360、i

WangEditor實現富文字編輯和圖片上傳

1.首先第一步是下載壓縮檔案，去官網下載http://www.wangeditor.com/2.解壓檔案，然後將資料夾放到webapp下面，如圖所示：3.編寫html頁面，在頁面中構造編輯器

summernote富文字編輯器實現圖片新增上傳和刪除圖片

summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

CI框架summernote富文字編輯器的使用及圖片上傳

1.下載summernote外掛再要使用的使用引入這幾個檔案即可 <link href="<?php echo base_url();?>assets/app/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">

修改Summernote文字編輯器支援上傳圖片到伺服器

官網：http://summernote.org/ Summernote是基於Bootstrap的文字編輯器 Summernote預設上傳圖片是儲存二進位制圖片資料，這樣會造成資料庫龐大，我們現在就把它修改為上傳到伺服器，直接儲存路徑地址不多說，直接上乾貨 <

uedit 富文本編輯器圖片上傳圖片服務器

pos config lln func stat folder 上傳 real ini uedit設置修改uploader 類源代碼這個註釋 $url = "upimg.com/uploadImg.php"; $tmpName =

vue+summernote富文字編輯器使用

最近專案中需要使用富文字編輯器，之前用的是vue-quill-editor，但是測試的時候發現這個編輯器會把內聯的樣式都清除掉，去查了一圈文件和各路網友的問答，有說這個就是quill的特性，不支援內聯樣式，具體原因我也沒看明白，總之是改不動了，所以換了su

4款Bootstrap線上富文字編輯器

Bootstrap 已經大大簡化響應式 web 開發，但是，如果再加上不用手動一點點敲程式碼，而是可以快速選擇你想要使用的 Bootstrap 元件，然後直接將其拖進你的畫板中，開發是否會變得更加輕鬆？！這便是所謂的所見即所得（What you see is what

bootstrap summernote富文字編輯器圖片上傳乾貨分享

相關推薦