溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關ThinkPHP6.0使用富文本編輯器wangEditor3的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，
具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。
可惜在官網下載太慢了，而且界面有些許復古，放棄了，使用了輕量級wangEditor3。
1.下載
手冊中下載
https://www.kancloud.cn/wangfupeng/wangeditor3/332599
導入到項目中
2.項目中創建
<!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 編碼直接將圖片插入到內容中，免去配置本地上傳
沒用Ajax，所以在表單中添加 了一個隱藏文本框
<input id="content" name="content" type="hidden">
配置onchange函數之后，用戶操作（鼠標點擊、鍵盤打字等）導致的內容變化之后，會自動觸發onchange函數執行。
submit提交時富文本內容也會提交。
3.保存文本到數據庫
關于“ThinkPHP6.0使用富文本編輯器wangEditor3的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
