Why Text Editor removes HTML attributes?

ERPNext
1

hi
i’m trying to Add a collapse Button In text editor But After i Save i found that text Editor Auto Removes the attributes
this is example Code

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

the text editor auto removes this
data-toggle=“collapse” data-target=“#demo”

2

@fatheyabdelslam

Yeah It’s removing the bootstrap attributes.
I think it’s removing because It’s not a dynamical field, but you can use HTML docfield type to avoid it.

1 Like
3

please guide me how to use html Field
because when i add it it’s disabled

4

I will test it also before helping you.
If I am able to achieve desired results then It’ll also helps others.

1 Like
5

any news ?

6

@fatheyabdelslam

Yeah HTML field type is working fine.

Follow example:
I have added new field(html_test) in doctype form as HTML fieldtype.

Step 1: open the same doctype form and get the field using:

var field  = cur_frm.get_field("html_test");

Step 2: Set the value using field class function set_value:

field.set_value("<div class='container'><h2>Simple Collapsible</h2><p>Click on the button to toggle between showing and hiding content.</p><button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'>Simple collapsible</button><div id='demo' class='collapse'>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>")

Step 3: save the form.

Step 4:To verify the stored value again use the same form field:

var field = cur_frm.get_field("html_test");

Step 5: Print value in console using:

console.log(field.$wrapper.html());

output:

"<div class='container'><h2>Simple Collapsible</h2><p>Click on the button to toggle between showing and hiding content.</p><button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'>Simple collapsible</button><div id='demo' class='collapse'>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>"
1 Like