How to enable Bootstrap 4 in django-tinymce

I just installed django-tinymce==3.3.0 on Djang0=3.0.2 using python 3.6.9. I am only using tinymce in the Django admin. I am also using bootstrap 4 in the main web site, and there are text fields in the admin that I need to format for bootstrap 4.

I read this article https://pythonhosted.org/django-tinymce4-lite/advanced.html (perhaps an old article?) and made some additions to my settings for tinymce to be as follows. The path for the content_css is relative to my static_url definition. It is the same path I use in the web site.

TINYMCE_DEFAULT_CONFIG = {
    "height": "320px",
    "width": "960px",
    "menubar": "file edit view insert format tools table help",
    "plugins": "advlist autolink lists link image charmap print preview anchor searchreplace visualblock$
    "fullscreen insertdatetime media table paste code help wordcount spellchecker",
    "toolbar": "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect$
    "aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor "
    "backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | "
    "fullscreen  preview save print | insertfile image media pageembed template link anchor codesample |$
    "a11ycheck ltr rtl | showcomments addcomment code",
    "custom_undo_redo_levels": 10,
    "browser_spellcheck": True,    "contextmenu": False,
    "content_css": 'memorabilia/css/bootstrap.min.css',
}
TINYMCE_EXTRA_MEDIA = {
    'css': {
        'all': ['memorabilia/css/bootstrap.min.css', ],
    },
    'js': ['memorabilia/js/bootstrapbundle.min.js', ],
}

I tried loading some hand-crafted bootstrap 4 html (that displays properly in my site) into the tinymce editor, and the columns were ignored.

The html:

<p style="text-align: center;">Hallmark<br /><em>The Anniversary Times</em></p>
<hr style="background-color: gray; border: 0; height: 2px;" />
<p style="text-align: center;">JAMES and EVELYN PHILLIPS<br />Were Married on Thursday, June 29, 1950</p>
<hr style="background-color: gray; border: 0; height: 2px;" />
<div class="row">
<div class="col-7">MUSICAL MEMORIES<hr />It's a Lovely Day Today ... I Don't Care If the Sun Don't Shine ... Sleigh Ride ... Silver Bells ... A Bushel and a Peck ... Mona Lisa .. Music Music Music ... Autumn Leaves ... C'est Si Bon ... Frosty the Snowman ... Dearie<hr /></div>
<div class="col-5">HEADLINES OF THE TIMES<hr />N. Korean troops cross 38th parallel invading S. Korea; use Russian weapons ... Ben . Hogan wins US Open Golf Championship at Ardmore, 3 Pennsylvania ... President Truman attends reunion of his WWI unit in St. Louis, Mo.<hr /></div>
</div>
<div class="row">
<div class="col-7">THE BEST IN ENTERTAINMENT<hr /></div>
</div>
<div class="row">
<div class="col-3 text-left">Best Movie Best Actor Best Actress TV Shows<br /><br />World Series</div>
<div class="col-4 text-right">All About Eve<br />Jose Ferrer<br />Judy Holliday<br />Mama<br />Texaco Star Theatre<br />NY Yankees over Phillies</div>
<div class="col-5 text-center"><hr />PRESIDENT<br />Harry S Truman<br />VICE PRESIDENT<br />Alben W. Barkley</div>
</div>
<p>&nbsp;</p>
<div class="row">
<div class="col-6">THAT WAS THEN...THIS IS NOW<hr />
<table class="table-responsive-sm table-borderless">
<tbody>
<tr>
<td class="pr-5" style="text-align: right;">&amp;nbsp</td>
<td class="pr-5" style="text-align: right;">1950</td>
<td class="pr-5" style="text-align: right;">1990</td>
</tr>
<tr>
<td>3 Br. Home</td>
<td style="text-align: right;">$8,450</td>
<td style="text-align: right;">$93,400</td>
</tr>
<tr>
<td>Avg. Income</td>
<td style="text-align: right;">$3,319</td>
<td style="text-align: right;">$33,817</td>
</tr>
<tr>
<td>New Ford</td>
<td style="text-align: right;">$1,393</td>
<td style="text-align: right;">$11,429</td>
</tr>
<tr>
<td>Gas, 1 gal.</td>
<td style="text-align: right;">$.27</td>
<td style="text-align: right;">$1.03</td>
</tr>
<tr>
<td>Bread, 1 lb.</td>
<td style="text-align: right;">$.14</td>
<td style="text-align: right;">$.67</td>
</tr>
<tr>
<td>Milk, 1 gal.</td>
<td style="text-align: right;">$.82</td>
<td style="text-align: right;">$2.40</td>
</tr>
<tr>
<td>Bacon, 1 1b.</td>
<td style="text-align: right;">$.64</td>
<td style="text-align: right;">$1.72</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6">WHAT ELSE WAS NEW?<hr />Cyclamate artificial sweetener &amp; Xerox copy machine ... PREVENTION MAGAZINE ... First credit card, Diner's Club, ssued ... First commercial computer, Univac, sold ... Minute Rice ... Minn. Valley Canning took name Green Giant ... Grand Coulee Dam dedicated by Truman in Wash. ... Dick Button, US figure skating champion</div>
</div>
<p>&nbsp;</p>
<p>THOSE WERE THE DAYS</p>
<hr />
<p>1950 -- JAMES and EVELYN Were Married Charles Schulz's PEANUTS comic strip began with Charlie Brown: "Good grief&trade; ...- Smokey Bear rescued from forest fire ... GUYS AND DOLLS opened on Broadway ... Bomb shelters built ... Fashions: pedal pushers &amp; bare midriffs ... Korean War began ... New on TV: OZZIE &amp; HARRIET and YOUR HIT PARADE: "So long for awhile&rdquo;</p>
<p>1960 -- JAMES and EVELYN's Tenth Anniversary | Last model of Edsel ... MY THREE SONS &amp; THE FLINTSTONES began on TV ... BYE BYE BIRDIE, CAMELOT and THE MIRACLE WORKER on Broadway ... Ray Charles received his first Grammy award ... New 50 star flag ... Olympic golds won in Squaw Valley: US in hockey, Carol Heiss &amp; David Jenkins in skating ... Kennedy &amp; Nixon TV debate</p>
<p>1975 -- JAMES and EVELYN's Twenty-Fifth Anniversary Mood rings and Pet Rocks were fads ... Bruce Springsteen released hit album BORN TO RUN ... A CHORUS LINE opened on Broadway ... Beverly Sills debuted at Met. Opera House ... Film JAWS broke box office records; nationwide JAWS mania ... Calculators and electronic watches ... Last telecast of GUNSMOKE on TV</p>

What I see in the preview pane of tinymce: Screenshot from 2021-07-02 18-02-30

What I see in my site using bootstrap 4: Screenshot from 2021-07-02 18-02-53

Thanks for your help in getting bootstrap 4 to work with tinymce.

Mark

jazzband / django-tinymce

How to enable Bootstrap 4 in django-tinymce #363