怎樣在ThinkPHP6中使用WangEditor富文本編輯器？-ThinkPHP-PHP中文網

怎樣在ThinkPHP6中使用WangEditor富文本編輯器？

王林

發布： 2023-06-12 08:22:15

原創

1709 人瀏覽過

隨著網路的快速發展，富文本編輯器已經成為了網站開發過程中不可或缺的一部分。而WangEditor作為國內開源的富文本編輯器，其具備易用、輕量、功能豐富等優秀特點，已經逐漸成為了許多開發者的首選。

而ThinkPHP6作為目前國內最主流的PHP開發框架之一，也提供了豐富的擴充功能，可以幫助開發者快速地整合WangEditor富文本編輯器。本文將詳細介紹如何在ThinkPHP6中使用WangEditor富文本編輯器。

一、下載WangEditor

首先，我們需要下載WangEditor編輯器原始碼。最新版可在WangEditor的官方網站（https://www.wangeditor.com/）上下載。解壓縮原始碼後，將目錄複製到我們的ThinkPHP6專案中的public目錄下。

二、引入WangEditor資源檔案

在我們需要使用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字串。

總結

以上就是在ThinkPHP6中使用WangEditor富文本編輯器的詳細介紹。透過簡單地引入資源檔案、建立頁面、初始化編輯器以及設定參數，我們可以快速地整合WangEditor富文本編輯器，輕鬆實現富文本編輯功能。

以上是怎樣在ThinkPHP6中使用WangEditor富文本編輯器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！