转跳到内容

深夜萌新探索富文本编辑器ing~


推荐贴

发布于 (已修改) · 只看该作者

<自留首行>

FBI WARNING    本帖正在施工,欢迎提出建议和问题!

据本萌新了解,SS同盟由原本Discuz → 现今Invision Community,很多人对这个编辑器不是那么了解,所以我小小测试了一下。

先说结论,大家平时如果有排版的需求,可以在Word上操作后复制到此处,我也在这里提供一些常用格式与字符供大家复制。

(施工…………)

首先,我们平日里接触到的文本主要分两类。一类是我们在微信QQ等聊天框中打的纯文本;另一种是蕴含文字格式的富文本,如浏览器、Word。为什么浏览器中的文本可以千变万化,甚至可以交互呢?这一切都归功于它们都由HTML(超文本标记语言)编辑。与Word中的文字使用特定的XML语言——WordprocessingML(Word处理标记语言)类似,HTML语言通过成对的标签(如 <h1> 表示一级标题,<p> 表示段落,<a> 表示链接)来告诉浏览器:这行是标题,这片是正文,这个词点一下能跳转。浏览器读到这些标签后,就会按照默认样式(或者你额外写的CSS样式表)把它们渲染成五颜六色、大小不一的文字、图片、按钮甚至整个交互界面。

所以说Word和我们排版用的编辑器是在逻辑上类似的,又存在些许的隔阂,故而我们可以在Word这个易于可视化编辑的软件上进行修改,再复制到文本框内发布,但有时又会出现表格中图片复制不过来之类(可能,待验证,举例)的情况。

对于有过丰富HTML经验的盟友们,可以尝试直接通过HTML语言进行编写,会具有更强适配性(如在不同端查看不会变形)的优势。

————废墟一片————(里面是测试内容)

剧透

 <测试>

【1】href+id锚点跳转

点我跳转到下面答案
跳转成功!能看到这个说明锚点没被过滤

【2】button按钮

点我弹窗

【3】style文字颜色样式

红色字蓝底白字

add:

🔹 文字样式大测试 🔹

· · 绿 ·

黄黑 · 黑白 · 粉紫

12px · 16px · 24px · 32px

normal粗细 · 粗体bold · 更粗900 · 斜体

下划线 · 删除线 · 上划线 · 波浪下划线

宋体 · 微软雅黑 · 等宽Courier · 手写体

字间距2px · 紧缩-1px · 单词 间距 8px

渐变背景文字

普通阴影 · 发光红影 · 立体偏移

绿圆 · 红方

【4】details标签,被转成span吗

点我展开隐藏内容在这里

【5】iframe嵌入

【6】onmouseover鼠标悬停变色

把鼠标放我身上变橙色

【7】href普通超链接跳转

【8】script,被露头就秒了大雾

【9】audio音频

【测试块10】embed图片

正规detail
剧透

啦啦啦

 

接着测:

【基础核心排版标签】

核心排版: 粗体, 斜体, 下划线, 删除线, code, kbd, samp

这里是一个 blockquote 引用,通常会缩进。
  • 无序列表项 1
  • 无序列表项 2
  1. 有序列表项 1
  2. 有序列表项 2
// 代码块
function test(){
    console.log('Hello'); 
}

 

看来还是标准的好用:

#include <cstdio>
using namespace std;
int main() {
  printf("hello %d",1);
  return 0;
}
表格示例
表头1 表头2
单元格1 单元格2

【一般文字样式】

模拟按钮

模拟通知卡片

【可能的增量技术】

◉ 上/下标: 文字上标下标

◉ 缩写: HTML (鼠标悬停查看全称)

◉ 简单的SVG:  蓝色圆形=SVG存活。

◉ Data URI 测试: 点击查看数据URI文字

◉ 60% - Meter 元素

◉ 70% - Progress 元素

◉ 漢ㄏㄢˋ - Ruby 注音元素

📑 目录

....很多内容....

第一章:介绍

内容...

第二章:方法

内容...

第三章:结论

内容...

修改日志:

2026/4/25 2:12 基本测试完毕,解除版主观看限制。
2026/4/25 2:48 添加修改日志,添加正文,将测试内容收纳。

<留一行方便改>

,由zz137修改
不能当版本说明来用的修改理由不是好功能!
注释
ㅤ凯ㅤ ㅤ凯ㅤ 10.00节操 支持~
MCIN MCIN 66.00节操 !?强强?!

创建帐号或登入才能点评

您必须成为用户才能点评

创建帐号

在我们社区注册个新的帐号。非常简单!

注册新帐号

登入

已有帐号? 登入

现在登入
×
×
  • 新建...

重要消息

为使您更好地使用该站点,请仔细阅读以下内容: 使用条款