imatrix-ui 0.2.0-up → 0.2.2-up

package/packages/rich-editor/index.vue

@@ -1,297 +1,297 @@
-<template>
-	<div :style="{ maxHeight: maxHeight + 'px' }">
-		<Editor
-				v-if="!disabled"
-				v-model:value="contentValue"
-				:disabled="disabled"
-				:init="init"
-		/>
-		<div v-else>
-			<div
-					:id="viewerId"
-					:style="{ maxHeight: maxHeight + 'px' }"
-					style="overflow: auto; border: 1px solid #dcdfe6; padding: 2px"
-			/>
-			<el-tooltip
-					:content="$t('imatrixUIPublicModel.fullScreen')"
-					class="item"
-					effect="dark"
-					placement="top"
-			>
-				<em
-						class="el-icon-full-screen"
-						style="z-index: 1; right: 20px; position: absolute; top: 2px"
-						@click="fullScreenContent"
-				/>
-			</el-tooltip>
-			<el-image
-					ref="previewImg"
-					:preview-src-list="srcList"
-					:src="srcList[0]"
-					style="display: none; width: 100px; height: 100px"
-			/>
-		</div>
-		<el-dialog
-				v-model="dialogVisible"
-				:title="title"
-				append-to-body
-				destroy-on-close
-				fullscreen
-		>
-			<div :id="fullscreenViewerId"/>
-		</el-dialog>
-	</div>
-</template>
-
-<script>
-import {$emit} from '../utils/gogocodeTransfer'
-
-import {getLanguageWithLocale} from '../../src/utils/util'
-// 引入tinymce编辑器
-// import Editor from '@tinymce/tinymce-vue'
-// // 引入node_modules里的tinymce相关文件文件
-// import tinymce from 'tinymce/tinymce.min.js' // tinymce默认hidden，不引入则不显示编辑器
-// import 'tinymce/themes/silver' // 编辑器主题，不引入则报错
-// import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
-//
-// // 引入编辑器插件
-// import 'tinymce/plugins/advlist' // 高级列表
-// import 'tinymce/plugins/directionality' // 文字方向
-// import 'tinymce/plugins/fullscreen' // 全屏
-// import 'tinymce/plugins/hr' // 水平分割线
-// import 'tinymce/plugins/image' // 插入编辑图片
-// import 'tinymce/plugins/link' // 超链接
-// import 'tinymce/plugins/lists' // 列表插件
-// import 'tinymce/plugins/paste' // 粘贴插件
-// import 'tinymce/plugins/preview' // 预览
-// import 'tinymce/plugins/print' // 打印
-// import 'tinymce/plugins/quickbars' // 快速工具栏
-// import 'tinymce/plugins/save' // 保存
-// import 'tinymce/plugins/searchreplace' // 查找替换
-// // import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
-// // import 'tinymce/plugins/tabfocus' // 切入切出，按tab键切出编辑器，切入页面其他输入框中
-// import 'tinymce/plugins/table' // 表格
-// // import 'tinymce/plugins/template' // 内容模板
-// import 'tinymce/plugins/textcolor' // 文字颜色
-// // import 'tinymce/plugins/textpattern' // 快速排版
-// // import 'tinymce/plugins/toc' // 目录生成器
-// // import 'tinymce/plugins/visualblocks' // 显示元素范围
-// // import 'tinymce/plugins/visualchars' // 显示不可见字符
-// import 'tinymce/plugins/wordcount' // 字数统计
-// // 样式
-// // import 'tinymce/skins/content/default/content.min.css'
-// import 'tinymce/skins/ui/oxide/skin.min.css'
-// import 'tinymce/skins/ui/oxide/content.min.css'
-// // 主题
-// import 'tinymce/themes/silver'
-
-export default {
-	name: 'RichEditor',
-	components: {
-		// Editor,
-	},
-	props: {
-		entity: {
-			type: Object,
-			default: null,
-		},
-		prop: {
-			type: String,
-			default: null,
-		},
-		value: {
-			type: String,
-			default: '',
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		options: {
-			type: Object,
-			default: null,
-		},
-		title: {
-			type: String,
-			default: '',
-		},
-		plugins: {
-			type: [String, Array],
-			default:
-					'paste print preview searchreplace directionality fullscreen image link table hr  advlist lists wordcount  ',
-		},
-		toolbar: {
-			type: [String, Array],
-			default:
-					' undo redo | formatselect fontsizeselect bold italic strikethrough underline hr forecolor backcolor | image |  ' +
-					'  lineheight   bullist numlist table | print fullscreen  preview  ',
-		},
-	},
-	data() {
-		const _that = this
-		if (getLanguageWithLocale() === 'zh_CN') {
-			// require('./langs/zh-Hans.js')
-		}
-		let maxHeight = '400'
-		if (this.options && this.options.maxHeight) {
-			maxHeight = this.options.maxHeight
-		}
-		return {
-			maxHeight,
-			init: {
-				height: maxHeight,
-				language: 'zh-Hans', // 语言类型
-				plugins: this.plugins, // 插件配置
-				toolbar: this.toolbar, // 工具栏配置，设为false则隐藏
-				menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
-				fontsize_formats:
-						'12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
-				font_formats:
-						'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体样式
-				// 自带默认字体：'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'
-				lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式
-				placeholder: '在这里输入文字',
-				branding: false, // tiny技术支持信息是否显示
-				resize: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
-				// statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
-				elementpath: false, // 元素路径是否显示
-				// image_caption: true,
-				// relative_urls: false,  //false: tinymce将不再自动将文件路径由绝对转为相对
-				// convert_urls: false,  //false: tinymce将不再自动处理文件路径
-				// file_picker_callback: () => {
-				//   alert(11)
-				// },
-				image_description: false,
-				content_style: 'img {width:400px;height:300px}', // 直接自定义可编辑区域的css样式
-				// content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
-				// images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
-				// images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
-				paste_data_images: true, // 图片是否可粘贴'
-				urlconverter_callback: (url, node, onSave, name) => {
-					if (node === 'img' && url.startsWith('blob:')) {
-						console.log('urlconverter_callback ....')
-						tinymce.activeEditor && tinymce.activeEditor.uploadImages()
-						return url
-					}
-					return url
-				},
-				images_upload_handler: (blobInfo, success, failure, progress) => {
-					let file
-					if (blobInfo.blob() instanceof File) {
-						console.log('images_upload_handler .File')
-						file = blobInfo.blob()
-					} else {
-						console.log('images_upload_handler .base64')
-						file = _that.base64ToFile(blobInfo.base64(), 'a.png')
-					}
-					const params = new FormData()
-					params.append('file', file)
-					const config = {
-						headers: {
-							'Content-Type': 'multipart/form-data',
-						},
-					}
-					_that.$http
-							.post('/common/fs-upload/rich-editor-image', params, config)
-							.then((res) => {
-								console.log(res)
-								success(res.url)
-							})
-							.catch(() => {
-								failure('上传出错，服务器开小差了呢')
-							})
-				},
-			},
-			contentValue: this.value,
-			markValue: '',
-			srcList: [],
-			psrcList: [],
-			viewerId: 'aglie_rich_editor_' + new Date().getTime(),
-			dialogVisible: false,
-			fullscreenViewerId: 'editor_viewer_' + new Date().getTime(),
-			ImageComponent: null,
-		}
-	},
-	watch: {
-		value: {
-			deep: true,
-			handler(newValue, oldValue) {
-				this.contentValue = newValue
-				this.entity[this.prop] = newValue
-			},
-		},
-		contentValue: {
-			deep: true,
-			handler(newValue, oldValue) {
-				$emit(this, 'update:value', newValue)
-				this.entity[this.prop] = newValue
-			},
-		},
-		disabled: {
-			deep: true,
-			handler(newValue, oldValue) {
-				if (newValue) {
-					this.initViewer()
-				}
-			},
-		},
-	},
-	created() {
-	},
-	mounted() {
-		if (this.disabled) {
-			this.initViewer()
-		} else {
-			tinymce.init(this.init)
-		}
-	},
-	methods: {
-		showImage($event) {
-			console.log(this.$refs.previewImg)
-			this.srcList = [$event.target.currentSrc]
-			this.$refs.previewImg.showViewer = true
-		},
-		fullScreenContent() {
-			this.dialogVisible = true
-			this.$nextTick(() => {
-				// 必须得再new一个，  不然会导致表单里显示。弹框不显示，弹框显示，表单不显示内容
-				const viewContent = new this.ImageComponent().$mount()
-				document
-						.getElementById(this.fullscreenViewerId)
-						.appendChild(viewContent.$el)
-			})
-		},
-		initViewer() {
-			const that = this
-			let m = this.value.replaceAll('<img', '<img @click="showImage" ')
-			m = '<div> ' + m + ' </div> '
-			this.ImageComponent = {
-				methods: {
-					showImage($event) {
-						console.log($event)
-						that.showImage($event)
-					},
-				},
-				template: m,
-				emits: ['update:value'],
-			}
-			const viewContent = new this.ImageComponent().$mount()
-			this.$nextTick(() => {
-				document.getElementById(this.viewerId).appendChild(viewContent.$el)
-			})
-		},
-		base64ToFile(data, filename) {
-			var bstr = atob(data)
-			var n = bstr.length
-			var u8arr = new Uint8Array(n)
-			filename =
-					new Date().getTime() + '-' + Math.floor(Math.random() * 10000) + '.png'
-			while (n--) {
-				u8arr[n] = bstr.charCodeAt(n)
-			}
-			return new File([u8arr], filename, {type: 'image/png'})
-		},
-	},
-	emits: ['update:value'],
-}
-</script>
+<template>
+	<div :style="{ maxHeight: maxHeight + 'px' }">
+		<Editor
+				v-if="!disabled"
+				v-model:value="contentValue"
+				:disabled="disabled"
+				:init="init"
+		/>
+		<div v-else>
+			<div
+					:id="viewerId"
+					:style="{ maxHeight: maxHeight + 'px' }"
+					style="overflow: auto; border: 1px solid #dcdfe6; padding: 2px"
+			/>
+			<el-tooltip
+					:content="$t('imatrixUIPublicModel.fullScreen')"
+					class="item"
+					effect="dark"
+					placement="top"
+			>
+				<em
+						class="el-icon-full-screen"
+						style="z-index: 1; right: 20px; position: absolute; top: 2px"
+						@click="fullScreenContent"
+				/>
+			</el-tooltip>
+			<el-image
+					ref="previewImg"
+					:preview-src-list="srcList"
+					:src="srcList[0]"
+					style="display: none; width: 100px; height: 100px"
+			/>
+		</div>
+		<el-dialog
+				v-model="dialogVisible"
+				:title="title"
+				append-to-body
+				destroy-on-close
+				fullscreen
+		>
+			<div :id="fullscreenViewerId"/>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {$emit} from '../utils/gogocodeTransfer'
+
+import {getLanguageWithLocale} from '../../src/utils/util'
+// 引入tinymce编辑器
+// import Editor from '@tinymce/tinymce-vue'
+// // 引入node_modules里的tinymce相关文件文件
+// import tinymce from 'tinymce/tinymce.min.js' // tinymce默认hidden，不引入则不显示编辑器
+// import 'tinymce/themes/silver' // 编辑器主题，不引入则报错
+// import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
+//
+// // 引入编辑器插件
+// import 'tinymce/plugins/advlist' // 高级列表
+// import 'tinymce/plugins/directionality' // 文字方向
+// import 'tinymce/plugins/fullscreen' // 全屏
+// import 'tinymce/plugins/hr' // 水平分割线
+// import 'tinymce/plugins/image' // 插入编辑图片
+// import 'tinymce/plugins/link' // 超链接
+// import 'tinymce/plugins/lists' // 列表插件
+// import 'tinymce/plugins/paste' // 粘贴插件
+// import 'tinymce/plugins/preview' // 预览
+// import 'tinymce/plugins/print' // 打印
+// import 'tinymce/plugins/quickbars' // 快速工具栏
+// import 'tinymce/plugins/save' // 保存
+// import 'tinymce/plugins/searchreplace' // 查找替换
+// // import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
+// // import 'tinymce/plugins/tabfocus' // 切入切出，按tab键切出编辑器，切入页面其他输入框中
+// import 'tinymce/plugins/table' // 表格
+// // import 'tinymce/plugins/template' // 内容模板
+// import 'tinymce/plugins/textcolor' // 文字颜色
+// // import 'tinymce/plugins/textpattern' // 快速排版
+// // import 'tinymce/plugins/toc' // 目录生成器
+// // import 'tinymce/plugins/visualblocks' // 显示元素范围
+// // import 'tinymce/plugins/visualchars' // 显示不可见字符
+// import 'tinymce/plugins/wordcount' // 字数统计
+// // 样式
+// // import 'tinymce/skins/content/default/content.min.css'
+// import 'tinymce/skins/ui/oxide/skin.min.css'
+// import 'tinymce/skins/ui/oxide/content.min.css'
+// // 主题
+// import 'tinymce/themes/silver'
+
+export default {
+	name: 'RichEditor',
+	components: {
+		// Editor,
+	},
+	props: {
+		entity: {
+			type: Object,
+			default: null,
+		},
+		prop: {
+			type: String,
+			default: null,
+		},
+		value: {
+			type: String,
+			default: '',
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		options: {
+			type: Object,
+			default: null,
+		},
+		title: {
+			type: String,
+			default: '',
+		},
+		plugins: {
+			type: [String, Array],
+			default:
+					'paste print preview searchreplace directionality fullscreen image link table hr  advlist lists wordcount  ',
+		},
+		toolbar: {
+			type: [String, Array],
+			default:
+					' undo redo | formatselect fontsizeselect bold italic strikethrough underline hr forecolor backcolor | image |  ' +
+					'  lineheight   bullist numlist table | print fullscreen  preview  ',
+		},
+	},
+	data() {
+		const _that = this
+		if (getLanguageWithLocale() === 'zh_CN') {
+			// require('./langs/zh-Hans.js')
+		}
+		let maxHeight = '400'
+		if (this.options && this.options.maxHeight) {
+			maxHeight = this.options.maxHeight
+		}
+		return {
+			maxHeight,
+			init: {
+				height: maxHeight,
+				language: 'zh-Hans', // 语言类型
+				plugins: this.plugins, // 插件配置
+				toolbar: this.toolbar, // 工具栏配置，设为false则隐藏
+				menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
+				fontsize_formats:
+						'12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+				font_formats:
+						'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体样式
+				// 自带默认字体：'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'
+				lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式
+				placeholder: '在这里输入文字',
+				branding: false, // tiny技术支持信息是否显示
+				resize: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
+				// statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
+				elementpath: false, // 元素路径是否显示
+				// image_caption: true,
+				// relative_urls: false,  //false: tinymce将不再自动将文件路径由绝对转为相对
+				// convert_urls: false,  //false: tinymce将不再自动处理文件路径
+				// file_picker_callback: () => {
+				//   alert(11)
+				// },
+				image_description: false,
+				content_style: 'img {width:400px;height:300px}', // 直接自定义可编辑区域的css样式
+				// content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
+				// images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
+				// images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
+				paste_data_images: true, // 图片是否可粘贴'
+				urlconverter_callback: (url, node, onSave, name) => {
+					if (node === 'img' && url.startsWith('blob:')) {
+						console.log('urlconverter_callback ....')
+						tinymce.activeEditor && tinymce.activeEditor.uploadImages()
+						return url
+					}
+					return url
+				},
+				images_upload_handler: (blobInfo, success, failure, progress) => {
+					let file
+					if (blobInfo.blob() instanceof File) {
+						console.log('images_upload_handler .File')
+						file = blobInfo.blob()
+					} else {
+						console.log('images_upload_handler .base64')
+						file = _that.base64ToFile(blobInfo.base64(), 'a.png')
+					}
+					const params = new FormData()
+					params.append('file', file)
+					const config = {
+						headers: {
+							'Content-Type': 'multipart/form-data',
+						},
+					}
+					_that.$http
+							.post('/common/fs-upload/rich-editor-image', params, config)
+							.then((res) => {
+								console.log(res)
+								success(res.url)
+							})
+							.catch(() => {
+								failure('上传出错，服务器开小差了呢')
+							})
+				},
+			},
+			contentValue: this.value,
+			markValue: '',
+			srcList: [],
+			psrcList: [],
+			viewerId: 'aglie_rich_editor_' + new Date().getTime(),
+			dialogVisible: false,
+			fullscreenViewerId: 'editor_viewer_' + new Date().getTime(),
+			ImageComponent: null,
+		}
+	},
+	watch: {
+		value: {
+			deep: true,
+			handler(newValue, oldValue) {
+				this.contentValue = newValue
+				this.entity[this.prop] = newValue
+			},
+		},
+		contentValue: {
+			deep: true,
+			handler(newValue, oldValue) {
+				$emit(this, 'update:value', newValue)
+				this.entity[this.prop] = newValue
+			},
+		},
+		disabled: {
+			deep: true,
+			handler(newValue, oldValue) {
+				if (newValue) {
+					this.initViewer()
+				}
+			},
+		},
+	},
+	created() {
+	},
+	mounted() {
+		if (this.disabled) {
+			this.initViewer()
+		} else {
+			tinymce.init(this.init)
+		}
+	},
+	methods: {
+		showImage($event) {
+			console.log(this.$refs.previewImg)
+			this.srcList = [$event.target.currentSrc]
+			this.$refs.previewImg.showViewer = true
+		},
+		fullScreenContent() {
+			this.dialogVisible = true
+			this.$nextTick(() => {
+				// 必须得再new一个，  不然会导致表单里显示。弹框不显示，弹框显示，表单不显示内容
+				const viewContent = new this.ImageComponent().$mount()
+				document
+						.getElementById(this.fullscreenViewerId)
+						.appendChild(viewContent.$el)
+			})
+		},
+		initViewer() {
+			const that = this
+			let m = this.value.replaceAll('<img', '<img @click="showImage" ')
+			m = '<div> ' + m + ' </div> '
+			this.ImageComponent = {
+				methods: {
+					showImage($event) {
+						console.log($event)
+						that.showImage($event)
+					},
+				},
+				template: m,
+				emits: ['update:value'],
+			}
+			const viewContent = new this.ImageComponent().$mount()
+			this.$nextTick(() => {
+				document.getElementById(this.viewerId).appendChild(viewContent.$el)
+			})
+		},
+		base64ToFile(data, filename) {
+			var bstr = atob(data)
+			var n = bstr.length
+			var u8arr = new Uint8Array(n)
+			filename =
+					new Date().getTime() + '-' + Math.floor(Math.random() * 10000) + '.png'
+			while (n--) {
+				u8arr[n] = bstr.charCodeAt(n)
+			}
+			return new File([u8arr], filename, {type: 'image/png'})
+		},
+	},
+	emits: ['update:value'],
+}
+</script>