import { useEditor } from "@/modules/editor"; import { Alignment } from "@ckeditor/ckeditor5-alignment"; import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles"; import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline"; import { Essentials } from "@ckeditor/ckeditor5-essentials"; import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font"; import LineHeight from "ckeditor5-line-height-latest/src/lineheight"; import { Link } from "@ckeditor/ckeditor5-link"; import { Paragraph } from "@ckeditor/ckeditor5-paragraph"; import { css } from "@linaria/core"; import { defineComponent, onUnmounted, watch, watchEffect, ref, reactive, onMounted, } from "vue"; import { string } from "vue-types"; import { useCompData } from "."; import { View } from "../View"; import { nextTick } from "process"; import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings"; function GetConfig() { const fontSizeOptions = []; const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]; for (const s of list) { fontSizeOptions.push({ title: s + "", model: s + "px" }); } const fontFamilyOptions = [ { title: "默认字体", model: "" }, { title: "宋体", model: "宋体,Songti,STSong,serif" }, { title: "黑体", model: "黑体,Heiti,STHeiti,sans-serif" }, { title: "仿宋", model: "仿宋,FangSong,STFangsong,serif" }, { title: "楷体", model: "楷体,KaiTi,STKaiti,sans-serif" }, ]; const config = { // updateSourceElementOnDestroy: true, language: "zh-cn", plugins: [ Essentials, Bold, Italic, Link, Paragraph, FontColor, FontSize, FontFamily, Alignment, LineHeight, ], fontSize: { options: fontSizeOptions, supportAllValues: true, }, fontFamily: { options: fontFamilyOptions, supportAllValues: true, }, lineHeight: { options: [1, 1.5, 2, 2.5, 3], }, toolbar: { items: [ // "undo", // "redo", // "|", "fontColor", "fontFamily", "fontSize", "lineHeight", "bold", "italic", "|", "alignment", // "|", // "link", ], }, }; return config; } export const Component = defineComponent({ props: { compId: string().def(""), }, setup(props) { const comp = useCompData(props.compId); const { store, actions } = useEditor(); const state = reactive({ editableId: "", }); if (store.isEditMode) { actions.on("textFocus", function (compId, focus) { if (compId != props.compId) return; if (focus) { state.editableId = "" + Date.now(); return; } state.editableId = ""; }); } return () => ( { if (store.isEditMode) { state.editableId = "" + Date.now(); } }} > {state.editableId ? ( { state.editableId = ""; }} /> ) : (
)} ); }, }); const EditorComp = defineComponent({ props: { compId: string().isRequired, }, emits: ["lost"], setup(props, { emit }) { const inputRef = ref(); let editorInstance = ref(); const comp = useCompData(props.compId); const { store, actions, helper, controls } = useEditor(); let blurCanceler: any = null; onMounted(() => { blurCanceler = blurHandle(); }); onUnmounted(() => { blurCanceler?.(); }); function blurHandle() { function blur(e: MouseEvent) { const target = e.target as HTMLElement; if (!editorInstance.value) return; if ( editorInstance.value.ui.view.toolbar.element?.contains(target) || editorInstance.value.ui.view.editable.element?.contains(target) ) { e.stopPropagation(); return; } actions.submitUpdate(); emit("lost"); } document.addEventListener("mousedown", blur, { capture: true, }); return () => { document.removeEventListener("mousedown", blur, { capture: true }); }; } const preHeight = ref(0); return () => ( { if (editorInstance.value && comp.value !== value) { actions.updateCompData(comp, "value", value); nextTick(() => { const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight); const isChange = Math.abs(preHeight.value - h) > 1; preHeight.value = h; actions.updateCompDatas( comp, ["value", "layout.size.1"], [value, preHeight.value] ); helper.extendStreamCard(store.currStreamCardId); if (isChange) { console.log("changing=>", isChange); actions.selectObjs([]); setTimeout(() => { actions.selectObjs([props.compId]); }, 0); } }); } }} onReady={(editor: InlineEditor) => { editorInstance.value = editor; console.log("editor"); editor.setData(comp.value); editor.focus(); const range = document.createRange(); range.selectNodeContents(inputRef.value.$el); const selection = window.getSelection(); selection?.removeAllRanges(); selection?.addRange(range); }} config={GetConfig()} /> ); }, }); const readOnlyText = css` pointer-events: none; word-break: break-all; `; const textStyle = css` font-size: 12px; width: 100%; color: #666; word-break: break-all; p { margin: 0; } .ck.ck-editor__editable_inline { cursor: text; overflow: hidden; > :last-child, > :first-child { margin-top: 0; margin-bottom: 0; } padding: 0 !important; } `;