duration～
duration～

富文本编辑器

富文本：带样式，多格式的文本，在前端一般使用标签配合内联样式实现

富文本编辑器（Rich Text Editor，简称 RTE）是一种用户可以使用来创建格式化的文本内容的界面组件。它通常可以嵌入到网页或应用程序中，允许用户以类似于处理字处理软件，如 Microsoft Word 或 Google Docs，的方式编辑和排版文本。富文本编辑器中的文本可以包括不同的字体、字号、颜色以及可以插入图像、链接、表格和其他媒体类型。
本次主要使用 wangEditor 这款富文本编辑器。
富文本编辑器_第1张图片
目标：发布文章页，富文本编辑器的集成

使用：wangEditor 插件

步骤：参考文档

1.引入 CSS 定义样式

2.定义 HTML 结构

3.引入 JS 创建编辑器

4.监听内容改变，保存在隐藏文本域（便于后期收集）

实现代码：

 <div>

    <label for="">内容：label>
    
    <div id="editor—wrapper">
    <div id="toolbar-container">div>
    <div id="editor-container">div>
    div>
    
    <textarea name="content" class="publish-content" hidden>textarea>
div>

富文本编辑器_第2张图片

使用link链接js。

// 富文本编辑器
// 创建编辑器函数，创建工具栏函数
const { createEditor, createToolbar } = window.wangEditor
//编辑器配置对象
const editorConfig = {
    //占位提示文字
    placeholder: 'Type here...',
    //编辑器变化时的回调函数
    onChange(editor) {
        //获取富文本的内容
        const html = editor.getHtml()
        console.log('editor content', html)
        // 也可以同步到