About using the rich text editor wangEditor3 in ThinkPHP6.0-ThinkPHP-php.cn

About using the rich text editor wangEditor3 in ThinkPHP6.0

藏色散人

Release： 2020-11-01 16:20:04

forward

3707 people have browsed it

The following tutorial column from ThinkPHP will introduce to you how to use the rich text editor wangEditor3 in ThinkPHP6.0. I hope it will be helpful to friends in need!

UEditor is a WYSIWYG rich text web editor developed by Baidu web front-end R&D department.

It is lightweight, customizable, and focused on user experience. The open source is based on the MIT license and allows Feel free to use and modify the code.

Unfortunately, downloading from the official website was too slow, and the interface was a bit retro, so I gave up and used the lightweight wangEditor3.

1. Download

Download from the manual

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

Import into the project

2. Create in the project

<!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(&#39;#editor&#39;)
        // 或者 var editor = new E( document.getElementById(&#39;editor&#39;) )
        editor.create()
    </script>
</body>
</html>

Copy after login

The image upload option uses base64 encoding to directly insert the image into the content, eliminating the need to configure local upload

Ajax is not used, so a hidden text box is added to the form

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

Copy after login

After configuring the onchange function, the execution of the onchange function will be automatically triggered after the content changes caused by user operations (mouse clicks, keyboard typing, etc.).

Rich text content will also be submitted when submitting.

3. Save the text to the database

The above is the detailed content of About using the rich text editor wangEditor3 in ThinkPHP6.0. For more information, please follow other related articles on the PHP Chinese website!