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
| <template>
| <div class="p-4">
| <div class="p-4 bg-white">
| <a-button-group class="j-table-operator">
| <a-button type="primary" @click="setDis(0)">启用</a-button>
| <a-button type="primary" @click="setDis(1)">禁用</a-button>
| <a-button type="primary" @click="getValues()">校验表单并获取值</a-button>
| <a-button type="primary" @click="setValues()">设置值</a-button>
| </a-button-group>
|
| <BasicForm @register="register" @submit="handleSubmit" />
| </div>
| </div>
| </template>
|
| <script lang="ts">
| export default {
| title: '富文本 | Markdown',
| name: 'MarkdownDemo',
| };
| </script>
|
| <script lang="ts" setup>
| import { FormSchema, useForm, BasicForm } from '/@/components/Form';
| import { useMessage } from '/@/hooks/web/useMessage';
|
| const { createMessage, createSuccessModal } = useMessage();
|
| const schemas: FormSchema[] = [
| {
| field: 'name',
| component: 'Input',
| label: '姓名',
| required: true,
| defaultValue: 'zhangsan',
| },
| {
| field: 'tinymce',
| component: 'JEditor',
| label: '富文本',
| defaultValue: 'defaultValue',
| required: true,
| },
| {
| field: 'markdown',
| component: 'JMarkdownEditor',
| label: 'Markdown',
| defaultValue: '# 张三',
| required: true,
| componentProps: {
| height: 300,
| },
| },
| ];
|
| const [register, { setProps, validate, setFieldsValue }] = useForm({
| labelWidth: 120,
| schemas: schemas,
| actionColOptions: {
| span: 24,
| },
| compact: true,
| showResetButton: false,
| showSubmitButton: false,
| showAdvancedButton: false,
| disabled: false,
| });
|
| function handleSubmit(values) {
| console.log(values);
| }
|
| function setDis(flag) {
| setProps({ disabled: !!flag });
| }
|
| async function getValues() {
| try {
| const values = await validate();
| console.log(values);
| createSuccessModal({
| title: '校验通过',
| content: `${JSON.stringify(values)}`,
| });
| } catch (error) {
| createMessage.warning('检验不通过');
| }
| }
|
| function setValues() {
| setFieldsValue({
| name: 'LiSi',
| markdown: '# 李四',
| tinymce: '<p><strong><span style="font-size: 18pt;">张<span style="color: #e03e2d;">三</span>丰</span></strong></p>',
| });
| }
| </script>
|
| <style scoped></style>
|
|
