给运营开发了一个支持富文本编辑的动态网页发布系统，然后我每天都按时下班了！

大家好，我是一名全栈开发工程师，随着近期公司的机器人项目上线，pr部门一次性发过来中英法三国语言的百十篇word格式的动态新闻素材包（包括：文字，图片，视频，超链接），让我把每篇文章都务必更新到公司的两大官网和APP端（ios，andriod）上，这工作量一听是不是带把自己干到ICU了，要命的是，刚画完静态页面，然后负责法文网站翻译的同事说：不好意思，有个法语文章的一个法语单词用的不太优雅，能不能帮我改下？负责英文网站翻译的同事说：这段翻译，老板不喜欢，能不能帮我改一下？我说：当然可以，然后我的Mac键盘敲的啪啪响，CV键都快失灵了！

总结一下这种情况：从技术的角度上easy，but，会累死人！！！！不出意外的意外来了，刚发完上一波又来了一堆文章素材要发布，APP端：再给加几个页面关于用户协议说明和隐私政策。。。刚加完不久，合规说：有个地方要补充下。。。

作为全栈研发的我当然忍不了，于是，我自己花了三天时间，写了一个官网动态页面管理系统。

1.后端：先在mysql数据库建了一张表和python写了两个接口

1.1 建表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for c_official_web_info
-- ----------------------------
DROP TABLE IF EXISTS `c_official_web_info`;
CREATE TABLE `c_official_web_info` (
  `id` int NOT NULL AUTO_INCREMENT,
  `created_at` datetime DEFAULT NULL COMMENT '创建时间',
  `from_official` varchar(255) NOT NULL COMMENT '官网来源：'A网站/B网站',
  `title` text NOT NULL COMMENT '标题',
  `date` varchar(255) NOT NULL COMMENT '日期',
  `picture` varchar(255) NOT NULL COMMENT '封面图片',
  `content` text NOT NULL COMMENT '正文',
  `language` varchar(255) NOT NULL COMMENT '语言',
  `status` int NOT NULL DEFAULT '0' COMMENT '发布状态0:发布，1：删除',
  `updated_at` datetime DEFAULT NULL,
  `deleted_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=40 DEFAULT CHARSET=utf8mb3 COMMENT='官网动态页面管理数据表';

SET FOREIGN_KEY_CHECKS = 1;

1.2 插入数据，修改数据

接口是用python写的，甭管啥语言，最终都是CRUD那些事，问题不大！

import logging
import datetime
import re

from backend.schemas.official_news_schema import OfficialNewsDataSchema, OfficialNewsListSchema
from base_response.base_response import BaseResponse
from base_response import response_codes
from backend.providers.async_database import async_db
from const.official_const import ReleaseStatus
from models.offical_news_model import OfficialNewsInfo


class BackendOfficialNewsService(object):

    @classmethod
    async def official_news_data(cls, official_news_request: OfficialNewsDataSchema):
        if  int(official_news_request.type) == 2:
             # 更新新闻
            news_Info: OfficialNewsInfo = await async_db.get_or_none(
                OfficialNewsInfo.select().where(
                    OfficialNewsInfo.id == official_news_request.id,
                    OfficialNewsInfo.status == ReleaseStatus.release
                )
            )
            if news_Info:
                news_Info.from_official = official_news_request.from_official
                news_Info.title = official_news_request.title
                news_Info.language = official_news_request.language
                news_Info.date = official_news_request.date
                news_Info.picture = official_news_request.picture
                news_Info.content = official_news_request.content
                news_Info.status =  ReleaseStatus.release
                await async_db.update(news_Info)
                return BaseResponse.ok()
            else:
                return BaseResponse.error(data=response_codes.NEWS_CHECK_UPDATE_ERROR)
            
        elif int(official_news_request.type) == 1:
             # 添加新闻
            await async_db.create(
                OfficialNewsInfo, **dict(
                    from_official=official_news_request.from_official, title=official_news_request.title,
                    date=official_news_request.date, picture=official_news_request.picture, 
                    content = official_news_request.content, language= official_news_request.language,
                )
            )
            return BaseResponse.ok()
        elif int(official_news_request.type) == 0:
            # 删除新闻
            if not official_news_request.id:
                return BaseResponse.error(data=response_codes.NEWS_CHECK_ID_ERROR)
            else:
                news_Info: OfficialNewsInfo = await async_db.get_or_none(
                    OfficialNewsInfo.select().where(
                        OfficialNewsInfo.id == official_news_request.id,
                    )
                )
                if news_Info:
                    news_Info.status = ReleaseStatus.delete
                    await async_db.update(news_Info)
                    return BaseResponse.ok()
        else:
            return BaseResponse.error(data=response_codes.NEWS_CHECK_TYPE_ERROR)
        return BaseResponse.ok()

1.3 查表：

 @classmethod
    async def official_news_list(cls, official_news_request: OfficialNewsListSchema):
        condition = [OfficialNewsInfo.status == ReleaseStatus.release]
        if official_news_request.from_official:
            condition.append(OfficialNewsInfo.from_official.like(f"%{official_news_request.from_official}%"))
        if official_news_request.title:
            condition.append(OfficialNewsInfo.title.like(f"%{official_news_request.title}%"))
        if official_news_request.language:
            condition.append(OfficialNewsInfo.language == official_news_request.language)
        if official_news_request.id:
            condition.append(OfficialNewsInfo.id == official_news_request.id)
        base_query = OfficialNewsInfo.select().where(*condition).order_by(OfficialNewsInfo.id.desc())
        total = await async_db.count(base_query)
        query = await async_db.execute(base_query.paginate(official_news_request.current, official_news_request.size))
        data = [i.json_parse() for i in query]

        return BaseResponse.ok(data={
   "list": data, "total": total})
       

2. 前端vue框架开发富文本编辑页面，支持超链接，图片，视频

先看图，编辑页面，效果如下：

列表查看，页面效果如下：

是不是一目了然，方便快捷，写好后让运营们自己去发布吧，然们专心搞技术就行！

2.1 VUE3.2版本

贴一下前端富文本组件的封装组件@vueup/vue-quill，VUE3.2版本的setup写法如下：
子组件：MyQuillEditor

<template>
    <div>
        
        <QuillEditor ref="myQuillEditor" theme="snow" :content="content" :options="editorOption" contentType="html"
            @update:content="setValue" />
        <!-- 使用自定义图片上传 -->
        <el-upload class="avatar-uploader" action="" :limit="1" :http-request="fileChange"></el-upload>
        <div class="linkDialog">
            <el-input v-model="linkUrl.text" placeholder="请输入链接名称" style&#