1

package.json

@@ -13,6 +13,7 @@
  "dependencies": {
    "element-ui": "^2.15.1",
    "js-cookie": "^2.2.1",
    "quill-image-resize-module": "^3.0.0",
    "vue": "^2.5.11",
    "vue-i18n": "^8.23.0",
    "vue-quill-editor": "^3.0.6"

src/components/Form/form.vue

@@ -107,11 +107,53 @@
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 {quillEditor, Quill} from 'vue-quill-editor'
import { ImageResize } from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
import Upload from './Upload'
import {pickerOptions} from '../js/common'
import Tools from '../../utils/tool'
import defaultEditorOption from './editOptions'
let toolbarTooltips = {
	'font': '字体',
	'size': '字体大小',
	'header': '字体大小',
	'bold': '加粗',
	'italic': '斜体',
	'underline': '下划线',
	'strike': '删除线',
	'color' : '字体颜色',
	'background': '背景颜色',
	'script': {
		'sub' : 'Subscript',
		'super': 'Superscript'
	},
	'list': {
		'ordered':'Numbered list',
		'bullet': 'Bulleted list'
	},
	'indent': {
		'-1': '缩进-1',
		'+1':  '缩进+1'
	},
	'direction': {
		'rtl': 'Text direction (right to left | left to right)',
		'ltr': 'Text direction (left ro right | right to left)'
	},
	'align': '排列',
	'link': '插入超链接',
	'image': '插入图片',
	'video': '插入视频',
	'formula': 'Insert a formula',
	'clean': 'Clear format',
	'add-table': 'Add a new table',
	'table-row': 'Add a row to the selected table',
	'table-column': 'Add a column to the selected table',
	'remove-table': 'Remove selected table',
	'help': 'Show help'
};
export default {
	props: {
		fields: {},
@@ -187,7 +229,8 @@ export default {
			this.$emit('onEditorFocus', {editor, item})
		},
		onEditorReady(editor) {
            this.$emit('onEditorReady', {editor, item})
			this.showTooltips();
			this.$emit('onEditorReady', {editor, item})
		},
		onEditorChange({editor, html, text}, item) {
			this.$emit('onEditorChange', {editor, html, text, item})
@@ -226,6 +269,46 @@ export default {
                this.uploadLoading.close()
            }
		},
		showTooltips(){
			let showTooltip = (which,el) => {
				if (which=='button'){
					var tool = el.className.replace('ql-', '');
				}
				else if (which=='span'){
					var tool = el.className.replace('ql-','');
					tool=tool.substr(0,tool.indexOf(' '));
				}
				if (tool){
					//if element has value attribute.. handling is different
					//buttons without value
					if (el.value ==''){
						if (toolbarTooltips[tool])
						el.setAttribute('title',toolbarTooltips[tool]);
					}
					//buttons with value
					else if (typeof el.value !=='undefined'){
						if (toolbarTooltips[tool][el.value])
						el.setAttribute('title',toolbarTooltips[tool][el.value]);
					}
					//default
					else
						el.setAttribute('title',toolbarTooltips[tool]);
				}
			};
			let toolbarElement = document.querySelector('.ql-toolbar');
			if (toolbarElement) {
				let matchesButtons = toolbarElement.querySelectorAll('button');
				for (let el of matchesButtons) {
					showTooltip('button',el);
				}
				//for submenus inside 
				let matchesSpans = toolbarElement.querySelectorAll('.ql-toolbar > span > span');
				for (let el of matchesSpans) {
					showTooltip('span',el);
				}
			}
		} 
		//富文本编辑  新增  end
	}
}