How to keep html attribute unchanged in wysiwyg editor?

Question

In wysiwyg text editor source view, I have this simple html:

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

However, when I switch from source view to visual view, wysiwyg change my 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 was without changing by 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:

In fact, wysiwyg converted single html attribute to append with "=" and double quotes " " sign. I tested write <input type="checkbox" checked> in source view of wysiwyg, it will be converted attribute checked to like this: since wysiwyg treated single attribute checked as an invalid attribute, therefore it append equal sign "=" and double quote "" to it outputting <input type="checkbox" checked="">. You can test it in code snippet above. This is,therefore, my jinja2 syntax above was appended with = and " " which causes an syntax error exception during run time.

I tried to used regular expression to help to keep wysiwyg from changing my html like this:

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

But it still change my html during switching view between code view and visual view.

How can I do to keep my html unchanged from wysiwyg summernote editor? Thanks.

Dday

What is this syntax? {%if loop.first=='first'%}. EJS? – Girth

@ArtemSolovev, it is jinja2 code. I used to checked condition to set attribute to an html element.In fact, wysiwyg converted single html attribute to append with "=" sign. I tested write <input type="checkbox" checked> in source view of wysiwyg, it will be converted attribute checked to like this: <input type="checkbox" checked=""> since wysiwyg treated single attribute checked as an invalid attribute, therefore it append equal sign "=" and double quote "" to it. Therefore, my jinja2 syntax above was appended with = and " " which causes an syntax error exception during runtime. – Dday

How do you want it to be displayed in the visual editor? In such cases you should just disable the visual editor, because it makes no sense to render something visually when it can only be partially rendered? – Comprise

I want to execute html code and jinja2 code correctly during runtime. Because I’m doing template design for my client so virtual view help me less coding for styling and html. Yet I hard time to keep wysiwyg editor from ruin my coding syntax. – Dday

I don't see how you can handle this behaviour of the visual editor. I suggest you use a code editor instead, the visual editor would ruin your code each time you'll use it. – Bluepencil

@TakitIsy for sure it sometime ruined my code and existing code to open with editor, my code using editor is adding more by it and look more messy, here I meant it used only inline css style and unnecessary html. since I doing web printable document I thought visual editor could help me less coding design and typing. I favored this editor summernote over other editor since it provides me more customisable by coding, and I have hard code to handle some of problem made from this editor. Therefore it quite hard for me to give it up by now, I hoped I could handle this bug one day. Thanks :) – Dday

Answer 1

I'm assuming you have some code checking for the first attribute?

If that's CSS then if possible you could change it to check for unempty first attribute:

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

If that's javascript it's:

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

The reason for wanting to clarify the above is that if that's the case, 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>

Gamosepalous

Does it work for my case ? Basically, I check if-condition in element attribute <input ="checkbox" {% if var_name==True %} checked {% endif %}>` in editor. And I want to keep it as unchanged. you can test it editor in my snippet question. Thanks. – Dday

{% if var_name==True %}checked{%endif%} is a jinja2 code I set in my input element. If condition is true, I will set attribute checked to my input element during rendering in browser. However, editor keep ruin this code structure. Thanks. – Dday

It wouldn't work for checked no as that's a property which doesn't need a value for the checkbox to be checked. Essentially checked is the same as checked="" is the same as checked="checked" is the same as checked="false" – Gamosepalous