elementUI富文本组件封装

最新推荐文章于 2025-01-23 13:37:21 发布

原创

最新推荐文章于 2025-01-23 13:37:21 发布 · 4.3k 阅读

11 ·

CC 4.0 BY-SA版权

博客围绕VUE中富文本组件展开，指出通常需二次封装。介绍了富文本初始化，封装方法和配置在页面初始化时调用；增加只读样式以方便展示；支持el - form - item校验，加入传播事件；还说明了错误样式提示方法，并给出完整代码。

富文本

这里使用的是vue-quill-editor组件作为富文本功能。
在VUE中使用vue-quill-editor非常方便，引入组件就可以马上使用，但是通常情况下，我们都需要进行一些自定义的功能，所以需要自己进行二次封装。

初始化

	<template>
	  <quillEditor
	    class="ql-toolbar"
	    v-model="content"
	    ref="quillEditor"
	  >
	  </quillEditor>
	</template>
	<script>
	import {
   
    quillEditor } from 'vue-quill-editor';
	export default {
   
   
	  components:[quillEditor],
	  props:{
   
   
	  	value:{
   
   
			type:String.
			default:''
		}
	  },
		data() {
   
   
		  return {
   
   
		   content: '',
		  };
		},
		watch:{
   
   
		    value(v) {
   
   
      			this.content = v;
    		},
    	}
	}
	</script>

富文本初始化

封装了一个方法和配置，在页面初始化的时候调用即可。

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-clean': '清除字体样式',
};
function addQuillTitle() {
   
   
  const oToolBar = document.querySelector('.ql-toolbar');
  const aButton = oToolBar.querySelectorAll('button');
  const aSelect = oToolBar.querySelectorAll('select');
  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 {
   
   
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach((item) => {
   
   
    item.parentNode.title = titleConfig[item.classList[0]];
  });
  // 关闭单词检测提示
  document.querySelector('.ql-editor').setAttribute('spellcheck', false);
  return oToolBar;

最低0.47元/天解锁文章