Skip to content

Commit 966571b

Browse files
authored
fix(Tinymce): Read only status upload button can also be used (#718)
*修复富文本组件在只读状态下上传图片按钮也能点击的bug
1 parent aee6130 commit 966571b

File tree

2 files changed

+23
-3
lines changed

2 files changed

+23
-3
lines changed

src/components/Tinymce/src/Editor.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@done="handleDone"
77
v-if="showImageUpload"
88
v-show="editorRef"
9+
:disabled="disabled"
910
/>
1011
<textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea>
1112
</div>
@@ -170,6 +171,12 @@
170171
};
171172
});
172173
174+
const disabled = computed(() => {
175+
const { options } = props;
176+
const getdDisabled = options && Reflect.get(options, 'readonly');
177+
return getdDisabled ?? false;
178+
});
179+
173180
watch(
174181
() => attrs.disabled,
175182
() => {
@@ -301,6 +308,7 @@
301308
handleDone,
302309
editorRef,
303310
fullscreen,
311+
disabled,
304312
};
305313
},
306314
});

src/components/Tinymce/src/ImgUpload.vue

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88
:showUploadList="false"
99
accept=".jpg,.jpeg,.gif,.png,.webp"
1010
>
11-
<a-button type="primary">
11+
<a-button type="primary" v-bind="{ ...getButtonProps }">
1212
{{ t('component.upload.imgUpload') }}
1313
</a-button>
1414
</Upload>
1515
</div>
1616
</template>
1717
<script lang="ts">
18-
import { defineComponent } from 'vue';
18+
import { defineComponent, computed } from 'vue';
1919
2020
import { Upload } from 'ant-design-vue';
2121
import { useDesign } from '/@/hooks/web/useDesign';
@@ -29,15 +29,26 @@
2929
fullscreen: {
3030
type: Boolean,
3131
},
32+
disabled: {
33+
type: Boolean,
34+
default: false,
35+
},
3236
},
3337
emits: ['uploading', 'done', 'error'],
34-
setup(_, { emit }) {
38+
setup(props, { emit }) {
3539
let uploading = false;
3640
3741
const { uploadUrl } = useGlobSetting();
3842
const { t } = useI18n();
3943
const { prefixCls } = useDesign('tinymce-img-upload');
4044
45+
const getButtonProps = computed(() => {
46+
const { disabled } = props;
47+
return {
48+
disabled,
49+
};
50+
});
51+
4152
function handleChange(info: Recordable) {
4253
const file = info.file;
4354
const status = file?.status;
@@ -63,6 +74,7 @@
6374
handleChange,
6475
uploadUrl,
6576
t,
77+
getButtonProps,
6678
};
6779
},
6880
});

0 commit comments

Comments
 (0)