目录
回复内容:
首页 后端开发 php教程 mysql - 富文本编辑器与php后台开发是怎么结合使用的呢?

mysql - 富文本编辑器与php后台开发是怎么结合使用的呢?

Jun 06, 2016 pm 08:24 PM
mysql php thinkphp 富文本编辑器

我所知道的富文本编辑器就是像DZ论坛那样,所见所得那样的。

1:但是我一直有个疑问,不是说客户端提交的数据要过滤吗,不然不就是XXS吗,DZ是UBB的方式处理的是吗?

2:那些富文本编辑器,最后提交到服务器后,那些包含html代码的,能直接存到数据库里面吗,肯定不能允许用户这样吧?

3:还有比如SF的这个Markdown编辑器原理是什么呢,它后台数据库有没有保存我们输入的html,js代码呢?

4:还有像DZ论坛这样的用户发帖,投票什么的,这个编辑器内部是怎么样的,搞不懂,找处理的源码又找不到……

我之前一直使用text文本框的,后台就直接过滤所有标签,就这么简单,但是这样就只能有普通的文本了,没有DZ那样用户发帖那样强大,现在想用一个富文本编辑器,但是不知道php后台该怎与富文本编辑器对接,比如百度的那个,或者SF的这个编辑器。

然后那个富文本编辑器插入图片,那个是上传图片,然后返回图片地址,插入到内容中吗,那DZ的那个上传附件呢,帖子中的图片还会惰性加载呢,这个是怎么实现的呢,如果是直接img标签插入到内容了实现不了吧,或者是用一个什么图片占位符什么的,然后js操作附件数据……

搞不懂,希望高手给我解释一下,我知道原理再去看代码应该会简单许多,谢谢了!

回复内容:

我所知道的富文本编辑器就是像DZ论坛那样,所见所得那样的。

1:但是我一直有个疑问,不是说客户端提交的数据要过滤吗,不然不就是XXS吗,DZ是UBB的方式处理的是吗?

2:那些富文本编辑器,最后提交到服务器后,那些包含html代码的,能直接存到数据库里面吗,肯定不能允许用户这样吧?

3:还有比如SF的这个Markdown编辑器原理是什么呢,它后台数据库有没有保存我们输入的html,js代码呢?

4:还有像DZ论坛这样的用户发帖,投票什么的,这个编辑器内部是怎么样的,搞不懂,找处理的源码又找不到……

我之前一直使用text文本框的,后台就直接过滤所有标签,就这么简单,但是这样就只能有普通的文本了,没有DZ那样用户发帖那样强大,现在想用一个富文本编辑器,但是不知道php后台该怎与富文本编辑器对接,比如百度的那个,或者SF的这个编辑器。

然后那个富文本编辑器插入图片,那个是上传图片,然后返回图片地址,插入到内容中吗,那DZ的那个上传附件呢,帖子中的图片还会惰性加载呢,这个是怎么实现的呢,如果是直接img标签插入到内容了实现不了吧,或者是用一个什么图片占位符什么的,然后js操作附件数据……

搞不懂,希望高手给我解释一下,我知道原理再去看代码应该会简单许多,谢谢了!

html代码直接存数据库,用户写的什么就存什么。
各种编辑器都是生成html代码,然后点击提交html的代码。
这有什么好疑问的吗?
html有个pre标签,你造吗?

要防止JS注入。
很简单的啊,PHP输出到前端之前,用str_replace函数,把替换成& gt;(去掉空格)等等。
请百度“HTML特殊字符编码”。
保证标签不会起作用,JS代码不会执行就完了。

