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

在wysiwyg文本编辑器源代码视图中,我有一个简单的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属性转换为附加“=”和双引号 " " 签名我测试了write <input type="checkbox" checked> 在所见即所得(wysiwyg)的源代码视图中,它将被转换为如下选中的属性:由于所见即所得(wysiwyg)将选中的单个属性视为无效属性,因此它会在输出时附加等号“=”和双引号“” <input type="checkbox" checked=""> 。您可以在上面的代码段中测试它。因此,这是我的 jinja2 上面的语法附加了 = 和 “” 这会在运行时导致语法错误异常。

我尝试使用正则表达式来防止所见即所得更改html,如下所示:

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

但在代码视图和视觉视图之间切换视图时,它仍然会更改我的html。

如何在wysiwyg summernote编辑器中保持html不变?谢谢