关于HTML转义与预览模式的问题

[zsxeee]

首先感谢一下作者的工作，以下是问题：

1. 在编辑器内不能在 `` 之外保存HTML实体，譬如“<>”等。
   可能是我的需求有些奇怪，为了自己的主题样式我需要自己写 pre code加属性，但是发现HTML的实体会在保存后自动转义以致无法正常显示，经典编辑器则正常。
2. 在预览界面打开的情况下，文中的样式(特指上面的转义问题造成的)会影响到整个后台编辑器的样式；文中的如果有 form 且有 require 将会影响编辑器的保存提交。私以为预览窗口应该放置于独立的 iframe 中。

以上问题均发生在此文：缺省样式测试

另外，是否可以考虑自定义 pre code 的语言标记注入规则以适应自己的代码高亮方案（这个需求不是主要的

[LuRenJiasWorld]

首先感谢一下作者的工作，以下是问题：

1. 在编辑器内不能在 `` 之外保存HTML实体，譬如“<>”等。
   可能是我的需求有些奇怪，为了自己的主题样式我需要自己写 pre code加属性，但是发现HTML的实体会在保存后自动转义以致无法正常显示，经典编辑器则正常。

你指的是在文本中加入<>这些字符会与标签冲突吗？

这个如果是开启了『支持HTML』选项的话，是无法避免的，因为很难判断<>到底是HTML还是Plain Text，不过我这边测试关闭这个选项之后不会转义，如果情况不是这样的话，麻烦回复一下。

如果是需要插入HTML，开启这个选项就可以了。

2. 在预览界面打开的情况下，文中的样式(特指上面的转义问题造成的)会影响到整个后台编辑器的样式；文中的如果有 form 且有 require 将会影响编辑器的保存提交。私以为预览窗口应该放置于独立的 iframe 中。

指的是在编辑器中加入非文本内容（比如表单）会对编辑器保存功能造成影响吗？

之前的确没有考虑过关于这方面的需求，我测试一下。

以上问题均发生在此文：缺省样式测试

另外，是否可以考虑自定义 pre code 的语言标记注入规则以适应自己的代码高亮方案（这个需求不是主要的

这句话我不是很理解，什么叫做语言标记注入规则呢？指的是允许使用第三方语法高亮插件来覆盖本插件语法高亮，还是指希望能在Markdown文本中插入能被第三方语法高亮插件识别的代码段呢？

[LuRenJiasWorld]

此外关于你提到的这三部分，可以的话麻烦分别用Ubuntu Pastebin粘贴一份原文，方便复现故障。

因为我没有遇到过这个问题，所以说目前没有很好的思路进行测试。

[zsxeee]

1. 刚刚没注意到这样看不出来，例：markdown格式下的代码块以外输入实体 “<a>”，保存后在前端直接变成了html的 “” 以致于被解析看不见。
2. 是的，不光是form，style和script等也会影响整个编辑器后台的页面，只不过form影响要大一些。
3. 仔细想了一下，貌似可以从我主题的方向来解决，可忽略，但建议不要将语言标记的大小写转换（或可选转换）。刚刚我是指将如 ```JavaScript \n code... 这样的语言标记插入到特定属性中，且保持大小写，如 <code data-language="JavaScript">

以下是测试样例Pastebin

[LuRenJiasWorld]

1. 刚刚没注意到这样看不出来，例：markdown格式下的代码块以外输入实体 “”，保存后在前端直接变成了html的 “” 以致于被解析看不见。
2. 是的，不光是form，style和script等也会影响整个编辑器后台的页面，只不过form影响要大一些。
3. 仔细想了一下，貌似可以从我主题的方向来解决，可忽略，但建议不要将语言标记的大小写转换（或可选转换）。刚刚我是指将如 ```JavaScript \n code... 这样的语言标记插入到特定属性中，且保持大小写，如 <code data-language="JavaScript">

以下是测试样例Pastebin

1. 这个没有办法。在设置面板中开启HTML支持后，如果是需要让读者看到<a>这样的内容，必须使用反引号包裹，这是Markdown写作的习惯，也有助于优化阅读。

2. 好的，这部分的确可以优化，我先看一下你的测试样例。

3. 本插件的原理是将三个单引号包裹的字面量转换为<pre class="language-"></pre>这样的内容，忽略大小写是必须的，这样子才能被前台的prism.js解析。该操作在保存的时候由PHP完成。因此如果你需要适配其他的高亮插件，有三个方法：

• 修改本插件相关转换代码：src/App/WPMarkdownParser.php （不推荐，因为本插件功能繁杂且接管了WordPress系统模块，每次更新都有大量重要内容）

• 修改代码高亮插件，使其识别本插件生成的pre标签（推荐，因为大部分代码高亮插件不常更新）

• 直接在写作时输入代码高亮插件支持的pre或code标签格式（不是很推荐，写作体验不太好）

[zsxeee]

抱歉这边还是给我转义了：第一点我指的是 <>，如果还是显示的标签那么我加个空格： & l t ; a & g t ; (空格删除)

[LuRenJiasWorld]

抱歉这边还是给我转义了：第一点我指的是 <>，如果还是显示的标签那么我加个空格： & l t ; a & g t ; (空格删除)

原来如此，你的意思是输入HTML实体会依旧被解析为标签，然后不可见吗？

[zsxeee]

是的，编辑器会自动解析为标签保存

[zsxeee]

你可在我的测试例当中看到

[LuRenJiasWorld]

好的，我尝试测试一下。

你刚刚提到的input标签问题我已经测试了，的确会有这个问题。

使用iframe可能是比较适合的方法，只是要涉及较多模块。我尽快解决。抱歉带来不便。

[LuRenJiasWorld]

第一个案例的确也会导致页面出现错误，猜测可能是代码段未被正常转义导致的。我思考下如何解决。

[LuRenJiasWorld]

嗯，目前你提到的两个问题都已经可以复现出来了，第一个问题在于未对预览窗口进行隔离，第二个问题在于预览窗口未对代码进行转义导致代码被执行。

因为手头还有一些比较重要的BUG需要修复，可能无法在下个版本解决你提出的问题，对这些问题的修复会在四月完成，修复完成后将会回复此Issue通知你。

感谢反馈: )

[zsxeee]

十分感谢你的重视

[LuRenJiasWorld]

你好，最近我在尝试解决这一问题，解决方法是在开启HTML转义后，对包含如下标签的内容进行过滤，过滤后在预览阶段不进行解析，而是原文显示（发布不受影响）：

    const htmlTagEscapedItem = [
      // 可能会引起样式错乱或XSS漏洞的标签
      "script", "style", 
      // 每次输入新字符都会导致重复加载的标签
      "audio", "video",
      // 表单相关内容，可能会影响编辑器其他功能（如无法提交）
      "input", "textarea", "button", "select", "option", "optgroup", "fieldset", "output"
    ];

按照预期，这一功能将于不久后的10.2.0版本发布。不知道你有没有什么相关的建议呢？

感谢对本插件的支持，祝好。

[LuRenJiasWorld]

你好，该问题已于最新发布的 10.2.0 版本解决，再次感谢反馈，祝使用愉快。如果以后有其他问题也欢迎继续反馈~

Release：https://github.com/LuRenJiasWorld/WP-Editor.md/releases/tag/v10.2.0