편집기 vue-quill-editor로 밟은 구덩이
16087 단어 vue편집기vue-quill-editor
1. 사진 업로드
원인을 분석하다
프로젝트에서 vue-quill-editor 풍부한 텍스트 편집기를 사용합니다. 내용을 편집할 때 우리는 종종 그림을 편집합니다. vue-quill-editor의 기본적인 처리 방식은 그림을 base64 형식으로 직접 바꾸어 업로드하는 내용이 매우 방대하고 서버가post를 받아들이는 데이터의 크기가 제한되어 제출에 실패하여 사용자 체험이 나빠질 수 있습니다.
element-ui 도입
편집기.vue 파일
<template>
<div>
<!-- -->
<el-upload
class="avatar-uploader"
action=""
accept="image/jpg, image/jpeg, image/png, image/gif"
:http-request="upload"
:before-upload="beforeUploadImg"
:on-success="uploadSuccess"
:on-error="uploadError"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
import axios from '@/API/';
import { quillEditor } from "vue-quill-editor";
import COS from "cos-js-sdk-v5";
import Upload from '@/components/Upload.vue';
import { addQuillTitle } from '../utils/quill-title.js';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
data() {
return {
}
},
methods: {
//
beforeUpload(res, file) {
const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
const isLt1M = file.size / 1024 / 1024 < 1
if (!isJPG) {
this.$message.error(' JPG、PNG ， 1M')
}
if (!isLt1M) {
this.$message.error(' 1M')
}
return isJPG && isLt1M
},
//
uploadSuccess(res, file) {},
//
uploadError(res, file) {},
//
upload(req){}
}
}
</script>
<template>
<div>
<!-- -->
<el-upload
class="avatar-uploader"
action=""
accept="image/jpg, image/jpeg, image/png, image/gif"
:http-request="upload"
:before-upload="beforeUploadImg"
:on-success="uploadSuccess"
:on-error="uploadError"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<quill-editor
class="info-editor"
v-model="content"
ref="QuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</div>
</template>
<script>
import axios from '@/API/';
import { quillEditor } from "vue-quill-editor";
import COS from "cos-js-sdk-v5";
import Upload from '@/components/Upload.vue';
import { addQuillTitle } from '../utils/quill-title.js';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image', 'video'],
['clean'] // remove formatting button
]
export default {
data() {
return {
editorOption: {
placeholder: ' ',
theme: 'snow', //
modules: {
toolbar: {
container: toolbarOptions, //
handlers: {
'image': function (value) {
if (value) {
document.querySelector('#quill-upload input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}, //
content: '', //
}
},
methods: {
//
beforeUpload(res, file) {
const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
const isLt1M = file.size / 1024 / 1024 < 1
if (!isJPG) {
this.$message.error(' JPG、PNG ， 1M')
}
if (!isLt1M) {
this.$message.error(' 1M')
}
return isJPG && isLt1M
},
//
uploadSuccess(res, file) {
let quill = this.$refs.QuillEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length, 'image', url);
quill.setSelection(length+1)
},
//
uploadError(res, file) {
this.$message.error(' ')
},
//
upload(req){}
}
}
</script>
<style scoped>
.avatar-uploader{
display: none;
}
</style>
편집기에 quill-title을 추가합니다.js 도구 모음의 title 프로필
const titleConfig = {
'ql-bold':' ',
'ql-color':' ',
'ql-font':' ',
'ql-code':' ',
'ql-italic':' ',
'ql-link':' ',
'ql-background':' ',
'ql-size':' ',
'ql-strike':' ',
'ql-script':' / ',
'ql-underline':' ',
'ql-blockquote':' ',
'ql-header':' ',
'ql-indent':' ',
'ql-list':' ',
'ql-align':' ',
'ql-direction':' ',
'ql-code-block':' ',
'ql-formula':' ',
'ql-image':' ',
'ql-video':' ',
'ql-clean':' '
};
export function addQuillTitle(){
const oToolBar = document.querySelector('.ql-toolbar'),
aButton = oToolBar.querySelectorAll('button'),
aSelect = oToolBar.querySelectorAll('select'),
aSpan= oToolBar.querySelectorAll('span');
aButton.forEach((item)=>{
if(item.className === 'ql-script'){
item.value === 'sub' ? item.title = ' ': item.title = ' ';
}else if(item.className === 'ql-indent'){
item.value === '+1' ? item.title =' ': item.title =' ';
}else if(item.className === 'ql-list'){
item.value==='ordered' ? item.title=' ' : item.title=' '
}else if(item.className === 'ql-header'){
item.value === '1' ? item.title = ' H1': item.title = ' H2';
}else{
item.title = titleConfig[item.classList[0]];
}
});
aSelect.forEach((item)=>{
if(item.className!='ql-color'&&item.className!='ql-background'){
item.parentNode.title = titleConfig[item.classList[0]];
}
});
aSpan.forEach((item)=>{
if(item.classList[0]==='ql-color'){
item.title = titleConfig[item.classList[0]];
}else if(item.classList[0]==='ql-background'){
item.title = titleConfig[item.classList[0]];
}
});
}
<template>
<div>
<!-- -->
<el-upload
class="avatar-uploader"
action=""
accept="image/jpg, image/jpeg, image/png, image/gif"
:http-request="upload"
:before-upload="beforeUploadImg"
:on-success="uploadSuccess"
:on-error="uploadError"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<quill-editor
class="info-editor"
v-model="content"
ref="QuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</div>
</template>
<script>
import axios from '@/API/';
import { quillEditor } from "vue-quill-editor";
import COS from "cos-js-sdk-v5";
import Upload from '@/components/Upload.vue';
import { addQuillTitle } from '../utils/quill-title.js';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
//
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image', 'video'],
['clean'] // remove formatting button
]
export default {
data() {
return {
editorOption: {
placeholder: ' ',
theme: 'snow', //
modules: {
toolbar: {
container: toolbarOptions, //
handlers: {
'image': function (value) {
if (value) {
document.querySelector('#quill-upload input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}, //
content: '', //
}
},
mounted(){
addQuillTitle();
},
methods: {
//
beforeUpload(res, file) {
const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
const isLt1M = file.size / 1024 / 1024 < 1
if (!isJPG) {
this.$message.error(' JPG、PNG ， 1M')
}
if (!isLt1M) {
this.$message.error(' 1M')
}
return isJPG && isLt1M
},
//
uploadSuccess(res, file) {
let quill = this.$refs.QuillEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length, 'image', url);
quill.setSelection(length+1)
},
//
uploadError(res, file) {
this.$message.error(' ')
},
//
upload(req){}
}
}
</script>
<style scoped>
.avatar-uploader{
display: none;
}
</style>
1. 앞말
나는 vue-quill-editor의 Github에서 이 두 플러그인을 알게 되었다.
quill-image-drop-module: 그림을 붙여넣고 편집기에 끌어다 놓을 수 있습니다.
quill-image-resize-module: 이미지 크기를 조정할 수 있습니다.
다 실용적이야!
그러나 DEMO가 상세하지 않아서 실제로 인용할 때 많은 오류가 발생했습니다.
... 와 같다
Cannot read property 'imports' of undefined"、
Failed to mount component: template or render function not defined.、
Cannot read property 'register' of undefined.
다음은 정확한 인용 자세를 말씀드리겠습니다.
2. 내 환경
Webpack + Vue-Cli 2.0(vue init 비simple 버전)
3. 본문
1. quill 풍부한 텍스트 편집기 (플러그인을 추가하지 않을 때) 가 정상적으로 실행될 수 있는지 확인하십시오.
2. NPM 종속성을 설치합니다.
cnpm install quill-image-drop-module -S
cnpm install quill-image-resize-module -S
3、build 폴더에서 웹 페이지를 찾습니다.base.conf.js.
수정:
module.exports = {
plugins: [
new webpack.ProvidePlugin({
//
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
}
// 以前需要有下面几行：
import { quillEditor } from 'vue-quill-editor' //注意quillEditor必须加大括号，否则报错。
import "quill/dist/quill.core.css";//
import "quill/dist/quill.snow.css";
// 新增下面代码：
import resizeImage from 'quill-image-resize-module' // 调整大小组件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/resizeImage ', resizeImage )
editorOption: {
modules: {
// 新增下面
imageDrop: true, // 拖动加载图片组件。
imageResize: { //调整大小组件。
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
}
}이상의 이 평론 vue에서 편집기 vue-quill-editor를 사용하여 밟은 구덩이는 바로 편집기가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
