前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >新版富文本编辑器使用说明

新版富文本编辑器使用说明

作者头像
腾讯云开发者社区
修改于 2024-12-20 11:31:17
修改于 2024-12-20 11:31:17
1.7K2
举报
概述
腾讯云开发者社区推出了全新设计的富文本编辑器,旨在提升用户的在线内容创作体验,专注于提高交互效率、视觉美观性和性能稳定性。本文详细介绍了新版富文本编辑器的使用说明,涵盖了其设计理念、核心功能、界面介绍及常见问题解答

新版富文本编辑器开放体验啦!

需填写下方收集表信息,提交并审核通过后,我们会邀请您进入社区新版编辑器公测群并给您的社区账号开放体验权限,开放后可访问社区PC端,登录态下在编辑器发文界面右上角切换去体验新版编辑器。

收集表地址:新版富文本编辑器体验收集表

收集表二维码:

入口示例:

一、简介

作为技术内容互动型社区,腾讯云开发者社区致力于为每一位内容创作者提供更好用的在线Web编辑器。本次通过对社区富文本编辑器的全面改版,我们将编辑器的底层、UI进行重新设计,聚焦“交互更高效、视觉更美观、性能更稳定”3个方面进行新版编辑器的规划,以全面提升用户体验。本次改版的核心改动概况如下:

1.交互更高效:

文本编辑以“块”为最小单元,支持针对“块内容”进行整体功能操作。

支持多种方式(全局工具栏、浮动工具栏、快捷键等)唤起编辑功能,缩短文本编辑时的功能操作路径。

2.视觉更美观:

文本编辑时新增“视觉增强”的相关功能,包括字体和背景颜色设置、排版调整功能等。

针对文章发表后的展示样式进行全面优化,对字体字号、间距、代码等样式进行重新设计。

3.性能更稳定:

采用了新的内核以及局部渲染,提升了编辑器在大量文本编辑时的性能。

重新实现了文章渲染组件,渲染速度更快,更稳定。

二、编辑器界面介绍

(1)操作栏:位于界面顶部,可发布文章、加载草稿文章、切换旧版编辑器等。

(2)菜单栏:位于编辑区上方,包含插入、撤销、重做、文本、标题、对齐等菜单项。

(3)编辑区:位于界面中央,用于输入和编辑文本内容。

(4)目录:位于界面左侧,默认显示支持隐藏,点击标题编辑区可定位到标题处。

(5)使用说明:位于界面右侧,提供markdown基本语法和快捷键以及使用说明文档。

示例图:

三、基本操作

1、功能唤起方式:

1.菜单栏✚号唤起

2.空白块内输入/唤起

3.空白块左侧hover/点击唤起

4.有定义块类型的块左侧hover/点击唤起

5.滑动文本可唤起文本工具栏

2、功能介绍

1.标题

支持用户在文本中创建不同级别的标题,以便清晰地划分和组织内容。通过使用标题,用户可以轻松地构建文档的层次结构,使读者能够快速理解和导航文档内容。目前支持四个级别的标题选项,一级标题(H1)、二级标题(H2)、三级标题(H3)、四级标题(H4),基于标题可自动生成目录,滑动标题支持设置斜体、下划线、添加超链等;支持输入markdown语法或快捷键添加标题,具体可参考 四、快捷键。

示例:

2.文本

用户可以在此输入任意文本内容,并通过工具栏进行加粗、斜体、下划线、颜色、对齐方式等格式的调整。滑动文本可唤起文本工具栏。

示例:

3.分割线

用于在文本中插入一条视觉上的分隔线,以区分不同的内容段落,提升文本的可读性和美观性。支持输入markdown语法或快捷键添分割线,具体可参考 四、快捷键。

示例:

4.有序列表

可创建带有编号的列表项,每新增一个列表项,序号会自动递增,有三种显示样式。支持输入markdown语法或快捷键添加有序列表,具体可参考 四、快捷键。

示例:

5.无序列表

用户可以添加带有项目符号的列表项,有三种显示样式,便于组织和呈现信息。支持输入markdown语法或快捷键添加无序列表,具体可参考 四、快捷键。

示例:

6.图片

可以通过上传本地图片/复制平台支持的图片来插入图片。点击图片会在图片上方出现工具栏,提供图片大小调整、对齐、描述、配置链接等调整选项。

示例:

发布时可选择正文图或上传本地图片作为文章封面,图片支持拖拽、放大、缩小

7.代码块

用于展示和编辑计算机程序代码,选择相应的编程语言样式,实现代码的高亮显示,部分语言支持代码运行。支持输入markdown语法或快捷键添加代码块,具体可参考 四、快捷键。

示例:

8.引用

 支持用户在文本中插入引用内容,通常用于引用文献、数据或外部资源等,以增强文本的可信度和可读性。支持输入markdown语法或快捷键添加引用,具体可参考 四、快捷键。

示例:

9.视频

支持输入社区已发布视频链接来插入社区视频,增强多媒体交互性。

示例:

10.表格

用户可创建和编辑表格,用于整理和展示数据。支持设置背景色、插入行/列、单元格合并/拆分等。点击下图左上角蓝色部分小点可唤起表格工具栏,点击某行/列可唤起行/列工具栏,在单元格内三击可唤起单元格工具栏

