溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ThinkPHP6.0使用富文本編輯器wangEditor3的方法

發(fā)布時間:2021-03-05 09:32:10 來源:億速云 閱讀:325 作者:小新 欄目:編程語言

這篇文章將為大家詳細講解有關ThinkPHP6.0使用富文本編輯器wangEditor3的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

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

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

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

1.下載

手冊中下載

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

導入到項目中

ThinkPHP6.0使用富文本編輯器wangEditor3的方法

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>

ThinkPHP6.0使用富文本編輯器wangEditor3的方法

ThinkPHP6.0使用富文本編輯器wangEditor3的方法

圖片上傳選的使用 base64 編碼直接將圖片插入到內(nèi)容中,免去配置本地上傳

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

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

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

submit提交時富文本內(nèi)容也會提交。

ThinkPHP6.0使用富文本編輯器wangEditor3的方法

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

ThinkPHP6.0使用富文本編輯器wangEditor3的方法

關于“ThinkPHP6.0使用富文本編輯器wangEditor3的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI