Upload a picture needs
It is to a rich text editor and a picture upload function, since vue-quill-editor is base64 encoded into the picture, so when the picture is relatively large, the time of filing the background parameter is too long, leading to submission failed.
Solutions
The picture to upload to the server, and then the image link is inserted into a rich text in
image upload, then you can use the element or iview, here I am with iview example
image upload area you want to hide, custom vue-quill-editor of pictures uploaded, click on the picture to upload when calling iview element or image upload, after a successful upload pictures displayed in rich text editor
step
- Installation
Introduced in main.js
II. Customizing vue-quill-editor image upload
html:
js:
III. Iview call element or image upload component
html:
css:
js:
IV. If you need more rich text editor
May be a more than one use, such as adding after completion as well as editing functions, then a copy of the file upload and rich text editing: rich text with two different ref mark, calling each file upload in their configuration; file upload success using a different method name, which calls their rich text editor.
Focus: rich text and file upload no matter what way the class name or distinction, these two places before and should be distinguished.
Demand II file uploads
And pictures upload the same, the difference is to upload files. Solve the same idea: custom buttons vue-quill-editor, click on the use of iView file upload, and then assign an address to the href attribute of a tag is inserted into a rich text cursor.
step
A custom editor attachment upload
I want to customize the name of the file to download via download property, but have failed in two ways, you can ignore the code. The following is a custom insert a link to rich text
Configure the toolbar, add a upload, and the rest of unwanted can be removed
Custom icon style file upload
Second, call the element or upload component iview
Two pictures uploaded to define the class name to distinguish do when calling.
修改工具栏配置，当点击富文本时，调用相应的上传组件
这两个文件上传都要隐藏
下面是插入图片和文件的方法
bug及优化
一、回车光标不显示
不知道为什么，百度都搜不到，好像只有我出现了这个问题，最后通过监听回车，手动换行并在换行后加了一个空格，因为没有内容的时候光标不显示，然后把光标向前调一个位置，移到空格前面。
二、给菜单栏添加中文标题title
有个需要注意的地方，按上面的方法使用后，确实有效，但是字体颜色和背景颜色的提示都变成了背景颜色，然后修改了标题栏的配置，提示才彼此对应。
修改为
