dap 2024-08-20 11:19:00 +08:00
parent 45b6e05abc
commit a2994b74a5
2 changed files with 13 additions and 17 deletions

View File

@ -57,10 +57,6 @@ const props = defineProps({
default: defaultToolbar, default: defaultToolbar,
type: String, type: String,
}, },
value: {
default: '',
type: String,
},
width: { width: {
default: 'auto', default: 'auto',
required: false, required: false,
@ -72,6 +68,9 @@ const emit = defineEmits(['change']);
type InitOptions = IPropTypes['init']; type InitOptions = IPropTypes['init'];
/**
* 外部使用 v-model 绑定值
*/
const modelValue = defineModel('modelValue', { default: '', type: String }); const modelValue = defineModel('modelValue', { default: '', type: String });
/** /**
* https://www.jianshu.com/p/59a9c3802443 * https://www.jianshu.com/p/59a9c3802443
@ -139,7 +138,6 @@ const langName = computed(() => {
const initOptions = computed((): InitOptions => { const initOptions = computed((): InitOptions => {
const { height, options, plugins, toolbar } = props; const { height, options, plugins, toolbar } = props;
console.log(height);
return { return {
auto_focus: true, auto_focus: true,
branding: false, // '使 TinyMCE ' branding: false, // '使 TinyMCE '
@ -290,16 +288,6 @@ function bindModelHandlers(editor: any) {
}, },
); );
watch(
() => props.value,
(val, prevVal) => {
setValue(editor, val, prevVal);
},
{
immediate: true,
},
);
editor.on(normalizedEvents || 'change keyup undo redo', () => { editor.on(normalizedEvents || 'change keyup undo redo', () => {
const content = editor.getContent({ format: attrs.outputFormat }); const content = editor.getContent({ format: attrs.outputFormat });
emit('change', content); emit('change', content);
@ -310,7 +298,15 @@ function bindModelHandlers(editor: any) {
}); });
} }
const disabled = computed(() => props.options.readonly ?? false); /**
* disabled
* 可使用:options="{readonly: true}"
* 或者:disabled="true"
*/
const disabled = computed(
() =>
(props.options.readonly ?? false) || ((attrs.disabled as boolean) ?? false),
);
function getUploadingImgName(name: string) { function getUploadingImgName(name: string) {
return `[uploading:${name}]`; return `[uploading:${name}]`;

View File

@ -16,7 +16,7 @@ const content = ref('');
<span>只读</span> <span>只读</span>
<a-switch v-model:checked="readonly" /> <a-switch v-model:checked="readonly" />
</div> </div>
<Tinymce v-model:value="content" :options="{ readonly }" /> <Tinymce v-model="content" :disabled="readonly" :height="800" />
</div> </div>
</Page> </Page>
</template> </template>