博客

1、如何设置禁用属性

使用 editorRef.value.disable()函数设置禁用

2、如何做国际化

监听language语言，调用i18nChangeLanguage函数

<template>
  <div v-if="isShowEditor" class="editor-wrap">
    <Toolbar
      class="toolbar"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
    />
    <Editor
      ref="editor"
      id="editor"
      class="editor"
      v-model="editorvalue"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
    />
  </div>
</template>
<script setup>
import {
  onBeforeUnmount,
  ref,
  watch,
  shallowRef,
  defineProps,
  defineEmits,
  nextTick
} from 'vue'
import { useI18n } from 'vue-i18n'
import store from '@/store'

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nChangeLanguage } from '@wangeditor/editor'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
const editorvalue = ref('')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const i18n = useI18n()

const toolbarConfig = {}
const editorConfig = { placeholder: i18n.t('profile.content-v') }
const isShowEditor = ref(true)

watch(
  () => props.modelValue,
  (value) => {
    editorvalue.value = value
  }
)

watch(editorvalue, (value) => {
  emit('update:modelValue', value)
})
watch(
  () => store.getters.language,
  () => {
    isShowEditor.value = false
    nextTick(() => {
      isShowEditor.value = true
      i18nChangeLanguage(store.getters.language === 'zh' ? 'zh-CN' : 'en')
    })
  },
  {
    immediate: true
  }
)

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录editor实例
  if (props.disabled) {
    editorRef.value.disable()
  }
}
</script>
<style scoped lang="scss">
.editor-wrap {
  border: 1px solid #ccc;
  .toolbar {
    border-bottom: 1px solid #ccc;
  }
  .editor {
    height: 500px !important;
    overflow-y: hidden;
  }
}
</style>