How to use WangEditor rich text editor in ThinkPHP6?

With the rapid development of the Internet, rich text editors have become an indispensable part of the website development process. As a domestic open source rich text editor, WangEditor has excellent features such as ease of use, lightweight, and rich functions, and has gradually become the first choice of many developers.

ThinkPHP6, as one of the most mainstream PHP development frameworks in China, also provides a wealth of extension functions that can help developers quickly integrate the WangEditor rich text editor. This article will introduce in detail how to use WangEditor rich text editor in ThinkPHP6.

1. Download WangEditor

First, we need to download the WangEditor editor source code. You can download the latest version from WangEditor's official website (https://www.wangeditor.com/). After unzipping the source code, copy the directory to the public directory in our ThinkPHP6 project.

2. Introduce WangEditor resource files

In the pages where we need to use WangEditor, we need to introduce the following resource files:

<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>

Among them, wangEditor.min.css is WangEditor style file, wangEditor.min.js is the main Javascript file of WangEditor.

3. Create the page

In the page where we need to use WangEditor, we need to create a div container to display the editor and set an ID. For example:

<div id="editor"></div>

4. Initialize WangEditor

After the page is loaded, we need to initialize WangEditor and set relevant parameters for it. The following is a simple example:

<script type="text/javascript">
    var editor = new wangEditor('#editor');
    editor.create();
</script>

where #editor is the ID of the div we set. Instantiate through var editor = new wangEditor('#editor');, and then initialize the editor through the editor.create() method. At this point, our page can use the WangEditor rich text editor.

5. Set editor parameters

In addition to initializing the editor, we can also set the editor parameters as needed. The following are some examples, you can choose according to your needs:

Set the width and height of the editor

var editor = new wangEditor('#editor');
editor.config.height = 500;    //设置编辑器高度
editor.config.width = '100%';  //设置编辑器宽度

Set the font color and background color of the editor

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'     //背景颜色
];

Set editing The font of the editor

var editor = new wangEditor('#editor');
editor.config.fontNames = [
    '微软雅黑', '宋体', 'Arial', 'Tahoma', 'Verdana'
];

Set the interface for uploading pictures

var editor = new wangEditor('#editor');
editor.config.uploadImgUrl = '/upload'  //上传图片接口的URL

6. Get the content in the editor

After the user completes editing, we need to get the content in the editor . The following is a simple example:

<script type="text/javascript">
    var editor = new wangEditor('#editor');
    editor.create();

    //获取编辑器中的内容
    var content = editor.txt.html();   
</script>

Among them, the editor.txt.html() method returns the HTML string in the editor.

Summary

The above is a detailed introduction to using the WangEditor rich text editor in ThinkPHP6. By simply introducing resource files, creating pages, initializing the editor, and setting parameters, we can quickly integrate the WangEditor rich text editor and easily implement rich text editing functions.

The above is the detailed content of How to use WangEditor rich text editor in ThinkPHP6?. For more information, please follow other related articles on the PHP Chinese website!