How to integrate Summernote in Bootstrap 5 in PHP/HTML
In this post, you will learn how to integrate summernote in bootstrap 5 in php or normal html website too.
So, guys to accomplish this we will be using CDN Links of summernote.
Summernote CSS CDN Link:
<span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span>
Summernote JS CDN Link:
<span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"</span><span class="tag">></script></span>
Run summernote:
Run the script below when document is ready!
<span class="pln"> </span><span class="tag"><script></span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#your_summernote"</span><span class="pun">).</span><span class="pln">summernote</span><span class="pun">();</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.dropdown-toggle'</span><span class="pun">).</span><span class="pln">dropdown</span><span class="pun">();</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="tag"></script></span>
Simple example:
You can also test running example. Save below code as index.html / index.php and open it with your browser.
<span class="pln"> </span><span class="dec"><!DOCTYPE html></span><span class="pln"> </span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"X-UA-Compatible"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"IE=edge"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">Integrate Summernote in PHP/HTML</span><span class="tag"></title></span><span class="pln"> </span><span class="com"><!-- Bootstrap 5 CDN Link --></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- Summernote CSS - CDN Link --></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- //Summernote CSS - CDN Link --></span><span class="pln"> </span><span class="tag"></head></span><span class="pln"> </span><span class="tag"><body></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-12"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-header"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h4></span><span class="pln">Integrate Summernote with Bootstrap 5 in PHP/HTML</span><span class="tag"></h4></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"mb-3"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label></span><span class="pln">Big Description</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"description"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"your_summernote"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"4"</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></form></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-3.6.0.min.js""></span><span class="tag"></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="com"><!-- Summernote JS - CDN Link --></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#your_summernote"</span><span class="pun">).</span><span class="pln">summernote</span><span class="pun">();</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.dropdown-toggle'</span><span class="pun">).</span><span class="pln">dropdown</span><span class="pun">();</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"> </span><span class="com"><!-- //Summernote JS - CDN Link --></span><span class="pln"> </span><span class="tag"></body></span><span class="pln"> </span><span class="tag"></html></span>
Thanks for reading.
