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>
    <div id="editor">
        <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
    </div>

    <!-- 注意, 只需要引用 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.保存文本到數據庫

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM