在項目中使用vue-quill-editor

最近自愛項目中遇到了富文本的使用，所以記錄一下，嘻嘻

vue-quill-editor

npm install vue-quill-editor --save
複製代碼

富文本組件

 
import Quill from 'quill';
import { quillEditor } from 'vue-quill-editor';
 
import VideoBlot from './video';
Quill.register(VideoBlot);
複製代碼

使用這個組件的原因

希望可以傳本地圖片和本地視頻

本地圖片在默認組件中是可以傳的，但是得到的內容是base64，在傳到後臺的時候，後臺的內存不夠，所以這裡也用了自己的代碼替代組件原本的上傳

這裡的uploader是使用elementui自己封裝的組件，用來上傳

其中遇到的問題

• 劫持圖片和劫持視頻的元素的id不能一樣
• 當一個頁面中有多個富文本的時候，會導致只有第一個富文本是好使的，這是因為：

當頁面有兩個富文本的時候，劫持圖片和劫持視頻的元素是固定的，所以劫持事件中獲取的元素永遠都是第一個，所以這個時候不能固定元素的id，需要從父組件中傳入不一樣的id，這樣獲取的元素就是各自的元素

	
	
	 
	 
	
	 
	 
	

複製代碼
data() {
 return {
 // toolbar的配置
 editorOption: {
 	placeholder: '輸入文本...',
 	theme: 'snow', // 主題
 	modules: {
 		imageResize: { // 添加圖片拖拽上傳，自定義大小
 			displayStyles: { // 添加
 				backgroundColor: 'black',
 				border: 'none',
 				color: 'white',
 			},
 			modules: ['Resize', 'DisplaySize', 'Toolbar'], // 添加
 		},
 		toolbar: {
 			container: [
 				['bold', 'italic', 'underline', 'strike'], // 加粗，斜體，下劃線，刪除線
 				['blockquote', 'code-block'], // 引用，代碼塊
 				[{ header: 1 }, { header: 2 }], // 標題，鍵值對的形式；1、2表示字體大小
 				[{list: 'ordered'}, { list: 'bullet' }], // 列表
 				[{script: 'sub'}, {>
video文件
插入視頻的時候使用video標籤，默認是一個iframe
 
import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');
class VideoBlot extends BlockEmbed {
public static create(value) {
	const node = super.create();
	node.setAttribute('src', value.url);
	node.setAttribute('controls', value.controls);
	node.setAttribute('width', value.width);
	node.setAttribute('height', value.height);
	node.setAttribute('webkit-playsinline', true);
	node.setAttribute('playsinline', true);
	node.setAttribute('x5-playsinline', true);
	return node;
}
public static value(node) {
	return {
		url: node.getAttribute('src'),
		controls: node.getAttribute('controls'),
		width: node.getAttribute('width'),
		height: node.getAttribute('height'),
	};
}
}
VideoBlot.blotName = 'simpleVideo';
VideoBlot.tagName = 'video';
export default VideoBlot;
複製代碼
默認的時候圖片是不能縮放的
 
npm install quill-image-resize-module --save
複製代碼
import imageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', imageResize);
複製代碼
但是這樣還是不行的，會報錯，忘了是啥，需要在vue.config.js中加上配置
configureWebpack: {
	plugins: [
		new webpack.ProvidePlugin({
			'window.Quill': 'quill/dist/quill.js',
			'Quill': 'quill/dist/quill.js'
		})
	]
}
複製代碼
頁面中使用
	


	

 

                

            

            
            
            
            
            
            
            
            
            
            
            

            



分享到:



關鍵字:
富文本
項目
文本