RichTextEdit.vue

<!--
 * System ReceiveBatch page
 * @author: Toplinker
 * @copyright: ©2009-2022 Toplinker, Inc. All rights reserved
-->
<script setup lang="ts">
import { ref } from 'vue';
import { useMessage } from 'src/common/hooks';
// interface IDetailProps {
//   type: string;
//   data: any;
// }
// const props = withDefaults(defineProps<IDetailProps>(), {
//   type: '',
//   data: {},
// });

const { info } = useMessage();

const editor = ref('What you see is <b>what</b> you get.');

function getView() {
  console.log('editor >>>>', editor.value);
}

function saveWork() {
  info('保存');
  console.log('保存 >>>>', editor.value);
}

function uploadIt() {
  info('上传文件');
}
</script>
<template>
  <div class="my-editor">
    <q-btn label="点我查看" @click="getView" />
    <q-card flat bordered>
      <q-card-section v-html="editor" />
    </q-card>
    <q-editor
      v-model="editor"
      :definitions="{
        save: {
          tip: '保存',
          icon: 'save',
          label: '保存',
          handler: saveWork
        },
        upload: {
          tip: '上传文件',
          icon: 'cloud_upload',
          label: '上传文件',
          handler: uploadIt
        }
      } as any"
      :toolbar="[
        ['bold', 'italic', 'strike', 'underline'],
        ['upload', 'save'],
      ]"
      min-height="20rem"
    />
  </div>
</template>

<style lang="scss" scoped>
.my-editor {
  border: 1px solid red;
}
</style>