隨著互聯網的快速發展，富文本編輯器已經成為了網站開發過程中不可缺少的一部分。而wangeditor作為國內開源的一款富文本編輯器，其具備易用、輕量、功能豐富等優秀特點，已經逐漸成為了很多開發者的首選。
而Thinkphp6作為目前國內最主流的PHP開發框架之一，也提供了豐富的擴展功能，可以幫助開發者快速地集成WangEditor富文本編輯器。本文將詳細介紹如何在thinkphp6中使用WangEditor富文本編輯器。
一、下載WangEditor
首先，我們需要下載WangEditor編輯器源碼。可以在WangEditor的官方網站（https://www.wangeditor.com/）上下載最新版。解壓源碼后，將目錄復制到我們的ThinkPHP6項目中的public目錄下。
二、引入WangEditor資源文件
立即學習“PHP免費學習筆記（深入）”；
在我們需要使用WangEditor的頁面中，我們需要引入以下資源文件：
<link rel="stylesheet" type="text/css" href="/public/wangEditor-3.1.1/release/wangEditor.min.css"><script type="text/JavaScript" src="/public/wangEditor-3.1.1/release/wangEditor.min.JS"></script>
其中，wangEditor.min.css是WangEditor的樣式文件，wangEditor.min.js是WangEditor的主要Javascript文件。
三、創建頁面
在我們需要使用WangEditor的頁面中，我們需要創建一個用來顯示編輯器的div容器，并設置一個ID。例如：
<div id="editor"></div>
四、初始化WangEditor
在頁面加載完成后，我們需要對WangEditor進行初始化，為其設置相關的參數。以下是一個簡單的示例：
<script type="text/javascript"> var editor = new wangEditor('#editor'); editor.create(); </script>
其中，#editor是我們設置的div的ID。通過var editor = new wangEditor(‘#editor’);進行實例化，然后通過editor.create()方法初始化編輯器。此時，我們的頁面就可以使用WangEditor富文本編輯器了。
五、設置編輯器參數
除了初始化編輯器外，我們還可以根據需要設置編輯器的參數。以下是一些示例，大家可以根據需求自行選擇：
設置編輯器的寬度和高度
var editor = new wangEditor('#editor'); editor.config.height = 500; //設置編輯器高度 editor.config.width = '100%'; //設置編輯器寬度
設置編輯器的字體顏色和背景顏色
var editor = new wangEditor('#editor'); editor.config.colors = [ //設置顏色選項 '#000000', '#eeece0', '#1c487f', '#4d80bf', '#c9c9c9', '#999999', '#005bac', '#ccb8b8', '#7f7f7f', '#f5f5f5', '#c3d69b', '#acc8cc', '#d5e8d4', '#f6cfca', '#ff5555' ]; editor.config.menus = [ 'forecolor', //字體顏色 'bgcolor' //背景顏色 ];
設置編輯器的字體
var editor = new wangEditor('#editor'); editor.config.fontNames = [ '微軟雅黑', '宋體', 'Arial', 'Tahoma', 'Verdana' ];
設置上傳圖片的接口
var editor = new wangEditor('#editor'); editor.config.uploadImgUrl = '/upload' //上傳圖片接口的URL
六、獲取編輯器中的內容
在用戶完成編輯后，我們需要獲取編輯器中的內容。以下是一個簡單的示例：
<script type="text/javascript"> var editor = new wangEditor('#editor'); editor.create(); //獲取編輯器中的內容 var content = editor.txt.html(); </script>
其中，editor.txt.html()方法返回編輯器中的HTML字符串。
總結