防御XSS攻击,最简单粗暴的做法就是用htmlspecialchars把特殊字符(&,",',)替换为HTML实体(&"'<>)后输出.

<code><?php //ENT_QUOTES表示把单引号也替换&#039;
$html = htmlspecialchars($html, ENT_QUOTES, 'UTF-8');
//换行替换成<br />
$html = str_replace(array("\r\n", "\r", "\n"), '<br>', $html);
echo $htm;</code>
登录后复制

上面这种实现非常简单,而且安全,显示也非常清爽.编辑器就一个普通的文本框textarea就好了.

防御XSS攻击,最复杂的做法就是自己写正则过滤,不过还好有HTMLPurifier库,除了能过滤XSS代码,还能把不完整的标签补全或者去掉.

<code><?php require dirname(__FILE__).'/htmlpurifier/library/HTMLPurifier.auto.php';
$purifier = new HTMLPurifier();
echo $purifier->purify($html);</code>
登录后复制

可以通过BBCode或者Markdown标记定义一些HTML功能,比如BBCode:

<code>[b]粗体文字[/b]
[color=#FF0000]红色文字[/color]
[img=PunBB bbcode test]http://127.0.0.1:8080/punbb/img/test.png[/img] 
[url=http://127.0.0.1:8080/punbb/]PunBB forum[/url]</code>
登录后复制

用户在文本框里输入BBCode标签,页面输出时把BBCode正则替换成HTML,经过HTMLPurifier过滤后安全输出.

SF的编辑器是markdown语法编辑器,源代码在此:

一个结构清晰的,易于维护的,现代的PHP Markdown解析器

我还看到网上有那种微信编辑器,纠结

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MySQL:初学者的数据管理易用性 MySQL:初学者的数据管理易用性 Apr 09, 2025 am 12:07 AM

MySQL适合初学者使用,因为它安装简单、功能强大且易于管理数据。1.安装和配置简单,适用于多种操作系统。2.支持基本操作如创建数据库和表、插入、查询、更新和删除数据。3.提供高级功能如JOIN操作和子查询。4.可以通过索引、查询优化和分表分区来提升性能。5.支持备份、恢复和安全措施,确保数据的安全和一致性。

忘记数据库密码,能在Navicat中找回吗? 忘记数据库密码,能在Navicat中找回吗? Apr 08, 2025 pm 09:51 PM

Navicat本身不存储数据库密码,只能找回加密后的密码。解决办法:1. 检查密码管理器;2. 检查Navicat的“记住密码”功能;3. 重置数据库密码;4. 联系数据库管理员。

navicat premium怎么创建 navicat premium怎么创建 Apr 09, 2025 am 07:09 AM

使用 Navicat Premium 创建数据库:连接到数据库服务器并输入连接参数。右键单击服务器并选择“创建数据库”。输入新数据库的名称和指定字符集和排序规则。连接到新数据库并在“对象浏览器”中创建表。右键单击表并选择“插入数据”来插入数据。

navicat如何执行sql navicat如何执行sql Apr 08, 2025 pm 11:42 PM

在 Navicat 中执行 SQL 的步骤:连接到数据库。创建 SQL 编辑器窗口。编写 SQL 查询或脚本。单击“运行”按钮执行查询或脚本。查看结果(如果执行查询的话)。

navicat怎么新建连接mysql navicat怎么新建连接mysql Apr 09, 2025 am 07:21 AM

可在 Navicat 中通过以下步骤新建 MySQL 连接:打开应用程序并选择“新建连接”(Ctrl N)。选择“MySQL”作为连接类型。输入主机名/IP 地址、端口、用户名和密码。(可选)配置高级选项。保存连接并输入连接名称。

Navicat 无法连接 MySQL/MariaDB/PostgreSQL 等数据库的解决方法 Navicat 无法连接 MySQL/MariaDB/PostgreSQL 等数据库的解决方法 Apr 08, 2025 pm 11:00 PM

Navicat 无法连接数据库的常见原因及其解决方法:1. 检查服务器运行状态;2. 核对连接信息;3. 调整防火墙设置;4. 配置远程访问;5. 排除网络问题;6. 检查权限;7. 保障版本兼容性;8. 排除其他可能性。

mysql:简单的概念,用于轻松学习 mysql:简单的概念,用于轻松学习 Apr 10, 2025 am 09:29 AM

MySQL是一个开源的关系型数据库管理系统。1)创建数据库和表:使用CREATEDATABASE和CREATETABLE命令。2)基本操作:INSERT、UPDATE、DELETE和SELECT。3)高级操作:JOIN、子查询和事务处理。4)调试技巧:检查语法、数据类型和权限。5)优化建议:使用索引、避免SELECT*和使用事务。

navicat怎么连接本地mysql navicat怎么连接本地mysql Apr 09, 2025 am 07:45 AM

使用 Navicat 连接本地 MySQL 数据库的步骤:创建连接,并设置连接名称、主机、端口、用户名、密码。测试连接,确保参数正确。保存连接。从连接列表中选择新连接。双击要连接的数据库。

See all articles