Browse Source
fix(Tinymce): Read only status upload button can also be used (#718)
*修复富文本组件在只读状态下上传图片按钮也能点击的bug
pull/724/head
liuzhidong
5 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with
23 additions and
3 deletions
-
src/components/Tinymce/src/Editor.vue
-
src/components/Tinymce/src/ImgUpload.vue
|
|
|
@ -6,6 +6,7 @@ |
|
|
|
@done="handleDone" |
|
|
|
v-if="showImageUpload" |
|
|
|
v-show="editorRef" |
|
|
|
:disabled="disabled" |
|
|
|
/> |
|
|
|
<textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea> |
|
|
|
</div> |
|
|
|
@ -170,6 +171,12 @@ |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
const disabled = computed(() => { |
|
|
|
const { options } = props; |
|
|
|
const getdDisabled = options && Reflect.get(options, 'readonly'); |
|
|
|
return getdDisabled ?? false; |
|
|
|
}); |
|
|
|
|
|
|
|
watch( |
|
|
|
() => attrs.disabled, |
|
|
|
() => { |
|
|
|
@ -301,6 +308,7 @@ |
|
|
|
handleDone, |
|
|
|
editorRef, |
|
|
|
fullscreen, |
|
|
|
disabled, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
@ -8,14 +8,14 @@ |
|
|
|
:showUploadList="false" |
|
|
|
accept=".jpg,.jpeg,.gif,.png,.webp" |
|
|
|
> |
|
|
|
<a-button type="primary"> |
|
|
|
<a-button type="primary" v-bind="{ ...getButtonProps }"> |
|
|
|
{{ t('component.upload.imgUpload') }} |
|
|
|
</a-button> |
|
|
|
</Upload> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
import { defineComponent } from 'vue'; |
|
|
|
import { defineComponent, computed } from 'vue'; |
|
|
|
|
|
|
|
import { Upload } from 'ant-design-vue'; |
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
@ -29,15 +29,26 @@ |
|
|
|
fullscreen: { |
|
|
|
type: Boolean, |
|
|
|
}, |
|
|
|
disabled: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
emits: ['uploading', 'done', 'error'], |
|
|
|
setup(_, { emit }) { |
|
|
|
setup(props, { emit }) { |
|
|
|
let uploading = false; |
|
|
|
|
|
|
|
const { uploadUrl } = useGlobSetting(); |
|
|
|
const { t } = useI18n(); |
|
|
|
const { prefixCls } = useDesign('tinymce-img-upload'); |
|
|
|
|
|
|
|
const getButtonProps = computed(() => { |
|
|
|
const { disabled } = props; |
|
|
|
return { |
|
|
|
disabled, |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
function handleChange(info: Recordable) { |
|
|
|
const file = info.file; |
|
|
|
const status = file?.status; |
|
|
|
@ -63,6 +74,7 @@ |
|
|
|
handleChange, |
|
|
|
uploadUrl, |
|
|
|
t, |
|
|
|
getButtonProps, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}); |
|
|
|
|