CSDN 富文本编辑器的优化建议(1)

news2025/1/10 23:55:42

CSDN 富文本编辑器的优化建议(1)

 📚 写在前面:大家好~ 我是柠檬叶子C,今天是我在 C 站 1000 天创作纪念日!在这些日子里,我累计发布了 230 篇博客,这些博客无一例外都是用 C 站的 "富文本编辑器" 创作的。

我用 C 站富文本编辑器快三年了,作为 "用户" 角度,我一直想给 "富文本编辑器" 提供些许意见。就在几天前,我和邹老师谈论了富文本编辑器的话题,邹老师建议我写几篇针对 C 站富文本编辑器优化建议的博客,我作为富文本编辑器的忠实爱好者,深感荣幸!由于我的想法较多,我打算出一个 "系列",针对 C 站目前版本的富文本编辑器提供一些有体系的、有建设性的建议。这是本系列的第一篇文章,我将谈谈我为什么喜欢用富文本编辑器,以及能否让 富文本编辑器也支持 "内联代码片" 功能,字体功能的提议。 这些优化意见仅个人以 "用户" 角度提出的看法,需求不合理之处还请见谅,希望能向官方提供出一些富有建设性的参考意见。

你喜欢 C 站哪种编辑器?欢迎文末投票!


❓ 首先:我为什么喜欢用富文本编辑器?

在 C 站用 Markdown 编辑器的用户,应该比用富文本编辑器的用户多得多 ~

所以,不少点进来的朋友可能会有这样的疑问 —— Markdown 编辑器不香吗?用什么富文本?

我的朋友知道我博客居然都是用富文本写的,都感到十分惊讶:

首先,不得不承认 Markdown 编辑器确实好!因为有语法,所以非常的精妙准确,更加专业!

但是我选择富文本编辑器的原因,只是因为喜欢那种 "所见即所得" 的感觉…… 

" 所 见 即 所 得 "

这五个字是对富文本编辑器的描述,是我当年在 C 站 "创作中心" 选默认编辑器的页面时看到的。

我极度追求文章的排版,为了能让读者有更好地阅读体验,我对博客排版的优化做了不少努力。

得益于富文本编辑器的 "所见即所得" 的特性,在写文章时,我能够及时地控制文章的排版。

我甚至会控制文章每一行的行数,尽量不去出现 "折行",我希望能像读 "诗歌" 一样读博客。

如果你现在用的是 APP 阅读,感兴趣的朋友可以在网页端读一读我的 Linux专栏,感受 "排版" 。

💭 这里贴上一张截图:

正因如此,有不少朋友说我的博客读起来很舒服(当然我不能保证所有人都喜欢这种排版风格)

至少我是非常喜欢的!我读我自己博客的时候会很舒服,我没事就会读自己写的博客。

所以为了能在写博客的时候,能够 及时地 感受到这种 "感觉",我能及时控制排版,

我选择富文本编辑器,因为这种 "所见即所得" !


意见一:让富文本编辑器也支持 "内联代码片" 功能?

 我是柠檬叶子C,我很酸!我很羡慕 MD 编辑器的  `内联代码片` 功能!

C 站文章中,以浅红色为背景,Console 字体(似乎)的红字 就是 内联代码片,如下所示:

 在文章中是这样的,这很常见:(截自我的好朋友 —— 盼小辉丶的文章)

这是 MD 编辑器的 内联代码片 功能,这是富文本编辑器无法享有的……

这个 "内联代码片" 想必大家都用过,在 MD 中只需要 ` ` 就可以了:

但是富文本编辑器没有!这也一度让我想放弃使用富文本编辑器,转而使用 MD 编辑器。

" 我们富文本编辑器也很想拥有漂亮的内联代码片! "

没有其实很正常,但是有没有办法能让 富文本编辑器 也能拥有 "内联代码片" 功能呢?

如果经常读我文章的朋友应该能发现,似乎我的文章里好像也出现了这种 "内联代码片" :

实际上,这是我在富文本编辑器里,费了老大劲,手动 "做" 出来的:

选中一段文字,通过改颜色和背景,能达到差不多的效果:

cur=cur->_right

但是字体好像还差点意思,MD 编辑器的 "内联代码块" 似乎不是这种字体,是这样的:

我们只需要从其它网页复制一下这种字体就可以了,其实 C 站富文本编辑器是支持其他字体的。

(这也是我想提的意见之一,既然支持其他字体,为什么不能有一个 "字体" 栏供大家选择呢)

我们只需要从其他地方复制这种字体,然后粘贴到编辑器,再删除前面的内容,

此时再输入,就能打出这种字体了,就像这样:

cur=cur->_right

这个字体就不同于默认的字体!应该是 Console 字体。

