關於ThinkPHP6.0使用富文本編輯器wangEditor3-ThinkPHP-PHP中文網

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

藏色散人

發布： 2020-11-01 16:20:04

轉載

3731 人瀏覽過

以下由ThinkPHP教學專欄為大家介紹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(&#39;#editor&#39;)
        // 或者 var editor = new E( document.getElementById(&#39;editor&#39;) )
        editor.create()
    </script>
</body>
</html>

登入後複製

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

沒用Ajax，所以在表單中新增了一個隱藏文字方塊

<input id="content" name="content" type="hidden">

登入後複製

配置

onchange函數之後，使用者操作（滑鼠點擊、鍵盤打字等）導致的內容變更之後，會自動觸發

onchange

函數執行。 submit提交時富文本內容也會提交。

######3.儲存文字到資料庫################

以上是關於ThinkPHP6.0使用富文本編輯器wangEditor3的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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