1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| import { h } from "snabbdom";
| // 停顿时间
| function renderTitleBlack(elem, children, editor) {
| const text = elem.children[0].text || "";
| const vnode = h(
| "span",
| {
| style: {
| margin: "3px",
| color: "#ffffff",
| background: "#7d78e7",
| padding: "6px 10px",
| cursor: "pointer",
| fontSize: "12px",
| },
| },
| [text]
| );
|
| return vnode;
| }
|
| export const renderElemConf = {
| type: "title-black",
| renderElem: renderTitleBlack,
| };
| //数字
| function renderNumberValue(elem, children, editor) {
| const text = elem.children[0].text || "";
| const {numberVal = ''} = elem
| // 附件 icon 图标 vnode
| const iconVnode = h("img", {
| props: {
| src: "https://chat.tydiczt.com/tdh-portal/assets/close-fill-72619c56.svg",
| }, // HTML 属性，驼峰式写法
| style: {
| width: "15px",
| height: "15px",
| minHeight: "10px",
| minWidth: "10px",
| marginLeft: "1px",
| cursor: "pointer",
| fontSize: "12px",
| verticalAlign: "sub",
| }, // HTML style ，驼峰式写法
| on: {
| click() {
| editor.deleteBackward()
| editor.insertText(numberVal)
| },
| },
| });
| const buttonNode = h(
| "span",
| {
| style: {
| display: "inline-block",
| marginLeft: "3px",
| color: "#ffffff",
| background: "orange",
| padding: "3px",
| cursor: "pointer",
| fontSize: "12px",
| },
| },
| [text, iconVnode]
| );
| const leftNode = h(
| "span",
| {
| style: {
| display: "inline-block",
| color: "orange",
| },
| },
| ["「"]
| );
| const rightNode = h(
| "span",
| {
| style: {
| display: "inline-block",
| color: "orange",
| },
| },
| ["」"]
| );
| const vNode = h(
| "span",
| {
| style: {
| display: "inline-block",
| },
| },
| [buttonNode, leftNode, numberVal, rightNode]
| );
| return vNode;
| }
|
| export const renderNumberElemConf = {
| type: "number-value",
| renderElem: renderNumberValue,
| };
|
| // 多音字
| function renderTextPinyinValue(elem, children, editor) {
| const text = elem.children[0].text || "";
| const {textVal = ''} = elem
| const textNode = `${textVal}[=${text}]`
| const vNode = h(
| "span",
| {
| style: {
| display: "inline-block",
| marginLeft: "3px",
| color: "orange",
| padding: "3px",
| cursor: "pointer",
| },
| },
| [textNode]
| );
| return vNode;
| }
|
| export const renderTextPinyinElemConf = {
| type: "text-value",
| renderElem: renderTextPinyinValue,
| };
|
|