示例:

11.附件

支持上传.pdf、.rar、.zip、.ppt、.pptx、.docx格式的文件,以丰富文档内容。文章发布后详情页点击可下载附件。

示例:

12.公式

新版富文本编辑器集成了 KaTeX 公式引擎,因此你可以插入各种科学计算公式。如需了解所有的 KateX 公式,请前往 KaTeX查看具体公式的写法。

示例:

注:由于兼容性问题,KaTeX中的部分公式可能在编辑中显示为无效公式。有关各个公式的支持情况,应以实际操作结果为准。

13.高亮块

支持直接插入不同颜色的高亮块,用于凸显重要信息。

示例:

四、快捷键

示例

markdown语法说明

快捷键

一级标题

#

windows:ctrl+alt+1

mac:cmd+option+1

二级标题

##

windows:ctrl+alt+2

mac:cmd+option+2

三级标题

###

windows:ctrl+alt+3

mac:cmd+option+3

四级标题

####

windows:ctrl+alt+4

mac:cmd+option+4

有序列表

数字+.

windows:ctrl+shift+7

mac:cmd+shift+7

无序列表

*、-、+

windows:ctrl+shift+8

mac:cmd+shift+8

代码块

```

windows:ctrl+alt+C

mac:cmd+option+C

粗体

** **或__ __

windows:ctrl+B

mac:cmd+B

斜体

* *或_ _

windows:ctrl+I

mac:cmd+I

引用

>

windows:ctrl+shift+B

mac:cmd+shift+B

行内代码

`xxx`

windows:ctrl+E

mac:cmd+E

分割线

***、---、___

windows:ctrl+alt+S

mac:cmd+option+S

保存公式

/

windows:ctrl+S

mac:cmd+S

保存草稿

/

windows:enter

mac:return

五、迭代记录

1、2025/01/10更新内容

(1)【修复】发文页面选择正文图片/本地上传图片后预览显示空白问题

(2)【新增】光标在代码块内全选时限定只选中代码块里内容

(3)【新增】输入/唤起的功能列表支持通过键盘方向键切换光标

(4)【新增】保存草稿新增快捷键

(5)【优化】使用说明的快捷键说明根据电脑操作系统进行区分显示

(6)【优化】本地上传图片时外显支持的格式,并限定只可选支持格式的图片

(7)【优化】编辑器底部行数去除

(8)【优化】使用说明弹框和工具栏处的文案修改。

2、2025/01/21更新内容

(1)【修复】目录展示样式和目录过多情况下展示不全问题

(2)【修复】详情页点击图片进行查看但与当前选择的图片显示不一致问题

(3)【修复】有添加描述的图片发布后被压缩和描述被遮挡问题

(4)【修复】引用中有添加有序/无序列表时,发布后详情页不显示问题

(5)【新增】目录生成后默认展开

(6)【新增】使用说明中增加保存草稿和保存公式快捷键说明

3、2025/02/13更新内容

(1)【修复】文章发布后草稿箱对应文章草稿未清除问题

(2)【修复】详情页点一级标题时全部一级标题会高亮问题

(3)【优化】跨平台代码复制粘贴到代码块内后格式错乱问题

4、2025/02/28更新内容

(1)【修复】二次编辑文章时,未修改任何内容会自动保存草稿问题

(2)【修复】添加公式后样式显示问题

(3)【优化】编辑器粘贴当前不支持内容时,增加提示优化

5、2025/03/14更新内容

(1)【修复】详情页文本加粗不显示问题

(2)【修复】编辑器目录文本显示重叠问题

(3)【新增】高亮块功能上线,支持设置块内文字/背景颜色

六、常见FAQ

问题1.社区Markdown编辑器是否有改版计划?

本次改版优先实现富文本编辑器的改版工作,Markdown编辑器有改版计划,将在富文本编辑器全量发布后正式启动。

问题2.社区编辑器后续是否会引入AI能力?

目前有在社区进行AI结合场景的探索,但当前重点聚焦在内容消费场景与AI的结合。内容创作场景与AI的结合有初步计划,具体落地方案和节奏,将基于新版编辑器全量后的用户反馈来进行规划。

问题3.如对社区新版编辑器体验不满意,可以返回使用旧版编辑器么?

可在新版编辑器-顶部操作栏处点击切回旧版编辑器去使用,具体切换路径可见二、编辑器界面介绍 下的示例图。另外,如对新版编辑器体验不满意,欢迎在切换确认弹框中告诉我们您的感受,以便我们进行优化以提升您的体验!

问题4.为什么社区新版编辑器不能编辑旧版的内容?

新旧版本编辑器采用了不同的编辑器内核,包括规划了不同的功能,暂不支持在新版编辑器里针对旧版编辑器内容(包括草稿)进行编辑。不过,面向社区存量的来自旧版编辑器的文章,我们将在新版编辑器全量后,到旧版编辑器下线前,完成旧版编辑器文章面向新版编辑器的兼容和迁移工作,完成后您将可以基于新版编辑器编辑您的全部社区文章。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
2 条评论
热度
最新
回复回复点赞举报
希望新版编辑器越来越好
希望新版编辑器越来越好
回复回复点赞举报
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档