@gct-paas/core-web 0.1.5-test.1 → 0.1.6-dev.0

package/es/components/label-design/components/rich-editor/index.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,259 @@
+import './style.css';/* empty css           */
+import { registerFormatPaint } from "./formatBrush.mjs";
+import { createElementBlock, createVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, ref, shallowRef, unref } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+//#region src/components/label-design/components/rich-editor/index.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { style: { "border": "1px solid #e8ebf0" } };
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RichEditorWidget",
+	__name: "index",
+	props: { content: {} },
+	emits: [
+		"created",
+		"blur",
+		"change",
+		"focus"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		registerFormatPaint();
+		const toolbarConfig = {
+			toolbarKeys: [
+				"undo",
+				"redo",
+				"FormatPaintMenuConf",
+				"clearStyle",
+				"|",
+				"headerSelect",
+				"fontFamily",
+				"fontSize",
+				"fontFamily",
+				"fontSize",
+				"|",
+				"bold",
+				"italic",
+				"through",
+				"underline",
+				"color",
+				"bgColor",
+				"|",
+				{
+					key: "group-justify",
+					title: "对齐方式",
+					iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
+					menuKeys: [
+						"justifyLeft",
+						"justifyCenter",
+						"justifyRight",
+						"justifyJustify"
+					],
+					className: "force-click-menu"
+				},
+				{
+					key: "indentDropdown",
+					title: "缩进调整",
+					iconSvg: `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0003 1.67969L1.00028 1.71117C0.921708 1.71117 0.857422 1.77545 0.857422 1.85403V2.85403C0.857422 2.9326 0.921708 2.99688 1.00028 2.99688L15.0003 2.9654C15.0789 2.9654 15.1431 2.90112 15.1431 2.82254V1.82254C15.1431 1.74397 15.0789 1.67969 15.0003 1.67969ZM15.0003 9.25112H6.00028C5.92171 9.25112 5.85742 9.3154 5.85742 9.39397V10.394C5.85742 10.4725 5.92171 10.5368 6.00028 10.5368H15.0003C15.0789 10.5368 15.1431 10.4725 15.1431 10.394V9.39397C15.1431 9.3154 15.0789 9.25112 15.0003 9.25112ZM15.0003 13.0368H1.00028C0.921708 13.0368 0.857422 13.1011 0.857422 13.1797V14.1797C0.857422 14.2583 0.921708 14.3225 1.00028 14.3225H15.0003C15.0789 14.3225 15.1431 14.2583 15.1431 14.1797V13.1797C15.1431 13.1011 15.0789 13.0368 15.0003 13.0368ZM15.0003 5.4654H6.00028C5.92171 5.4654 5.85742 5.52969 5.85742 5.60826V6.60826C5.85742 6.68683 5.92171 6.75112 6.00028 6.75112H15.0003C15.0789 6.75112 15.1431 6.68683 15.1431 6.60826V5.60826C15.1431 5.52969 15.0789 5.4654 15.0003 5.4654Z" fill="#666666"/>
+<path d="M0.857451 5.40115L0.857451 10.6011L3.85745 8.00115L0.857451 5.40115Z" fill="#666666"/>
+</svg>
+`,
+					menuKeys: ["indent", "delIndent"]
+				},
+				"lineHeight"
+			],
+			editorConfig: {
+				lineHeight: { lineHeightList: [
+					"1",
+					"1.15",
+					"1.5",
+					"2",
+					"2.5",
+					"3"
+				] },
+				fontSize: { fontSizeList: [
+					"12px",
+					"14px",
+					"16px",
+					"18px",
+					"20px",
+					"22px",
+					"24px",
+					"28px",
+					"32px",
+					"36px",
+					"48px",
+					"56px",
+					"64px",
+					"72px",
+					"80px",
+					"88px",
+					"96px"
+				] },
+				fontFamily: { fontFamilyList: [
+					"微软雅黑",
+					"宋体",
+					"黑体",
+					"Arial",
+					"Times New Roman"
+				] }
+			}
+		};
+		const editorConfig = {
+			placeholder: "请输入富文本",
+			readOnly: false,
+			hoverbarKeys: {
+				text: null,
+				link: null,
+				image: null
+			},
+			MENU_CONF: {
+				fontSize: { fontSizeList: [
+					"12px",
+					"14px",
+					"16px",
+					"18px",
+					"20px",
+					"22px",
+					"24px",
+					"28px",
+					"32px",
+					"34px",
+					"36px",
+					"48px",
+					"56px",
+					"64px",
+					"72px",
+					"80px",
+					"88px",
+					"96px"
+				] },
+				fontFamily: { fontFamilyList: [
+					{
+						name: "宋体",
+						value: "SimSun, 宋体, STSong, serif"
+					},
+					{
+						name: "黑体",
+						value: "SimHei, 黑体, STHeiti, sans-serif"
+					},
+					{
+						name: "微软雅黑",
+						value: "Microsoft Yahei, 微软雅黑, sans-serif"
+					},
+					{
+						name: "Arial",
+						value: "Arial, sans-serif"
+					},
+					{
+						name: "Times New Roman",
+						value: "Times New Roman, serif"
+					}
+				] }
+			}
+		};
+		const props = __props;
+		const emit = __emit;
+		const editorRef = shallowRef();
+		const valueHtml = ref("");
+		onMounted(() => {
+			setTimeout(() => {
+				valueHtml.value = props.content;
+			}, 500);
+		});
+		onBeforeUnmount(() => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			editor.destroy();
+		});
+		const handleCreated = (editor) => {
+			editorRef.value = Object.seal(editor);
+			editor.focus(true);
+			setTimeout(() => {
+				const boldBtn = document.querySelector("[data-menu-key=\"bold\"]");
+				if (boldBtn) boldBtn.setAttribute("data-tooltip", "加粗");
+				const headerSelect = document.querySelector("[data-menu-key=\"headerSelect\"]");
+				if (headerSelect) headerSelect.setAttribute("data-tooltip", "正文与标题");
+				const italic = document.querySelector("[data-menu-key=\"italic\"]");
+				if (italic) italic.setAttribute("data-tooltip", "倾斜");
+				const through = document.querySelector("[data-menu-key=\"through\"]");
+				if (through) through.setAttribute("data-tooltip", "删除线");
+				const underline = document.querySelector("[data-menu-key=\"underline\"]");
+				if (underline) underline.setAttribute("data-tooltip", "下划线");
+				const color = document.querySelector("[data-menu-key=\"color\"]");
+				if (color) color.setAttribute("data-tooltip", "字体颜色");
+				const bgColor = document.querySelector("[data-menu-key=\"bgColor\"]");
+				if (bgColor) bgColor.setAttribute("data-tooltip", "背景颜色");
+				const clearStyle = document.querySelector("[data-menu-key=\"clearStyle\"]");
+				if (clearStyle) clearStyle.setAttribute("data-tooltip", "清除样式");
+				const lineHeight = document.querySelector("[data-menu-key=\"lineHeight\"]");
+				if (lineHeight) lineHeight.setAttribute("data-tooltip", "行距调整");
+			}, 100);
+			emit("created");
+		};
+		const getContent = () => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			return editor.getHtml();
+		};
+		const handleChange = () => {
+			emit("change", getContent());
+		};
+		const handleBlur = () => {
+			emit("blur", getContent());
+		};
+		const handleFocus = (e) => {
+			emit("focus", e);
+		};
+		const getText = () => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			return editor.getText();
+		};
+		const setHtml = (node) => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			return editor.setHtml(node);
+		};
+		const dangerouslyInsertHtml = (node) => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			return editor.dangerouslyInsertHtml(node);
+		};
+		const restoreSelection = () => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			return editor.restoreSelection();
+		};
+		const isFocused = () => {
+			const editor = editorRef.value;
+			if (editor == null) return;
+			return editor.isFocused();
+		};
+		__expose({
+			getText,
+			getContent,
+			setHtml,
+			dangerouslyInsertHtml,
+			restoreSelection,
+			isFocused
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Toolbar), {
+				style: { "border-bottom": "1px solid #e8ebf0" },
+				editor: editorRef.value,
+				"default-config": toolbarConfig
+			}, null, 8, ["editor"]), createVNode(unref(Editor), {
+				modelValue: valueHtml.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => valueHtml.value = $event),
+				style: { "height": "400px" },
+				"default-config": editorConfig,
+				onOnCreated: handleCreated,
+				onOnChange: handleChange,
+				onOnBlur: handleBlur,
+				onOnFocus: handleFocus
+			}, null, 8, ["modelValue"])]);
+		};
+	}
+});
+//#endregion
+export { index_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/label-design/components/rich-editor/index.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,25 @@
+
+/* .w-e-bar-item.active {
+    background-color: #f0f0f0;
+    box-shadow: inset 0 0 3px #ccc;
+  } */
+
+/* 格式刷模式下的鼠标样式 */
+.w-e-text-container.format-brush-mode {
+  cursor:
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23000" d="M20 9v2h-7l-2 2h-2v2h2l2 2h7v2h-7l-2 2h-2v2H9v-2H7l-2-2H2v-2h5l2-2h2v-2H9l-2-2H2V9h5l2-2h2V5h2v2h2l2 2h7z"/></svg>')
+      8 8,
+    auto;
+}
+/* 禁用所有菜单的悬停展开 */
+.w-e-toolbar .w-e-menu:hover .w-e-drop-panel {
+  display: none !important;
+}
+/* 仅允许点击后展开 */
+.w-e-toolbar .w-e-menu.w-e-active .w-e-drop-panel {
+  display: block !important;
+}
+/* 修复点击区域样式 */
+.w-e-toolbar .w-e-menu {
+  pointer-events: auto !important;
+}