然后我们在给它颜色改为 红色 (FE2C24),背景改为 浅红 (FEF2F0) :

cur_cur->right

这样就有差不多的效果了!(这里我甚至都给上色号了,方便官方技术人员看)

我们来做个对比,为了也能拥有好看的 "内联代码块" 我真的是尽力了:

为了方便在文章中能够使用,我在文章模板里都存了这些字体,放在文章开头便于我取用:

需要用的时候,就直接复制, 然后粘贴(粘贴前记得多个空格在后面,要留好默认字体,

否则之后一直都会保持该字体形式),这一段区域(- 后空格前)就能打出这种字体了,

最后再把 - 删掉即可:

-

-fopen()

fopen()

fopen()

这是我用了三年 C 站富文本编辑器,第三年才发现的方法,作为一个用户,我真的尽力了……

但是有时候,重新编辑文章,这种字体可能会直接失效!所以我一般发布前再按照这种方法手动字

体,但是如果文章有错误不得不修改文章,那字体可能就挂了,只剩颜色和背景了:

fopen()

其实我这种方式属于是 "投机取巧" 地利用了一些特性搞出来的…… 真的挺不容易!

C 站策划可否想办法在富文本编辑器中加入 内联代码块 功能?这里有我的一些可能可行的想法:

 运用一些特殊符号(哪怕在编辑状态下看不到效果),保存草稿生成文章后,能够编译生成 MD 编辑器形式的内联代码块?

如果这样做不到,那能不能出一个 GUI 界面?放在编辑器的 工具栏 中:

用户只需要点击,可以弹出一个 GUI 窗口,就像点击 链接 按钮后,出现的这样的窗口:

就像这样:

  

(……这是我 直接 F11 修改审查元素,纯属自娱自乐,幻想出来的效果,哈哈哈哈哈)

意见二:富文本编辑器能否加入字体功能?

既然是富文本编辑器,并且目前的富文本编辑器,本身就支持其他字体。

只需要从其他网站拷贝,然后粘贴即可,效果如下:

scipy.spatial.Delaunay 

1234567890 ¥!@#¥¥%……&*()$$

Crazy Thursday! V me 50 i wanna eat KFC!

for i in range(10,20) !@#$%%^&*()_+¥

1234567890

...

既然支持,那能否加一个 "字体" 功能放到工具栏中呢?就像这样:


好了,就说到这里!

下一篇我将对 "公式" 功能展开详细探讨!前段时间富文本编辑器的公式编辑器功能出 BUG 了。

现在遗留了挺多问题的,我会针对 富文本编辑器公式编辑器的 现存问题进行探讨……

📌 [ 笔者 ]   王亦优
📃 [ 更新 ]   2023.6.1
❌ [ 勘误 ]   /* 暂无 */
📜 [ 声明 ]   由于作者水平有限,本文有错误和不准确之处在所难免,
              本人也很想知道这些错误,恳望读者批评指正!

📜 参考资料:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/596255.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深眸科技创新视觉应用,AI+机器视觉为智能制造升级提供新视野

随着智能制造的进程不断加快,各大工业领域正在积极进行数字化转型,加速从制造到“智”造的转变。在全球制造业转型升级的浪潮下,从机器互联互通到人机协作再到无人工厂,机器视觉技术起到了重要作用。机器视觉用机器代替人眼&#…

easyui列表数据核对检查数据展示

1.easyui窗口内放置table列表 <div id"window_Id" class"easyui-window" title"异常参数列表展示" style"width:602px;height:493px;"data-options"closed:true,maximizable:false,resizable:true,minimizable:false,shadow:…

031:Mapbox GL实现地图导航功能,可选择起始点、路线、通行方式

第031个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中实现地图导航功能,可选择起始点、路线、通行方式。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共71行)安装插件相关API参考:专栏目标示例效果…

《Java并发编程实战》课程笔记(七)

Java 线程 Java 线程的生命周期 通用的线程生命周期 通用的线程生命周期基本上可以用下图这个“五态模型”来描述。这五态分别是&#xff1a;初始状态、可运行状态、运行状态、休眠状态和终止状态。 Java 中线程的生命周期 Java 语言中线程共有六种状态&#xff0c;分别是…

Pytorch入门(三)深度学习模型的训练的基本步骤

文章目录 一、修改现有的网络模型二、模型的保存三、模型的加载四、模型的评估五、训练模型的完整套路六、使用GPU加速模型的训练七、模型训练完整的验证套路 一、修改现有的网络模型 import torchvision from torch import nn # pretrained 为True时会自动下载模型所对应的权…

ES6-ES13学习笔记(4.0)

