Problem description
The vue2.0 development used by the project, and a rich text editor is needed in the project. The author chose after some psychological struggle.vue-quill-editor. The author has already written the specific quotation in the project, so I will not repeat it here.
The way vue-quill-editor inserts images is to convert the image to base64 and then put it into the content, which will cause a problem. If the image is large, the content of rich text will be very large. The author stores the content in the database. On the one hand, it will occupy a large amount of database storage space. On the other hand, when the image is too large, the content of rich text will exceed the database storage limit, which will cause the problem of truncating the content and incomplete display (even for text type, there is a storage limit of 65535).
So the question is, how to upload the image to your own server or third-party service, and then insert the obtained image url into the text? I think there are roughly two methods. One is to hand over the task to the server, the server intercepts the base64 picture and converts it into a file, and replaces the original picture data with its path or url; the other is to start with the control itself, first upload the picture, and then insert it into rich text. Next, the poster began his own path of stumble.
Solution
Basic introduction
-quill-editor is basedquill(github address)Rich text editor for Vue2, so native property extensions of quill are also supported.quill document address
There are many extensions and custom method features in it. For example, the redefinition size of the image, the click processing of uploading the image, etc.
Image upload
View the quill project issue. It was found that there were considerations and modifications to the issue of uploading images. So this solution is feasible for uploading pictures. The next thing is how to implement it.
3. First of all, we need to get the quill instance in the project. This is described in the vue-quill-editor project. The basic method is to obtain your vue-quill-editor instance through ref, and then obtain the quill instance. The code is as follows. Among them, newEditor is my vue-quill-editor
this.$
4. After getting the example, we need to consider how to upload the image and insert the url into the text. By searching and discovering, you can register a custom image processing function. This function will be triggered when the image button in the top toolbar is clicked. However, in actual use, you will find that this function does not have the two parameters of the receive (image, callback) as mentioned in the document. Image is your image, you only need to pass the processed url in the callback. Instead, it receives a parameter state, which will trigger this function when clicked, and passes in the state value----true. Let me first introduce how to register this processing function - imgHandler. Note here that the registered function should be written in the mounted life cycle hook.
mounted() {
var vm =this
var imgHandler = async function(state) {
if (state) {
//button is clicked
}
}
vm.$("toolbar").addHandler("image", imgHandler)
}
5. By checking in stackflow, you can only implement the function of click upload and insertion in imgHandler. In this way, write an input that is not displayed under the editor, and listen to changes to upload the image to obtain its example. When the imgHandler is clicked, the simulated input button is clicked. The code becomes the following example.
mounted() {
var vm =this
var imgHandler = async function(image) {
= vm.$()
if (image) {
var fileInput = () //Hidden file text ID () //Add a trigger event }
}
vm.$("toolbar").addHandler("image", imgHandler)
}
6. Finally, the input click upload and the image url insertion.
HTML code
<div
v-loading="imageLoading"
element-loading-text="Please wait, the picture is being uploaded">
<quill-editor
ref="newEditor"
:options="newOption"
style="height: 200px; margin-bottom: 54px"
v-model="editorContent"
@change="editorChange">
</quill-editor>
<form action="" method="post" enctype="multipart/form-data" >
<input style="display: none" : type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!--style="display: none"-->
</form>
</div>
vue code
uploadImg: async function(id) {
var vm = this
= true
var formData = new FormData($('#' + id)[0])
try {
const url = await (formData)// Custom image upload function if (url != null && > 0) {
var value = url
= vm.$()
value = ('http') != -1 ? value : 'http:' + value
vm.$( != null?:0, 'image', value, )
} else {
vm.$("Picture addition failed")
}
().value=''
} catch ({message: msg}) {
().value=''
vm.$(msg)
}
= false
},
It's done here. If you have any errors, problems or better solutions, please feel free to correct and discuss.
Finally, when solving this problem, we integrate ImageResize into the control. The specific implementation is relatively simple, please refer to the demo example in vue-quill-editor
import Quill from 'quill'
import { ImageResize } from '../modules/'
('modules/imageResize', ImageResize)
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.