2. 程式人生 > >vue-quill-editor自定義圖片上傳

vue-quill-editor自定義圖片上傳

阿新 • • 發佈：2019-01-05 
我們通常都會使用富文字編輯器在後臺編輯內容，開發vue當然也少不了，我們通過vue官網的連結可以找到一些資源，或者去github上查詢一些開源的編輯器。

我使用的是vue-quill-editor，它的介面很簡潔，功能也滿足平時的編輯需要，不過於臃腫，但是它預設的圖片上傳是使用Data URL方式儲存到了內容裡，這不是我想要的，我相信大部分人也不想這樣去儲存圖片，還好quill提供瞭如何去自定義按鈕事件的demo(03-example.vue)，那麼我們就可以自己去實現圖片的儲存方式了。

這裡我用的是iview 的上傳元件，上傳成功後獲得圖片的地址，在編輯器中顯示

先下載vue-quill-editor 然後下面是主要程式碼

<template>
	<div>

		<quill-editor  ref="myQuillEditor"
		    @change="onEditorChange($event)">
		</quill-editor>		
		<Upload :show-upload-list="false"
			style="display: none;"

ref="up"

name="upfile" :format="accept" :max-size="maxsize" multiple type="drag" :on-exceeded-size="handleMaxSize" :on-success="handleSuccess" :action="imgUrl" > <input :id="refid" /> </Upload> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import $ from 'jquery' export default { name:'quill', components: { quillEditor }, data() { return { visible: false, src: '', uploadList: [] } }, props:{ imgUrl:{ type:String, }, accept:{ type:Array }, maxsize:{ type:Number }, refid:{ type:String } }, computed: { editor() { return this.$refs.myQuillEditor.quill }, }, mounted() { this.uploadList = this.$refs.up.fileList; this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick) this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.imgClick) }, methods: { //點選圖片觸發事件 imgClick() { var up=this.refid; console.log("up===",up) $('#'+this.refid).click() }, //檢視圖片 handleView(name) { this.src = 'http://' + name; this.visible = true; }, //刪除圖片 handleRemove(file) { // 從 upload 例項刪除資料 const fileList = this.$refs.up.fileList; this.$refs.up.fileList.splice(fileList.indexOf(file), 1); }, //成功回撥 handleSuccess(response, file, fileList) { console.log("返回圖片") if(response.code == 500) { this.$Message.error('上傳失敗!') } else { this.$Message.success('上傳成功!') //把圖片插入指定的位置 this.editor.insertEmbed(this.editor.getSelection().index, 'image', 'http://'+response.data.picName) } console.log(response) console.log(fileList) console.log(file) }, //檔案太大，錯誤提示 handleMaxSize (file) { this.$Notice.warning({ title: 'Exceeding file size limit', desc: 'File ' + file.name + ' is too large, no more than 100M.' }); console.log('File ' + file.name + ' is too large, no more than 100M.'); }, onEditorChange({editor,html,text}) { this.$emit('quilCon',html) } } }; </script> <style> .info { border-radius: 10px; line-height: 20px; padding: 10px; margin: 10px; background-color: #ffffff; } </style> <style scoped> .demo-upload-list { display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .2); margin-right: 4px; } .demo-upload-list img { width: 100%; height: 100%; } .demo-upload-list:hover .demo-upload-list-cover { display: block; } .demo-upload-list-cover { color: #fff; font-size: 16px; display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .6); } </style>

相關推薦

vue-quill-editor自定義圖片上傳

我們通常都會使用富文字編輯器在後臺編輯內容，開發vue當然也少不了，我們通過vue官網的連結可以找到一些資源，或者去github上查詢一些開源的編輯器。我使用的是vue-quill-editor，它的介面很簡潔，功能也滿足平時的編輯需要，不過於臃腫，但是它預設的圖片上傳是使

Vue Quill Editor自定義圖片/視訊上傳（Element UI + OSS）、字型、字型大小、段落等

  近期專案中需要使用富文字編輯器，開始想到的富文字編輯器是百度的UEditor，UEditor功能齊全、外掛多，但是圖片只能上傳到本地伺服器，如果需要上傳到其他伺服器需要改動原始碼，而且是PHP、JSP、ASP、.Net版本，同時UEditor體積過大壓縮包有

vue自定義圖片上傳預覽功能

//vue裡面的HTML程式碼 <div id="modificationPreview">         <input type="file" accept="image/*" @change="changeFile" id="m

quill自定義圖片上傳

quill是個不錯的富文字編輯器，但是它的圖片上傳是直接將本地圖片讀成base64跟文字混合在一起，這顯然不適合一般開發需求，我們希望插入的是一個圖片url，故這裡將基於vue.js實現quill的圖片上傳功能。 沒有什麼好說的，直接貼程式碼 quillEditor.vue

ueditor 編輯器，自定義圖片上傳

action () scree val ech idt tof height 使用 <div> <h1>完整demo</h1> <form method="post" name="form">

改造Kindeditor之：自定義圖片上傳外掛。 外加給圖片增加水印效果的選擇。

場景： 編輯部人士編輯文章時需要在文章中上傳圖片。但上傳圖片時需要增加是否增加水印的選擇（有可能是自己公司的原創作品）。所以需要改造Kindeditor . 1: 刪除Kindeitor 預設的引數物件裡的Image  新增自定bareheadimage 有原來的 item

html+css實現自定義圖片上傳按鈕

普通的input[type=‘file’]的效果很樸素 可以自定義一個file選擇檔案的按鈕： 思路為： 用定位將自定義的按鈕遮住原來的選擇檔案按鈕， 再讓點選自定義按鈕時觸發原來的選擇檔案按鈕的事件即可 （對此，label可實現） eg: html: css樣式： 結果圖：

Ueditor自定義圖片上傳路徑，以及圖片回顯路徑

最近發現Ueditor有個小bug，每次圖片都上傳到專案路徑下，當重新發佈一個版本後，圖片就沒了，所以決心修改結構如下：1. 首先，進入config.json,修改如下：其他的都不改，只改選中部分，這個是圖片訪問路徑字首我們要關注的是【檔案訪問路徑】和【檔案上傳路徑】然後，分

django 自定義圖片上傳路徑和上傳檔名

圖片上傳中，如果不對上傳的檔名做處理，很容易引起檔名重複，這會覆蓋之前上傳的圖片，django提供了自定義上傳檔名的方法。 def generate_filename(self, instance, filename): """ Ap

Vue之使用 vue-quill-editor_自定義toolbar_修改圖片上傳方式

1.安裝npm install vue-quill-editor --save 2.引入import { quillEditor } from 'vue-quill-editor' components: { quillEditor }, 3.使用<quill-editor v-model="

關於自定義一個上傳的file按鈕

ner receive play display list 之前 引入 image oot 在input中html給我們一個 type file用來做文件上傳的功能，比如 但是這樣的樣式，實在難看，在開發的時候看了layui和bootstrap的點擊上傳，都很不錯。 前

基於Vue + Node.js + MongoDB的圖片上傳組件，實現圖片的預覽和刪除

信息 clas 發送數據 演示 新增 one input標簽 return tof 公司要寫一些為自身業務量身定制的的組件，要基於Vue,趁著這個機會，自己在業余時間也寫了個組件，選擇寫圖片上傳是因為自己之前一直對這個功能比較迷糊，所以這次好好了解了一下。演示在網址打開後的

netty自定義協議上傳

客戶端: import io.netty.bootstrap.Bootstrap; import io.netty.channel.ChannelFuture; import io.netty.channel.EventLoopGroup; import io.nett

vue-cli如何打包和圖片上傳丟失問題

vue專案的打包 需要修改config/index.js裡的assetsPublicPath的欄位，初始專案是/他是指向專案根目錄的也是為什麼會出現錯誤，這時改為./ 如下： build: { // Template for index.html

editor.md使用——圖片上傳沒回顯url

楔子 使用editor.md 圖片上傳成功後沒回顯圖片URL，最終發現是返回json 中success 型別導致 使用記錄 上面的圖片記錄了圖片URL出現沒沒出現的 2中情況。

vue+elementUI表單和圖片上傳及驗證

<template>     <div class="add-keyperson-dialog">       <el-form :inline="true"                ref="addKeyPersonForm"                :model=

自定義檔案上傳按鈕

WEB開發中，不同的瀏覽器對於<input type="file">標籤顯示的樣式是不一樣的，可能帶來不好的使用者體驗。下面介紹下檔案上傳按鈕的使用者自定義樣式的實現方法。 1、HTML程式碼 <div class="new-contentarea">

[html]自定義檔案上傳按鈕

如果覺得檔案上傳按鈕太難看，如果覺得上傳按鈕在各個瀏覽器上顯示的效果不一致。我們可以自定義檔案上傳按鈕。 實現方案是將檔案上傳按鈕的點選事件傳遞給其他按鈕。 .html -> <input type = "file" id="myFile" /> <

自定義package上傳到 pypi

How to upload package to pypi Install twine pip install twine Init file First of all, make sure that the structure of pr

【更改表單元素預設樣式】更改自定義檔案上傳按鈕樣式

雖然我們無法直接更改表單的input[type=file]按鈕，但是可以通過曲線救國的方式來實現。 思路大致是這樣的： 1、將按鈕設定透明度為0 2、在上面覆蓋一個button，使二者位置完全重合，這樣就可以實現改變上傳按鈕的樣式，而不會影響上傳功能。