includes函数 判断字符串是否存在指定字符 <!--* Author: RealRoad1083425287qq.com* Date: 2023-06-01 08:40:33* LastEditors: Mei* LastEditTime: 2023-06-01 08:58:54* FilePath: \vscode\ECMA\05\01.html* Description: * * Copyright (c) 2023 by ${git_name_ema…

Docker+Jenkins+Gitee自动化部署maven项目

1.简介 各位看官老爷&#xff0c;本文为Jenkins实战&#xff0c;注重实际过程&#xff0c;阅读完会有以下收获&#xff1a; 了解如何使用Docker安装Jenkins了解如何使用Jenkins部署maven项目了解如何使用JenkinsGitee实现自动化部署 2.Jenkins介绍 相信&#xff0c;正在读这…

美国频频对中国芯片出手,却没想到最先倒下的是美芯巨头

据报道指出全球知名的硬盘厂商西部数据已基本敲定与日本存储芯片巨头铠侠的合并计划&#xff0c;不过让人意外的是最终主导者将是铠侠而不是西部数据&#xff0c;这意味着西部数据将从此消失于历史之中。 西部数据是全球最大的硬盘厂商&#xff0c;它先后收购了知名硬盘厂商希捷…

【实用篇】Docker

文章目录 Docker实用篇1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结 1.4.安装Docker1.…

springboot+vue高校班级管理系统 java 同学录校友录网站

本海滨学院班级回忆录管理员功能有个人中心&#xff0c;用户信息管理&#xff0c;班委信息管理&#xff0c;班级信息管理&#xff0c;加入班级管理&#xff0c;新闻信息管理&#xff0c;班级相册管理&#xff0c;活动信息管理&#xff0c;捐赠信息管理&#xff0c;论坛信息管理…

界面控件DevExpress ASP.NET新主题——Office 365暗黑主题的应用

DevExpress ASP.NET Web Forms Controls拥有针对Web表单&#xff08;包括报表&#xff09;的110种UI控件&#xff0c;DevExpress ASP.NET MVC Extensions是服务器端MVC扩展或客户端控件&#xff0c;由轻量级JavaScript小部件提供支持的70个高性能DevExpress ASP.NET Core Contr…

2023年6月跟教授学DAMA-CDGA/CDGP数据治理认证到这里

DAMA认证为数据管理专业人士提供职业目标晋升规划&#xff0c;彰显了职业发展里程碑及发展阶梯定义&#xff0c;帮助数据管理从业人士获得企业数字化转型战略下的必备职业能力&#xff0c;促进开展工作实践应用及实际问题解决&#xff0c;形成企业所需的新数字经济下的核心职业…

什么?要求设计一个循环队列?

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f349;本篇简介:>:讲解用c…

PortSwigger 基于不安全的反序列化漏洞

一、反序列化漏洞简单介绍 反序列化漏洞是指攻击者通过在应用程序中注入恶意的序列化对象来利用应用程序的反序列化功能&#xff0c;从而导致应用程序受到攻击的漏洞。 在一些编程语言和应用程序中&#xff0c;对象可以被序列化为一些字节流或字符串&#xff0c;然后在不同的应…

基于Java+SpringBoot+Vue前后端分离网课在线学习观看系统

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

C#正则表达式的使用

C#正则表达式 System.Text.RegularExpressions.Regex 使用时需要引入命名空间 using System.Text.RegularExpressions; 如果不引用则写成 System.Text.RegularExpressions.Regex 使用方法如下&#xff1a; string str"测试123456"; string result""; re…

chatgpt赋能python:Python代码中的符号

Python代码中的符号 Python是一种简单易学的编程语言&#xff0c;拥有着广泛的应用领域&#xff0c;比如数据分析、人工智能、Web开发等等。在Python的编程过程中&#xff0c;符号是我们必须要熟悉的一部分。在本文中&#xff0c;我们将介绍Python代码中常见的符号&#xff0c…

华为OD机试真题B卷 Java 实现【人民币转换】,附详细解题思路

一、题目描述 考试题目和要点&#xff1a; 中文大写金额数字前应标明“人民币”字样。中文大写金额数字应用壹、贰、叁、肆、伍、陆、柒、捌、玖、拾、佰、仟、万、亿、元、角、分、零、整等字样填写。中文大写金额数字到“元”为止的&#xff0c;在“元”之后&#xff0c;应…

【Python PyInstaller】零基础也能轻松掌握的学习路线与参考资料

一、Python PyInstaller介绍 Python PyInstaller是一个用于将Python应用程序打包成可执行文件的工具&#xff0c;支持Windows、Mac OS X和Linux平台。使用PyInstaller可以方便地将Python应用程序和所需的依赖项&#xff08;包括Python解释器本身&#xff09;打包成一个独立的可…

JS的DOM对象获取元素

测试1 getElementById <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdev…