您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關ThinkPHP6.0使用富文本編輯器wangEditor3的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器,
具有輕量,可定制,注重用戶體驗等特點,開源基于MIT協(xié)議,允許自由使用和修改代碼。
可惜在官網(wǎng)下載太慢了,而且界面有些許復古,放棄了,使用了輕量級wangEditor3。
1.下載
手冊中下載
https://www.kancloud.cn/wangfupeng/wangeditor3/332599
導入到項目中
2.項目中創(chuàng)建
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> </head> <body> <p id="editor"> <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p> </p> <!-- 注意, 只需要引用 JS,無需引用任何 CSS !??!--> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') ) editor.create() </script> </body> </html>
圖片上傳選的使用 base64 編碼直接將圖片插入到內(nèi)容中,免去配置本地上傳
沒用Ajax,所以在表單中添加 了一個隱藏文本框
<input id="content" name="content" type="hidden">
配置onchange
函數(shù)之后,用戶操作(鼠標點擊、鍵盤打字等)導致的內(nèi)容變化之后,會自動觸發(fā)onchange
函數(shù)執(zhí)行。
submit提交時富文本內(nèi)容也會提交。
3.保存文本到數(shù)據(jù)庫
關于“ThinkPHP6.0使用富文本編輯器wangEditor3的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。