Question about use with Bootstrap/custom classes

[benjaminvanrenterghem]

Hi,

I have successfully set up your plugin for use and I was wondering if you, or someone else, has any idea on how to make this work.
I want to use the HTML editor to insert bootstrap cards and so on into the content, yet when I click on 'OK' it converts it into something else.

For example this entered into the HTML box:

<div class="card w-50 text-center">
    <div class="card-body">
        <div class="card-title">This is a title</div>
        <p class="card-text"><strong>Emphasis</strong> with some text</p>
        <hr>
        <a href="https://google.com"><img src="https://via.placeholder.com/350x300"><p></p></a><hr>
        
        <a href="https://google.com" style="text-decoration:none!important" class="btn btn-success" role="button"><i class="fas fa-network-wired pr-2"></i> Go to google</a>
    </div>
</div>

This should end up looking like:

But instead the submitted HTML turns into:

<p>
  <a href="https://google.com" target="_blank">
    <img src="https://via.placeholder.com/350x300">
    </a>
  </p>
  <p>
    <a href="https://google.com" target="_blank">
       Go to google
    </a>
  </p>

Which looks nothing like it, any idea on how to resolve this?
Thanks in advance!

[benwinding]

Quill doesn't allow you to use custom css classes in the HTML, it translates the HTML to it's own Delta JSON format, so CSS classes are stripped.

There's more information on this here: #54

Not exactly sure how to get what you want working, it might be possible by hooking into Quill and changing the translation as it goes to/from HTML, but it's not the concern of this library for now.