如何在所见即所得编辑器中保持 html 属性不变？

Question

在所见即所得的文本编辑器源视图中，我有这个简单的 html:

<span style="font-family: Moul;" {%if  loop.first=='first'%} first="" {%endif%}>Hello Text</span>

但是，当我从源视图切换到可视视图时，所见即所得将我的 html 代码更改为：

<span style="font-family: Moul;" {%if="" loop.first="='first'%}" {%endif%}="">Hello Text</span>

但是，我想保持我的 html 原样，而不用文本编辑器更改。

$('#summernote').summernote({
  height: 300
});

body {
  padding: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.0/summernote.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.0/summernote.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.5.0/summernote-bs3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<textarea name="summernote" id="summernote" cols="30" rows="10">
</textarea>

已编辑：

事实上，wysiwyg 将单个 html 属性转换为附加“=”和双引号 " " 符号。我在所见即所得的源代码视图中测试了写 <input type="checkbox" checked>，它将被转换为这样的属性检查：因为所见即所得将单个属性检查为无效属性，因此它附加等号“=”和双引号“”到它输出 <input type="checkbox" checked="">。您可以在上面的代码片段中对其进行测试。因此，我上面的 jinja2 语法附加了 = 和 " "，这会在运行时间内导致语法错误异常。

我尝试使用正则表达式来帮助防止所见即所得改变我的 html 像这样：

codeview = $('summernote').summernote('code');
console.log(codeview);
Regx  =  /(\<.*\s*\{\%[^}]*\%\}.*\s*\>)/g;
codeview.replace(Regx,'');

但在代码视图和可视化视图之间切换视图时，它仍然改变了我的 html。

我怎样才能使所见即所得的 summernote 编辑器的 html 保持不变？谢谢。

Answer 1

我假设您有一些代码检查 first 属性？

如果那是 CSS 那么如果可能的话你可以改变它来检查空的 first 属性：

[first]:not([first='']){ }

如果那是 javascript 它是：

document.querySelectorAll("[first]:not([first=''])");

之所以想澄清以上内容，是因为如果是这种情况，您可以将您的条件移到 first 属性中，希望它不会受到影响：

<span style="font-family: Moul;" first="{%if loop.first=='first' %}true{%endif%}">Hello Text</span>

如何在所见即所得编辑器中保持 html 属性不变？

How to keep html attribute unchanged in wysiwyg editor?

html

javascript

wysiwyg

jinja2

summernote

已编辑：