要在 Element Plus 中创建一个支持富文本编辑的文章内容输入框，可以使用第三方富文本编辑器库，比如 Quill、TinyMCE 或 CKEditor。这些编辑器提供了丰富的文本编辑功能，可以轻松集成到 Vue 项目中。

下面是一个使用 Quill 作为富文本编辑器的示例，展示如何将其集成到 Element Plus 的表单中。

安装 Quill

首先，安装 Quill 和其 Vue 包装器：

npm install quill @vueup/vue-quill

创建支持富文本的文章表单

下面是一个示例代码，展示如何在 Element Plus 表单中使用 Quill 编辑器：

<template>
  <div>
    <h2>新增文章</h2>
    <el-form :model="article" :rules="rules" ref="articleForm" label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="article.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item label="作者" prop="author">
        <el-input v-model="article.author" placeholder="请输入作者姓名"></el-input>
      </el-form-item>

      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="article.date" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <QuillEditor
          v-model:content="article.content"
          contentType="html"
          placeholder="请输入文章内容"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

export default {
  components: {
    QuillEditor,
  },
  setup() {
    const article = ref({
      title: '',
      author: '',
      date: '',
      content: '',
    })

    const rules = ref({
      title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
      author: [{ required: true, message: '请输入作者姓名', trigger: 'blur' }],
      date: [{ required: true, message: '请选择日期', trigger: 'change' }],
      content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
    })

    const articleForm = ref(null)

    const submitForm = () => {
      articleForm.value.validate((valid) => {
        if (valid) {
          console.log('提交的文章:', article.value)
          // 这里可以添加提交逻辑，例如调用API
          alert('提交成功!')
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    }

    const resetForm = () => {
      articleForm.value.resetFields()
    }

    return {
      article,
      rules,
      articleForm,
      submitForm,
      resetForm,
    }
  }
}
</script>

<style>
/* 可以在这里添加自定义样式 */
</style>

代码说明

• **QuillEditor**：使用 @vueup/vue-quill 提供的组件，用于创建富文本编辑器。
• v-model:content="article.content"：双向绑定富文本内容。
• contentType="html"：指定内容类型为 HTML，便于处理富文本格式。
• 样式引入：通过 import '@vueup/vue-quill/dist/vue-quill.snow.css' 引入 Quill 的默认样式。

扩展功能

• 自定义工具栏：可以通过 toolbar 属性自定义 Quill 编辑器的工具栏，添加或删除按钮。
• 图片上传：可以集成图片上传功能，通过 Quill 的 imageHandler 配置项实现。
• 主题和样式：可以根据需要更改 Quill 的主题和样式，以满足设计需求。

通过这种方式，你可以轻松地在 Element Plus 中集成富文本编辑器，提供用户友好的内容输入体验。