OSCHINA 编辑器更新:支持 Markdown、支持插入视频、增加 emoji 选择弹框和数学公式输入

原创
09/22 16:44
阅读数 2W

作者:yang羊羊羊
原文:https://my.oschina.net/yanglx/blog/5252332

📢OSCHINA 编辑器迎来重大更新!

亮点

  1. 投递新闻(或软件)支持 Markdown
  2. 支持插入视频(嵌入 iframe 代码、或直接输入视频源地址)
  3. 增加 emoji 选择弹框
  4. 增加数学公式编辑和预览

1. 投递新闻(或软件)支持 Markdown

此功能可一键将 Markdown 文本转换成 HTML 文本!

投递新闻(或软件)时,可直接复制 Markdown 文本到编辑器。如果编辑器识别到文本包含 Markdown 语法,会提示是否进行转换,点击转换即可将 Markdown 文本转换为 HTML 文本。

https://oscimg.oschina.net/oscnet/up-7880c4bddaf26ed714ef729b00e84e4f566.png

https://oscimg.oschina.net/oscnet/up-0ef223a5a10f4c82010444bab7c3e0d2bb9.png

2. 支持插入视频

目前支持通过两种方式插入视频。

2.1 直接输入「视频源」地址

点击工具栏的「视频」按钮,在弹出框输入视频源地址,配置所需的属性如宽度、高度(可选),点击确定即可在编辑器嵌入并预览视频。

https://oscimg.oschina.net/oscnet/up-c32daa695ca1ecfc4d963bf0b8af9d90964.png

https://oscimg.oschina.net/oscnet/up-305c6ebad5d26b545e576fcf0da9edc143f.png

※ 注意OSCHINA 暂不支持直接上传视频,请先将视频上传至自己的服务器或者上传到其他视频平台。

通过直接输入「视频源」地址来嵌入视频的示例如下:

2.2 嵌入 iframe 代码

如果希望将第三方平台(如哔哩哔哩、爱奇艺和优酷等)的视频插入到文章,只支持通过嵌入 iframe 代码的方式来实现。

以哔哩哔哩为例:

1. 如果需要插入自己创作的视频,登录 B 站后点击右上角的【创作中心/投稿】

2. 在创作中心上传视频

https://oscimg.oschina.net/oscnet/up-e1eb25bfa57b509a3c78a484a251e046002.png

3. 上传成功并通过审核后,可在【稿件管理】页面查看视频

https://oscimg.oschina.net/oscnet/up-58ee6636feebed619e71800052658dc7924.png

4. 点击「更多」按钮,然后点击「分享投稿」,会弹出新的窗口,接着点击「嵌入代码」后面的“复制”会得到一串 iframe 代码

https://oscimg.oschina.net/oscnet/up-b15ac3c1c3400ff0cd7632806621ae428c2.png

5. 选择上述 iframe 代码中 src 属性的引号内文本,并将这部分内容复制到编辑器 iframe 弹出框的 URL 表单里,点击确定即可嵌入 iframe。

<iframe src="//player.bilibili.com/player.html?bvid=BV1fw411Z7Wp&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

https://oscimg.oschina.net/oscnet/up-760cc48672b2d6ee228a3d9380fde13dae7.png

6. 如果需要分享别人已经发布的视频,直接点击视频下方的分享,步骤同 5

https://oscimg.oschina.net/oscnet/up-ff230d2d06efcce33e8b72e7de0dba60b50.png

3. 增加 emoji 选择弹框

新增的 emoji 选择弹框提供了丰富的 emoji ,点击工具栏中的笑脸按钮「😊」即可进行选择。

如果你了解 emoji 的英文写法,也可以通过直接编写英文来插入 emoji,比如:

📧 :e-mail: 💀 :skull: 💜 :purple_heart:

编辑器会提供建议和自动补全,如下:

https://oscimg.oschina.net/oscnet/up-74943076062a037eb95fd68b43003cce46f.png

4. 增加数学公式编辑和预览

目前支持在编辑器内便捷添加和预览数学公式。

点击工具栏的「Σ」按钮即可编辑数学公式,还支持实时预览数学公式,检查是否书写正确。

https://oscimg.oschina.net/oscnet/up-7268784f514c92b72a1f386c3f7dcf72315.png

https://oscimg.oschina.net/oscnet/up-47f48a09bb46e98344aa759788df8cb1481.png

当然,原来的直接手写公式依然支持,并新增常用的\( xxx \)写法(来自上次数学公式功能支持时小伙伴们的留言评论~)

目前支持三种手写公式格式:

① 整行公式

$$f(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xi$$

$$f(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xi$$

② 行内公式 1

爱因斯坦质能方程 $E=mc^$ 揭示了物质的质量和能量之间的关系

爱因斯坦质能方程 $E=mc^2$ 揭示了物质的质量和能量之间的关系

③ 行内公式 2

求根公式是 \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

求根公式是 \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

※注意:手写公式和切换到 Markdown 后的公式在编辑器中不支持预览,如需在编辑器里面即时看到效果请在 HTML 编辑器模式下选择工具栏中的数学公式编辑。


以上是新版编辑器的主要更新介绍,如果有建议或反馈请在评论区留言,感谢支持!

展开阅读全文
打赏
3
5 收藏
分享
加载中
您好,请问富文本编辑器显示Markdown是什么原理?
09/27 19:04
回复
举报
不错,点赞
09/26 17:11
回复
举报
ckeditor?
09/26 09:08
回复
举报
掘金社区早就这样搞啦
09/26 08:37
回复
举报
灰名单为什么还没有修复?现在灰名单用不了
09/25 19:18
回复
举报
不开源,不土豆呀~
09/25 18:09
回复
举报
开源出来,让大家都收益啊
09/25 09:00
回复
举报
Markdown转HTML,还不如直接Markdown.
09/24 14:22
回复
举报
无知了吧,转html可以提升服务器性能
09/25 11:25
回复
举报
开源中国首席罗纳尔迪尼奥怎么没来发问?
09/24 14:05
回复
举报
自己家的不叮-_-||
09/25 14:22
回复
举报
APP啥时候更新呀
09/24 13:20
回复
举报
更多评论
打赏
17 评论
5 收藏
3
分享
返回顶部
顶部