|
@@ -95,7 +95,10 @@
|
|
> -->
|
|
> -->
|
|
|
|
|
|
<!-- formula dialog -->
|
|
<!-- formula dialog -->
|
|
- <formula-dialog ref="FormulaDialog"></formula-dialog>
|
|
|
|
|
|
+ <formula-dialog
|
|
|
|
+ ref="FormulaDialog"
|
|
|
|
+ @confirm="formulaConfirm"
|
|
|
|
+ ></formula-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -109,6 +112,11 @@ import FormulaDialog from "./FormulaDialog";
|
|
export default {
|
|
export default {
|
|
name: "VMenu",
|
|
name: "VMenu",
|
|
components: { FormulaDialog },
|
|
components: { FormulaDialog },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ curEditFocusRange: null,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
setDocMode(type) {
|
|
setDocMode(type) {
|
|
setDocMode(type, this.$parent.$refs.editor);
|
|
setDocMode(type, this.$parent.$refs.editor);
|
|
@@ -144,8 +152,47 @@ export default {
|
|
*/
|
|
*/
|
|
addFormula(event) {
|
|
addFormula(event) {
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
|
|
+ const selection = window.getSelection();
|
|
|
|
+ if (selection.focusNode && this.checkDomInEditor(selection.focusNode)) {
|
|
|
|
+ this.curEditFocusRange = selection.getRangeAt(0);
|
|
|
|
+ } else {
|
|
|
|
+ this.$el.nextSibling.focus();
|
|
|
|
+ const selection = window.getSelection();
|
|
|
|
+ this.curEditFocusRange = selection.getRangeAt(0);
|
|
|
|
+ }
|
|
this.$refs.FormulaDialog.open();
|
|
this.$refs.FormulaDialog.open();
|
|
},
|
|
},
|
|
|
|
+ checkDomInEditor(dom) {
|
|
|
|
+ let parentNode = dom;
|
|
|
|
+ while (
|
|
|
|
+ !(
|
|
|
|
+ (parentNode.className &&
|
|
|
|
+ parentNode.className.includes("v-editor-body")) ||
|
|
|
|
+ parentNode.nodeName === "BODY"
|
|
|
|
+ )
|
|
|
|
+ ) {
|
|
|
|
+ parentNode = parentNode.parentNode;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ parentNode.className && parentNode.className.includes("v-editor-body")
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ formulaConfirm(result) {
|
|
|
|
+ if (!this.curEditFocusRange) {
|
|
|
|
+ const selection = window.getSelection();
|
|
|
|
+ this.curEditFocusRange = selection.getRangeAt(0);
|
|
|
|
+ }
|
|
|
|
+ this.curEditFocusRange.deleteContents();
|
|
|
|
+
|
|
|
|
+ const el = document.createElement("img");
|
|
|
|
+ el.src = result.dataUrl;
|
|
|
|
+ el.dataset.isImage = true;
|
|
|
|
+ el.dataset.dataLatex = result.latex;
|
|
|
|
+ el.style = `width: ${result.param.width}px;height:${result.param.height}px;`;
|
|
|
|
+ this.curEditFocusRange.insertNode(el);
|
|
|
|
+ this.curEditFocusRange.collapse();
|
|
|
|
+ },
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|