How to save html attribute without changes in wysiwyg editor?

Question

In the original view of the wysiwyg text editor, I have this simple html:

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

However, when I switch from the original view to the visual one, wysiwyg changes the html code to this:

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

However, I would like to keep my html as it is, without changing the text editor.

 $('#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> 

Edited by:

In fact, wysiwyg converted one html attribute to be added with "=" signs and double quotation marks " " . I tested the entry <input type="checkbox" checked> in the original wysiwyg view, it will be a converted attribute, verified like this: since wysiwyg processed one attribute, checked as an invalid attribute, so it adds the equal sign "=" and a double quote "", output <input type="checkbox" checked=""> . You can check it in the code snippet above. Thus, the jinja2 syntax above was added using = and " " , which throws a syntax error at runtime.

I tried using regex to help wysiwyg modify my html as follows:

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

But it still changes my html while switching between code view and visual presentation.

How can I do to save html without changes from the wysiwyg summernote editor? Thanks.

Answer 1

I assume you have a code check for the first attribute?

If this CSS, if possible, you can change it to check the nonempty attribute first :

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

If this is javascript this is:

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

The reason for clarifying the above is that if this happens, you can move your condition inside the first attribute, and hopefully it will be left alone:

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