|
|
@@ -1,16 +1,7 @@
|
|
|
<template>
|
|
|
<div ref="richArea" class="rich-wrapper">
|
|
|
- <Editor
|
|
|
- v-bind="$attrs"
|
|
|
- :id="id"
|
|
|
- ref="richText"
|
|
|
- model-events="change keyup undo redo setContent"
|
|
|
- :value="value"
|
|
|
- :class="['rich-text', isBorder ? 'is-border' : '']"
|
|
|
- :init="init"
|
|
|
- v-on="$listeners"
|
|
|
- @onBlur="handleRichTextBlur"
|
|
|
- />
|
|
|
+ <Editor v-bind="$attrs" :id="id" ref="richText" model-events="change keyup undo redo setContent" :value="value"
|
|
|
+ :class="['rich-text', isBorder ? 'is-border' : '']" :init="init" v-on="$listeners" @onBlur="handleRichTextBlur" />
|
|
|
<div v-show="isShow" :style="contentmenu" class="contentmenu">
|
|
|
<div v-if="isViewNote" @click="openExplanatoryNoteDialog">
|
|
|
<SvgIcon icon-class="mark" size="14" />
|
|
|
@@ -402,9 +393,19 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+ // 注册自定义字间距图标
|
|
|
+ editor.ui.registry.addIcon(
|
|
|
+ 'letter-spacing-icon',
|
|
|
+ `<svg viewBox="4 4 18 18" width="44" height="24">
|
|
|
+ <text x="17" y="18" text-anchor="middle" font-size="14" font-weight="bold" fill="#000">A</text>
|
|
|
+ <path d="M12 10 L6 10 M6 10 L7.5 8.5 M6 10 L7.5 11.5" stroke="#1E90FF" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
+ <path d="M22 10 L28 10 M28 10 L26.5 8.5 M28 10 L26.5 11.5" stroke="#1E90FF" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
+ </svg>`,
|
|
|
+ );
|
|
|
+
|
|
|
// 添加字间距下拉菜单
|
|
|
editor.ui.registry.addMenuButton('letterSpacing', {
|
|
|
- icon: 'border-width',
|
|
|
+ icon: 'letter-spacing-icon',
|
|
|
// text: '字间距',
|
|
|
tooltip: '字间距',
|
|
|
fetch: (callback) => {
|
|
|
@@ -652,6 +653,9 @@ export default {
|
|
|
getRichContent() {
|
|
|
return tinymce.get(this.id).getContent();
|
|
|
},
|
|
|
+ getRichSelectionContent() {
|
|
|
+ return tinymce.get(this.id).selection.getContent();
|
|
|
+ },
|
|
|
displayToolbar(isTitle, isInit) {
|
|
|
if (!this.editorIsInited) {
|
|
|
this.editorBeforeInitConfig['isTitle'] = isTitle;
|
|
|
@@ -995,7 +999,7 @@ export default {
|
|
|
let start = editor.selection.getStart();
|
|
|
if (isNodeType(start, 'span')) {
|
|
|
let textContent = start.textContent;
|
|
|
- let content = this.getRichContent();
|
|
|
+ let content = this.getRichSelectionContent();
|
|
|
let str = textContent.split(content);
|
|
|
start.remove();
|
|
|
editor.selection.setContent(str.join(content));
|
|
|
@@ -1007,7 +1011,7 @@ export default {
|
|
|
setContent() {
|
|
|
let editor = tinymce.get(this.id);
|
|
|
let start = editor.selection.getStart();
|
|
|
- let content = this.getRichContent();
|
|
|
+ let content = this.getRichSelectionContent();
|
|
|
if (isNodeType(start, 'span')) {
|
|
|
let textContent = start.textContent;
|
|
|
let str = textContent.split(content);
|
|
|
@@ -1174,7 +1178,7 @@ export default {
|
|
|
let noteId = '';
|
|
|
let editor = tinymce.get(this.id);
|
|
|
let start = editor.selection.getStart();
|
|
|
- let content = this.getRichContent();
|
|
|
+ let content = this.getRichSelectionContent();
|
|
|
if (isNodeType(start, 'span')) {
|
|
|
noteId = start.getAttribute('data-annotation-id');
|
|
|
} else {
|
|
|
@@ -1194,7 +1198,7 @@ export default {
|
|
|
let start = editor.selection.getStart();
|
|
|
if (isNodeType(start, 'span')) {
|
|
|
let textContent = start.textContent;
|
|
|
- let content = this.getRichContent();
|
|
|
+ let content = this.getRichSelectionContent();
|
|
|
let str = textContent.split(content);
|
|
|
start.remove();
|
|
|
editor.selection.setContent(str.join(content));
|
|
|
@@ -1316,7 +1320,7 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.rich-text {
|
|
|
- :deep + .tox {
|
|
|
+ :deep+.tox {
|
|
|
.tox-sidebar-wrap {
|
|
|
border: 1px solid $fill-color;
|
|
|
border-radius: 4px;
|
|
|
@@ -1341,7 +1345,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
&.is-border {
|
|
|
- :deep + .tox.tox-tinymce {
|
|
|
+ :deep+.tox.tox-tinymce {
|
|
|
border: $border;
|
|
|
border-radius: 4px;
|
|
|
}
|