vue-editify 0.1.40 → 0.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/examples/App.vue CHANGED
@@ -1,12 +1,14 @@
1
1
  <template>
2
2
  <div style="padding: 10px; height: 100%; box-sizing: border-box">
3
- <Editify ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." locale="zh_CN" allow-paste-html :plugins="plugins"></Editify>
3
+ <Editify ref="editify" border v-model="val" :menu="menuConfig" style="height: 100%" placeholder="Please Enter Text..." :toolbar="toolbarConfig" locale="zh_CN" allow-paste-html :plugins="plugins"></Editify>
4
4
  </div>
5
5
  </template>
6
6
  <script setup lang="ts">
7
7
  import { h, ref } from 'vue'
8
- import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula } from '../src/index'
9
- const val = ref<string>('<p><br></p>')
8
+ import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula, ToolbarConfigType } from '../src/index'
9
+ const val = ref<string>(
10
+ '<p><span>这是一个</span><a href="#" data-editify-element="41"><span>链接</span></a><span>文本这是一</span><span style="font-weight: bold;">个链接</span><span>文本</span></p><p><img src="https://www.ling0523.cn/images/image_0_1701871044625.jpg" data-editify-element="47"></p><p><span></span><video src="https://video.699pic.com/videos/92/12/46/b_zEMHgCfQS5fV1714921246.mp4" data-editify-element="50"></video><span></span></p><pre data-editify-element="52"><span class="editify-hljs-keyword">import</span><span> </span><span class="editify-hljs-title class_">AlexEditor</span><span> </span><span class="editify-hljs-keyword">from</span><span> </span><span class="editify-hljs-string">"alex-editor"</span></pre><table data-editify-element="60" style="white-space: pre-wrap; word-break: break-word;"><colgroup><col width="50%"><col width="auto"><col width="auto"><col width="auto"><col width="auto"><col width="auto"></colgroup><tbody><tr><th rowspan="4">1</th><th>2</th><th rowspan="3">3</th><th>4</th><th>5</th><th>6</th></tr><tr><td rowspan="3"><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td colspan="2"><br></td></tr></tbody></table>'
11
+ )
10
12
 
11
13
  const editify = ref<InstanceType<typeof Editify> | null>(null)
12
14
  const menuConfig = ref<MenuConfigType>({
@@ -22,12 +24,15 @@ const menuConfig = ref<MenuConfigType>({
22
24
  show: true
23
25
  }
24
26
  })
27
+ const toolbarConfig = ref<ToolbarConfigType>({
28
+ use: true
29
+ })
25
30
 
26
31
  const plugins = ref<PluginType[]>([
27
- attachment(),
28
- mathformula({
32
+ attachment({
29
33
  leftBorder: true
30
- })
34
+ }),
35
+ mathformula()
31
36
  ])
32
37
  </script>
33
38
  <style lang="less">
@@ -1,21 +1,33 @@
1
1
  import { AlexElement, AlexElementsRangeType, AlexEditor } from 'alex-editor';
2
2
  import { ObjectType } from './tool';
3
3
 
4
+ export type ElementMatchConfig = {
5
+ parsedom?: string;
6
+ marks?: ObjectType;
7
+ styles?: ObjectType;
8
+ };
4
9
  /**
5
- * 判断元素是否在某个标签下,如果是返回该标签对应的元素,否则返回null
10
+ * 判断元素是否符合指定的条件
6
11
  * @param element
7
- * @param parsedom
12
+ * @param config
13
+ * @returns
14
+ */
15
+ export declare const elementIsMatch: (element: AlexElement, config: ElementMatchConfig) => boolean;
16
+ /**
17
+ * 判断元素是否在符合条件的元素下,如果是返回符合条件的元素,否则返回null
18
+ * @param element
19
+ * @param config
8
20
  * @returns
9
21
  */
10
- export declare const getParsedomElementByElement: (element: AlexElement, parsedom: string) => AlexElement | null;
22
+ export declare const getMatchElementByElement: (element: AlexElement, config: ElementMatchConfig) => AlexElement | null;
11
23
  /**
12
- * 获取光标是否在指定标签下,如果是返回该标签对应的元素,否则返回null
24
+ * 判断光标范围内的元素是否在符合条件的元素下,如果是所有的返回符合条件的元素,否则返回[]
13
25
  * @param editor
14
26
  * @param dataRangeCaches
15
- * @param parsedom
27
+ * @param config
16
28
  * @returns
17
29
  */
18
- export declare const getCurrentParsedomElement: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, parsedom: string) => AlexElement | null;
30
+ export declare const getMatchElementsByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfig) => AlexElement[];
19
31
  /**
20
32
  * 判断元素是否在有序列表或者无序列表下
21
33
  * @param element
@@ -214,12 +214,6 @@ export declare const queryHasValue: (obj: ObjectType, name: string, value?: stri
214
214
  * @returns
215
215
  */
216
216
  export declare const cloneData: (data: any) => any;
217
- /**
218
- * 根据行元素获取colgroup的col数量
219
- * @param row
220
- * @returns
221
- */
222
- export declare const getColNumbers: (row: AlexElement) => number;
223
217
  /**
224
218
  * 获取菜单按钮列表数据配置
225
219
  * @param editTrans