quill 富文本编辑器 #

<template>
  <div class="app-container" style="padding-left: 10px; padding-right: 10px">
    <LdQuillEditor v-model="centent"></LdQuillEditor>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import LdQuillEditor from "@/components/QuillEditor";

export default defineComponent({
  components: {
    LdQuillEditor,
  },
  setup() {
    const centent = ref("");
    return { centent };
  },
});
</script>

<template>
  <div class="app-container">
    <LdForm ref="useFormRef" @register="registerForm"> </LdForm>
  </div>
</template>
<script>
import { defineComponent, h, ref } from "vue";
import { useForm } from "@/components/LdForm";
import LdQuillEditor from "@/components/QuillEditor";

const FormSchema = [
  {
    field: "title",
    component: "Input",
    label: "课程名称",
    defaultValue: "",
    colProps: {
      span: 8,
    },
    rules: [{ required: true, message: `课程名称不为空`, trigger: "blur" }],
  },
  {
    field: "desc",
    component: "Input",
    label: "课程描述",
    defaultValue: "课程描述",
    customRender: ({ model, field }) => {
      return h(LdQuillEditor, {
        value: model[field],
        disabled:false,
        onChange: ({ html, text, quillInstance }) => {
          model[field] = html;
        },
      });
    },
  },
];
export default defineComponent({
  setup() {
    const useFormRef = ref(null);
    const [registerForm, { resetFields, setProps, setFieldsValue }] = useForm({
      labelPosition: "right",
      labelWidth: "150px",
      schemas: FormSchema,
      showResetButton: false,
    });

    return {
      useFormRef,
      registerForm,
    };
  },
});
</script>