vue-editify 0.0.47 → 0.0.49

package/src/components/bussiness/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="editify-menu" :class="{ border: $parent.border, source: $parent.isSourceView }" :data-editify-mode="config.mode" :style="config.style || ''">
+	<div class="editify-menu" :class="{ border: menuShowBorder, source: $parent.isSourceView && menuMode == 'inner', fullscreen: $parent.isFullScreen }" :data-editify-mode="menuMode" :style="config.style || ''">
 		<MenuItem v-for="item in menuNames" :name="item" :disabled="menuDisabled(item)"></MenuItem>
 	</div>
 </template>
@@ -326,6 +326,14 @@ export default {
 				rightBorder: this.config.sourceView.rightBorder,
 				active: false,
 				disabled: false
+			},
+			//全屏按钮配置
+			fullScreenConfig: {
+				show: this.config.fullScreen.show,
+				leftBorder: this.config.fullScreen.leftBorder,
+				rightBorder: this.config.fullScreen.rightBorder,
+				active: false,
+				disabled: false
 			}
 		}
 	},
@@ -342,11 +350,31 @@ export default {
 		//菜单是否禁用
 		menuDisabled() {
 			return name => {
-				if (name == 'sourceView') {
+				if (name == 'sourceView' || name == 'fullScreen') {
 					return false
 				}
 				return this.$parent.isSourceView
 			}
+		},
+		//菜单模式
+		menuMode() {
+			//如果是全屏状态下或者高度自适应情况下
+			if (this.$parent.isFullScreen || this.$parent.height === true) {
+				//fixed模式改为默认模式
+				if (this.config.mode == 'fixed') {
+					return 'default'
+				}
+			}
+			return this.config.mode
+		},
+		//菜单栏是否显示边框
+		menuShowBorder() {
+			//fixed模式下不显示边框
+			if (this.menuMode == 'fixed') {
+				return false
+			}
+			//由编辑器的border属性来决定
+			return this.$parent.showBorder
 		}
 	},
 	components: {
@@ -789,7 +817,7 @@ export default {
 							onLayerShow: () => {
 								//存在选区的情况下预置链接文本值
 								let text = ''
-								const result = this.$parent.$parent.editor.getElementsByRange(true, true)
+								const result = this.$parent.$parent.editor.getElementsByRange().flatIncludes
 								result.forEach(item => {
 									if (item.element.isText()) {
 										if (item.offset) {
@@ -969,6 +997,23 @@ export default {
 						() => h(Icon, { value: 'source-view' })
 					)
 				}
+				//全屏按钮
+				if (this.name == 'fullScreen' && this.$parent.fullScreenConfig.show) {
+					return h(
+						Button,
+						{
+							...props,
+							title: this.$editTrans('fullScreen'),
+							leftBorder: this.$parent.fullScreenConfig.leftBorder,
+							rightBorder: this.$parent.fullScreenConfig.rightBorder,
+							color: this.$parent.color,
+							disabled: this.$parent.fullScreenConfig.disabled || this.disabled || this.$parent.disabled,
+							active: this.$parent.fullScreenConfig.active,
+							onOperate: this.$parent.handleOperate
+						},
+						() => h(Icon, { value: 'full-screen' })
+					)
+				}
 
 				/** 下面是拓展菜单的配置 */
 				if (Dap.common.isObject(this.$parent.config.extends)) {
@@ -1187,14 +1232,20 @@ export default {
 					this.$parent.editor.rangeRender()
 				}
 			}
+			//全屏
+			else if (name == 'fullScreen') {
+				this.$parent.isFullScreen = !this.$parent.isFullScreen
+				this.fullScreenConfig.active = this.$parent.isFullScreen
+				this.$parent.editor.rangeRender()
+			}
 		},
 		//处理光标更新
-		handleRangeUpdate() {
+		handleRangeUpdate(useCache = false) {
 			if (this.disabled) {
 				return
 			}
 			//获取选区的元素
-			const result = this.$parent.editor.getElementsByRange(true, false, true)
+			const result = this.$parent.editor.getElementsByRange(useCache).includes
 			//选区是否含有代码块元素
 			const hasPreStyle = this.$parent.hasPreStyle(true)
 			//选区是否含有表格元素
@@ -1203,10 +1254,8 @@ export default {
 			const hasQuote = this.$parent.hasQuote(true)
 			//选区是否都在引用元素内
 			const inQuote = this.$parent.inQuote(true)
-
 			//选区是否含有链接元素
 			const hasLink = this.$parent.hasLink(true)
-
 			//选区是否都在有序列表内
 			const inOrderList = this.$parent.inList(true, true)
 			//选区是否都在无序列表内
@@ -1400,6 +1449,9 @@ export default {
 
 			//代码视图按钮激活
 			this.sourceViewConfig.active = this.$parent.isSourceView
+
+			//全屏按钮激活
+			this.fullScreenConfig.active = this.$parent.isFullScreen
 		}
 	}
 }
@@ -1414,39 +1466,50 @@ export default {
 	position: relative;
 	z-index: 2;
 
+	//默认菜单模式
 	&[data-editify-mode='default'] {
 		margin-bottom: 10px;
 		padding: 6px 10px;
 
+		//默认菜单模式显示边框，同时显示圆角
 		&.border {
 			border: 1px solid @border-color;
 			border-radius: 4px;
 		}
+
+		//全屏模式下，默认菜单的边框失效，此时加一个下边框
+		&.fullscreen {
+			border-bottom: 1px solid @border-color;
+		}
 	}
 
+	//inner菜单模式
 	&[data-editify-mode='inner'] {
 		padding: 10px;
 		margin-bottom: -20px;
 
+		//inner菜单模式显示边框，同时显示圆角
 		&.border {
 			border: 1px solid @border-color;
 			border-bottom: none;
 			border-radius: 4px 4px 0 0;
 			transition: all 500ms;
+		}
 
-			&:not(.source)::before {
-				position: absolute;
-				content: '';
-				width: calc(100% - 20px);
-				height: 1px;
-				background-color: @border-color;
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: 0;
-			}
+		//inner菜单模式加一个下边框，此边框在代码视图下不显示
+		&:not(.source)::before {
+			position: absolute;
+			content: '';
+			width: calc(100% - 20px);
+			height: 1px;
+			background-color: @border-color;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: 0;
 		}
 	}
 
+	//fixed菜单模式
 	&[data-editify-mode='fixed'] {
 		padding: 6px 10px;
 		position: fixed;

package/src/components/bussiness/Toolbar.vue

@@ -474,80 +474,80 @@ export default {
 	methods: {
 		//清除格式
 		clearFormat() {
-			this.$parent.formatText()
+			this.$parent.formatText(true, true)
 		},
 		//设置背景色
 		setBackColor(value) {
-			this.$parent.setTextStyle('background-color', value)
+			this.$parent.setTextStyle('background-color', value, true, true)
 			this.$refs.backColor.hideLayer()
 		},
 		//设置前景色
 		setForeColor(value) {
-			this.$parent.setTextStyle('color', value)
+			this.$parent.setTextStyle('color', value, true, true)
 			this.$refs.foreColor.hideLayer()
 		},
 		//设置行高
 		setLineHeight(name, value) {
-			this.$parent.setLineHeight(value)
+			this.$parent.setLineHeight(value, true, true)
 		},
 		//设置字体
 		setFontFamily(name, value) {
-			this.$parent.setTextStyle('font-family', value)
+			this.$parent.setTextStyle('font-family', value, true, true)
 		},
 		//设置字号
 		setFontSize(name, value) {
-			this.$parent.setTextStyle('font-size', value)
+			this.$parent.setTextStyle('font-size', value, true, true)
 		},
 		//设置上标
 		setSuperscript() {
-			this.$parent.setTextStyle('vertical-align', 'super')
+			this.$parent.setTextStyle('vertical-align', 'super', true, true)
 		},
 		//设置下标
 		setSubscript() {
-			this.$parent.setTextStyle('vertical-align', 'sub')
+			this.$parent.setTextStyle('vertical-align', 'sub', true, true)
 		},
 		//设置行内代码样式
 		setCodeStyle() {
-			this.$parent.setTextMark('data-editify-code', true)
+			this.$parent.setTextMark('data-editify-code', true, true, true)
 		},
 		//设置下划线
 		setUnderline() {
-			this.$parent.setTextStyle('text-decoration', 'underline')
+			this.$parent.setTextStyle('text-decoration', 'underline', true, true)
 		},
 		//设置删除线
 		setStrikethrough() {
-			this.$parent.setTextStyle('text-decoration', 'line-through')
+			this.$parent.setTextStyle('text-decoration', 'line-through', true, true)
 		},
 		//设置列表
 		setList(name) {
-			this.$parent.setList(name == 'orderList')
+			this.$parent.setList(name == 'orderList', true, true)
 		},
 		//设置任务列表
 		setTask() {
-			this.$parent.setTask()
+			this.$parent.setTask(true, true)
 		},
 		//斜体
 		setItalic() {
-			this.$parent.setTextStyle('font-style', 'italic')
+			this.$parent.setTextStyle('font-style', 'italic', true, true)
 		},
 		//加粗
 		setBold() {
-			this.$parent.setTextStyle('font-weight', 'bold')
+			this.$parent.setTextStyle('font-weight', 'bold', true, true)
 		},
 		//设置标题
 		setHeading(name, value) {
-			this.$parent.setHeading(value)
+			this.$parent.setHeading(value, true, true)
 		},
 		//设置对齐方式
 		setAlign(name, value) {
-			this.$parent.setAlign(value)
+			this.$parent.setAlign(value, true, true)
 		},
 		//设置视频
 		setVideo(prop) {
 			if (this.$parent.disabled) {
 				return
 			}
-			const video = this.$parent.getCurrentParsedomElement('video')
+			const video = this.$parent.getCurrentParsedomElement('video', true)
 			if (video) {
 				//当前是拥有该属性
 				if (this.videoConfig[prop]) {
@@ -567,7 +567,7 @@ export default {
 			if (this.$parent.disabled) {
 				return
 			}
-			const element = this.$parent.getCurrentParsedomElement('img') || this.$parent.getCurrentParsedomElement('video', true)
+			const element = this.$parent.getCurrentParsedomElement('img', true) || this.$parent.getCurrentParsedomElement('video', true)
 			if (element) {
 				const styles = {
 					width: value
@@ -594,7 +594,7 @@ export default {
 			if (!this.linkConfig.url) {
 				return
 			}
-			const link = this.$parent.getCurrentParsedomElement('a')
+			const link = this.$parent.getCurrentParsedomElement('a', true)
 			if (link) {
 				link.marks.href = this.linkConfig.url
 				if (this.linkConfig.newOpen) {
@@ -627,7 +627,7 @@ export default {
 			if (this.$parent.disabled) {
 				return
 			}
-			const pre = this.$parent.getCurrentParsedomElement('pre')
+			const pre = this.$parent.getCurrentParsedomElement('pre', true)
 			if (pre) {
 				Object.assign(pre.marks, {
 					'data-editify-hljs': value
@@ -646,7 +646,7 @@ export default {
 				this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
 				this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
 			}
-			const pre = this.$parent.getCurrentParsedomElement('pre')
+			const pre = this.$parent.getCurrentParsedomElement('pre', true)
 			if (pre) {
 				const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
 				const breakEl = new AlexElement('closed', 'br', null, null, null)
@@ -672,7 +672,7 @@ export default {
 				this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
 				this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
 			}
-			const table = this.$parent.getCurrentParsedomElement('table')
+			const table = this.$parent.getCurrentParsedomElement('table', true)
 			const column = this.$parent.getCurrentParsedomElement('td', true)
 			const tbody = this.$parent.getCurrentParsedomElement('tbody', true)
 			if (column && table && tbody) {
@@ -716,7 +716,7 @@ export default {
 				this.$parent.editor.rangeRender()
 			}
 		},
-		//表格插入前后插入行
+		//表格前后插入行
 		insertTableRow(type = 'up') {
 			if (this.$parent.disabled) {
 				return
@@ -725,7 +725,7 @@ export default {
 				this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
 				this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
 			}
-			const table = this.$parent.getCurrentParsedomElement('table')
+			const table = this.$parent.getCurrentParsedomElement('table', true)
 			const row = this.$parent.getCurrentParsedomElement('tr', true)
 			if (table && row) {
 				const newRow = row.clone()
@@ -755,7 +755,7 @@ export default {
 			if (this.$parent.disabled) {
 				return
 			}
-			const table = this.$parent.getCurrentParsedomElement('table')
+			const table = this.$parent.getCurrentParsedomElement('table', true)
 			if (table) {
 				const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
 				const breakEl = new AlexElement('closed', 'br', null, null, null)
@@ -781,12 +781,12 @@ export default {
 				this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
 				this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
 			}
-			const table = this.$parent.getCurrentParsedomElement('table')
+			const table = this.$parent.getCurrentParsedomElement('table', true)
 			const row = this.$parent.getCurrentParsedomElement('tr', true)
 			if (table && row) {
 				const parent = row.parent
 				if (parent.children.length == 1) {
-					this.$parent.deleteByParsedom('table')
+					this.$parent.deleteByParsedom('table', true, true)
 					return
 				}
 				const previousRow = this.$parent.editor.getPreviousElement(row)
@@ -817,14 +817,14 @@ export default {
 				this.$parent.editor.range.anchor.element = this.$parent.editor.range.focus.element
 				this.$parent.editor.range.anchor.offset = this.$parent.editor.range.focus.offset
 			}
-			const column = this.$parent.getCurrentParsedomElement('td')
+			const column = this.$parent.getCurrentParsedomElement('td', true)
 			const tbody = this.$parent.getCurrentParsedomElement('tbody', true)
 			const table = this.$parent.getCurrentParsedomElement('table', true)
 			if (column && table && tbody) {
 				const rows = tbody.children
 				const parent = column.parent
 				if (parent.children.length == 1) {
-					this.$parent.deleteByParsedom('table', true)
+					this.$parent.deleteByParsedom('table', true, true)
 					return
 				}
 				const previousColumn = this.$parent.editor.getPreviousElement(column)
@@ -857,7 +857,7 @@ export default {
 		//浮层显示时
 		layerShow() {
 			//获取选区的元素
-			const result = this.$parent.editor.getElementsByRange(true, false, true)
+			const result = this.$parent.editor.getElementsByRange(true).includes
 			//代码块初始化展示设置
 			if (this.type == 'codeBlock') {
 				const pre = this.$parent.getCurrentParsedomElement('pre', true)

package/src/core/index.js

@@ -74,7 +74,7 @@ export const editorProps = {
 	},
 	//编辑内容高度
 	height: {
-		type: String,
+		type: [String, Boolean],
 		default: '600px'
 	},
 	//是否自适应高度
@@ -934,7 +934,8 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			video: 24,
 			table: 25,
 			codeBlock: 26,
-			sourceView: 27
+			sourceView: 27,
+			fullScreen: 28
 		},
 		//撤销按钮配置
 		undo: {
@@ -1264,6 +1265,15 @@ export const getMenuConfig = function (editTrans, editLocale) {
 			//右侧边框是否显示
 			rightBorder: false
 		},
+		//全屏
+		fullScreen: {
+			//是否显示此工具
+			show: true,
+			//左侧边框是否显示
+			leftBorder: false,
+			//右侧边框是否显示
+			rightBorder: false
+		},
 		//拓展菜单，每个key表示拓展菜单的唯一名称，value是对象，包含type/title/rightBorder/leftBorder/disabled/active/width/maxHeight/options/value/hideScroll/onLayerShow/onLayerShown/onLayerHidden/onOperate/default/layer/option属性
 		extends: {}
 	}

package/src/icon/iconfont.css

@@ -1,3 +1,7 @@
+.editify-icon-full-screen:before {
+	content: '\e62f';
+}
+
 .editify-icon-auto-width:before {
 	content: '\e61d';
 }

package/src/index.js

@@ -7,7 +7,7 @@ import './icon/iconfont.css'
 //引入国际化
 import i18n from './locale'
 //版本号
-const version = '0.0.47'
+const version = '0.0.49'
 //安装函数
 const install = (app, props) => {
 	const locale = (props ? props.locale : 'zh_CN') || 'zh_CN'

package/src/locale/en_US.js

@@ -81,5 +81,6 @@ export default {
 	alignRight: 'Align right',
 	alignJustify: 'Align justify',
 	defaultLineHeight: 'Default',
-	auto: 'auto'
+	auto: 'auto',
+	fullScreen: 'Full screen'
 }

package/src/locale/zh_CN.js

@@ -81,5 +81,6 @@ export default {
 	alignRight: '右对齐',
 	alignJustify: '两端对齐',
 	defaultLineHeight: '默认行高',
-	auto: '自适应'
+	auto: '自适应',
+	fullScreen: '全屏'
 }