首頁 > php框架 > ThinkPHP > 關於ThinkPHP6.0使用富文本編輯器wangEditor3

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

藏色散人
發布: 2020-11-01 16:20:04
轉載
3770 人瀏覽過

以下由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中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板