vue-quill-editor 부 텍스트 편집기 사용,사용자 정의 도구 모음,사용자 정의 그림 업로드
30177 단어 VUE
npm install vue-quill-editor --save
2.부 텍스트 편집기 설정 파일
quill-Config.js
//axios ,
import service from '../../utils/request';
/* */
const uploadConfig = {
action: 'oss/service/oss/upload', //
methods: 'POST', //
headers: {
"Content-Type": "multipart/form-data"
},
token: '', // token , token sessionStorage
name: 'name', //
size: 10240, // , Kb, 1M = 1024Kb
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' //
};
// toolbar ( )
const toolOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{
'header': 1
}, {
'header': 2
}],
[{
'list': 'ordered'
}, {
'list': 'bullet'
}],
[{
'script': 'sub'
}, {
'script': 'super'
}],
[{
'indent': '-1'
}, {
'indent': '+1'
}],
[{
'direction': 'rtl'
}],
[{
'size': ['small', false, 'large', 'huge']
}],
[{
'header': [1, 2, 3, 4, 5, 6, false]
}],
[{
'color': []
}, {
'background': []
}],
[{
'font': []
}],
[{
'align': []
}],
['clean'],
//['link', 'image', 'video']
['link', 'image']
];
const handlers = {
image: function image() {
var self = this;
var fileInput = this.container.querySelector('input.ql-image[type=file]');
if (fileInput === null) {
fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
//
if (uploadConfig.name) {
fileInput.setAttribute('name', uploadConfig.name);
}
//
fileInput.setAttribute('accept', uploadConfig.accept);
fileInput.classList.add('ql-image');
//
fileInput.addEventListener('change', function () {
// formData
let formData = new FormData();
formData.append('file', fileInput.files[0]);
fileInput.value = '';
//
service.post('oss/service/oss/upload', formData, {
headers: {
"Content-Type": "multipart/form-data;"
}
}).then(resp => {
var path = resp.data;
//var picPath = process.env.FTP_URL + path;
let length = self.quill.getSelection(true).index;
// , ,img src ,res.path 。
//console.log(path)
self.quill.insertEmbed(length, 'image', path);
self.quill.setSelection(length + 1)
fileInput.value = ''
});
});
this.container.appendChild(fileInput);
}
fileInput.click();
}
};
export default {
placeholder: ' ',
theme: 'snow', //
modules: {
toolbar: {
container: toolOptions, //
handlers: handlers //
}
}
};
utils/request.js
import axios from 'axios';
import {
Message
} from 'element-ui'
// service, axios
const service = axios.create({
// process.env.NODE_ENV === 'development'
// easy-mock ,
// baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
timeout: 15000
});
//
service.interceptors.request.use(
config => {
let token = sessionStorage.getItem('token_mark');
config.headers.token_mark = token;
return config;
},
error => {
return Promise.reject();
}
);
//
service.interceptors.response.use(
response => {
if (response.status === 200) {
// token
if (response.headers.token_mark) {
sessionStorage.setItem('token_mark', response.headers.token_mark)
}
return response.data;
} else {
Message({
showClose: true,
duration: 0,
message: ' , ',
type: 'error'
});
Promise.reject();
}
},
error => {
Message({
showClose: true,
duration: 0,
message: ' , ',
type: 'error'
});
return Promise.reject();
}
);
export default service;
3.부 텍스트 구성 요소 도입 및 프로젝트 에 설정
//
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import quillConfig from '../../../assets/js/quill-config';
import Vue from 'vue';
export default {
data() {
return {
//
editorOption: quillConfig
}
}
// , data()
components: {
quillEditor
}
<quill-editor ref="myTextEditor" v-model="updateProductDetailModel.introduction" :options="editorOption">quill-editor>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.