vite+drf實現富文本資料輸入

在使用 Vite 和 Django REST Framework (DRF) 构建的应用中，实现富文本内容的输入与提交，通常需要从前端和后端两个层面进行配置。以下是一个完整的实现方案。 ### 前端部分（Vite + Vue 3） 在前端，可以使用富文本编辑器组件来实现富文本输入功能。常见的 Vue 富文本编辑器包括 `Quill`、`TinyMCE` 或 `Vue-Draft` 等。这里以 `Quill` 为例，展示如何集成到基于 Vite 的 Vue 项目中。 1. **安装 Quill 编辑器** ```bash npm install quill ``` 2. **创建富文本组件** 在 `src/components/` 目录下创建一个名为 `RichTextEditor.vue` 的组件： ```vue <script setup> import { onMounted, ref } from 'vue' import Quill from 'quill' import 'quill/dist/quill.snow.css' const props = defineProps({ modelValue: { type: String, default: '' } }) const emit = defineEmits(['update:modelValue']) const editor = ref(null) onMounted(() => { const quill = new Quill(editor.value, { theme: 'snow', modules: { toolbar: [ ['bold', 'italic', 'underline'], [{ list: 'ordered' }, { list: 'bullet' }], ['link'] ] }, placeholder: '请输入内容...' }) quill.on('text-change', () => { emit('update:modelValue', quill.root.innerHTML) }) }) </script> <template> <div ref="editor" class="editor"></div> </template> ``` 3. **在页面中使用该组件** 在某个页面中引入并绑定富文本内容： ```vue <script setup> import RichTextEditor from '../components/RichTextEditor.vue' import { ref } from 'vue' import axios from 'axios' const content = ref('') const submitContent = async () => { try { await axios.post('http://localhost:8000/api/content/', { content: content.value }) alert('提交成功') } catch (error) { console.error('提交失败:', error) } } </script> <template> <h2>富文本输入</h2> <rich-text-editor v-model="content" /> <button @click="submitContent">提交</button> </template> ``` ### 后端部分（Django REST Framework） 在后端，需要创建一个 DRF API 来接收富文本内容，并将其存储到数据库中。 1. **定义模型** 在 `models.py` 中创建一个用于存储富文本内容的模型： ```python from django.db import models class RichTextContent(models.Model): content = models.TextField() created_at = models.DateTimeField(auto_now_add=True) def __str__(self): return f"Content {self.id}" ``` 2. **生成迁移文件并应用** ```bash python manage.py makemigrations python manage.py migrate ``` 3. **创建序列化器** 在 `serializers.py` 中添加： ```python from rest_framework import serializers from .models import RichTextContent class RichTextContentSerializer(serializers.ModelSerializer): class Meta: model = RichTextContent fields = ['id', 'content', 'created_at'] ``` 4. **创建视图** 在 `views.py` 中添加： ```python from rest_framework import viewsets from .models import RichTextContent from .serializers import RichTextContentSerializer class RichTextContentViewSet(viewsets.ModelViewSet): queryset = RichTextContent.objects.all() serializer_class = RichTextContentSerializer ``` 5. **配置 URL 路由** 在 `urls.py` 中添加路由： ```python from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import RichTextContentViewSet router = DefaultRouter() router.register(r'content', RichTextContentViewSet) urlpatterns = [ path('api/', include(router.urls)), ] ``` 6. **跨域请求处理** 如果前端和后端运行在不同的端口上，需要安装并配置 `django-cors-headers`： ```bash pip install django-cors-headers ``` 在 `settings.py` 中添加： ```python INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] CORS_ALLOW_ALL_ORIGINS = True ``` 通过以上步骤，即可实现在 Vite 前端中使用富文本编辑器，并将内容提交至 Django REST Framework 提供的 API 接口[^3]。 ---