构建框架

2024-06-24 18:52:21 +08:00
commit 33942cbe95
328 changed files with 50716 additions and 0 deletions
@@ -0,0 +1,147 @@
+<template>
+	<div class="sceditor">
+		<Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" />
+	</div>
+</template>
+
+<script>
+	import API from "@/api";
+	import Editor from '@tinymce/tinymce-vue'
+	import tinymce from 'tinymce/tinymce'
+	import 'tinymce/themes/silver'
+	import 'tinymce/icons/default'
+	import 'tinymce/models/dom'
+
+	// 引入编辑器插件
+	import 'tinymce/plugins/code'  //编辑源码
+	import 'tinymce/plugins/image'  //插入编辑图片
+	import 'tinymce/plugins/media'  //插入视频
+	import 'tinymce/plugins/link'  //超链接
+	import 'tinymce/plugins/preview'//预览
+	import 'tinymce/plugins/template'//模板
+	import 'tinymce/plugins/table'  //表格
+	import 'tinymce/plugins/pagebreak'  //分页
+	import 'tinymce/plugins/lists'  //列
+	import 'tinymce/plugins/advlist'  //列
+	import 'tinymce/plugins/quickbars'  //快速工具条
+
+	export default {
+		components: {
+			Editor
+		},
+		props: {
+			modelValue: {
+				type: String,
+				default: ""
+			},
+			placeholder: {
+				type: String,
+				default: ""
+			},
+			height: {
+				type: Number,
+				default: 300,
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			plugins: {
+				type: [String, Array],
+				default: 'code image media link preview table quickbars template pagebreak lists advlist'
+			},
+			toolbar: {
+				type: [String, Array],
+				default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
+					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
+					image media table template preview | code selectall'
+			},
+			templates: {
+				type: Array,
+				default: () => []
+			},
+			options: {
+				type: Object,
+				default: () => {}
+			}
+		},
+		data() {
+			return {
+				init: {
+					language_url: 'tinymce/langs/zh_CN.js',
+					language: 'zh_CN',
+					skin_url: 'tinymce/skins/ui/oxide',
+					content_css: "tinymce/skins/content/default/content.css",
+					menubar: false,
+					statusbar: true,
+					plugins: this.plugins,
+					toolbar: this.toolbar,
+					toolbar_mode: 'sliding',
+					font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
+					height: this.height,
+					placeholder: this.placeholder,
+					branding: false,
+					resize: true,
+					elementpath: true,
+					content_style: "",
+					templates: this.templates,
+					quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
+					quickbars_image_toolbar: 'alignleft aligncenter alignright',
+					quickbars_insert_toolbar: false,
+					image_caption: true,
+					image_advtab: true,
+					convert_urls: false,
+					images_upload_handler: function(blobInfo) {
+						return new Promise((resolve, reject) => {
+							const data = new FormData();
+							data.append("file", blobInfo.blob() ,blobInfo.filename());
+							API.common.upload.post(data).then((res) => {
+								resolve(res.data.src)
+							}).catch(() => {
+								reject("Image upload failed")
+							})
+						})
+					},
+					setup: function(editor) {
+						editor.on('init', function() {
+							this.getBody().style.fontSize = '14px';
+						})
+						editor.on('OpenWindow', function(e) {
+							//FIX 编辑器在el-drawer中，编辑器的弹框无法获得焦点
+							var D = document.querySelector('.el-drawer.open')
+							var E = e.target.editorContainer
+							if(D && D.contains(E)){
+								var nowDA = document.activeElement
+								setTimeout(()=>{
+									document.activeElement.blur()
+									nowDA.focus()
+								},0)
+							}
+						})
+					},
+					...this.options
+				},
+				contentValue: this.modelValue
+			}
+		},
+		watch: {
+			modelValue(val) {
+				this.contentValue = val
+			},
+			contentValue(val){
+				this.$emit('update:modelValue', val);
+			}
+		},
+		mounted() {
+			tinymce.init({})
+		},
+		methods: {
+			onClick(e){
+				this.$emit('onClick', e, tinymce)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>