vue-reverse/examples/components/common/editor/index.vue

<template>
  <div class="Editor">
    <vue-ueditor-wrap :config="config" v-model="html" />
    <Button class="Editor__preview" type="info" @click="preview">预览</Button>
  </div>
</template>

<script>
import VueUeditorWrap from './ueditor'

export default {
  props: ['content'],
  components: {
    VueUeditorWrap,
  },
  data () {
    return {
      html: '',
      config: {
        serverUrl: `${process.env.API_URL.default}config/ueupload`,
        toolbars: [[
          'fontsize',
          'paragraph',
          'lineheight',
          'forecolor',
          'backcolor',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'justifyleft',
          'justifyright',
          'justifycenter',
          'blockquote',
          'insertimage',
          'removeformat',
          'formatmatch',
          'source',
        ]],
        imageBlockLine: 'center',
        autoHeightEnabled: false,
        initialFrameWidth: 'auto',
        initialFrameHeight: 400,
      },
    }
  },
  watch: {
    content: {
      type: String,
      default: '',
      immediate: true,
      handler (v) {
        this.html = v
      },
    },
    html (html) {
      this.$emit('on-change', html)
    },
  },
  methods: {
    preview () {
      this.$Modal.info({
        title: '预览',
        scrollable: true,
        render: h => {
          return h('div', {
            style: {
              width: '375px',
              height: '500px',
              overflow: 'scroll',
            },
            domProps: {
              innerHTML: this.html,
            },
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.Editor__preview {
  margin-top: 10px;
}
</style>