富文本编辑器

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

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

使用：wangEditor 插件

步骤：参考文档

1.引入 CSS 定义样式

2.定义 HTML 结构

3.引入 JS 创建编辑器

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

实现代码：

 <div>
<!--                TODO--><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>

在这里插入图片描述

使用link链接js。

// 富文本编辑器
// 创建编辑器函数，创建工具栏函数
const { createEditor, createToolbar } = window.wangEditor
//编辑器配置对象
const editorConfig = {//占位提示文字placeholder: 'Type here...',//编辑器变化时的回调函数onChange(editor) {//获取富文本的内容const html = editor.getHtml()console.log('editor content', html)// 也可以同步到 <textarea>// 为了后续快速收集整个表单做铺垫document.querySelector('.publish-content').value= html}
}const editor = createEditor({// 创建位置selector: '#editor-container',//默认内容html: '<p><br></p>',//配置项config: editorConfig,//默认模式，附带所有功能，还有简洁模式，只含有部分功能mode: 'default', // or 'simple'
})
//工具栏配置对象
const toolbarConfig = {}
//创建工具栏
const toolbar = createToolbar({//为指定的编辑器创建工具栏editor,//工具栏创建的位置selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'
})