關于ThinkPHP6.0使用富文本編輯器wangEditor3

下面由thinkphp教程欄目給大家介紹thinkphp6.0使用富文本編輯器wangeditor3，希望對需要的朋友有所幫助！

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，

具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼。

可惜在官網(wǎng)下載太慢了，而且界面有些許復古，放棄了，使用了輕量級wangEditor3。

1.下載

立即學習“PHP免費學習筆記（深入）”；

手冊中下載

https://www.kancloud.cn/wangfupeng/wangeditor3/332599

導入到項目中

2.項目中創(chuàng)建

nbsp;html&gt;   ????<meta> ????<title>wangEditor?demo</title> ????<p> ????????</p><p>歡迎使用?<b>wangEditor</b>?富文本編輯器</p> ????  ????<!-- 注意， 只需要引用 JS，無需引用任何 CSS ?。?！--> ????<script></script> ????<script>         var E = window.wangEditor         var editor = new E(&#39;#editor&#39;)         // 或者 var editor = new E( document.getElementById(&#39;editor&#39;) )         editor.create()     </script>

圖片上傳選的使用 base64 編碼直接將圖片插入到內容中，免去配置本地上傳

沒用ajax，所以在表單中添加 了一個隱藏文本框

<input>

配置onchange函數(shù)之后，用戶操作（鼠標點擊、鍵盤打字等）導致的內容變化之后，會自動觸發(fā)onchange函數(shù)執(zhí)行。

submit提交時富文本內容也會提交。

3.保存文本到數(shù)據(jù)庫