Bagaimana untuk menggunakan editor teks kaya WangEditor dalam ThinkPHP6?

Dengan perkembangan pesat Internet, penyunting teks yang kaya telah menjadi bahagian yang amat diperlukan dalam proses pembangunan laman web. Sebagai penyunting teks kaya sumber terbuka domestik, WangEditor mempunyai ciri yang sangat baik seperti kemudahan penggunaan, ringan dan fungsi yang kaya, dan secara beransur-ansur telah menjadi pilihan pertama banyak pembangun.

ThinkPHP6, sebagai salah satu rangka kerja pembangunan PHP paling arus perdana di China, juga menyediakan pelbagai fungsi sambungan yang boleh membantu pembangun menyepadukan editor teks kaya WangEditor dengan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan editor teks kaya WangEditor dalam ThinkPHP6.

1. Muat turun WangEditor

Mula-mula, kita perlu memuat turun kod sumber editor WangEditor. Anda boleh memuat turun versi terkini dari laman web rasmi WangEditor (https://www.wangeditor.com/). Selepas membuka zip kod sumber, salin direktori ke direktori awam dalam projek ThinkPHP6 kami.

2. Memperkenalkan fail sumber WangEditor

Di halaman yang kita perlu menggunakan WangEditor, kita perlu memperkenalkan fail sumber berikut:

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

Antaranya, wangEditor.min .css ialah fail gaya WangEditor, wangEditor.min.js ialah fail Javascript utama WangEditor.

3. Cipta halaman

Dalam halaman di mana kita perlu menggunakan WangEditor, kita perlu mencipta bekas div untuk memaparkan editor dan menetapkan ID. Contohnya:

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

4. Mulakan WangEditor

Selepas halaman dimuatkan, kita perlu memulakan WangEditor dan menetapkan parameter yang berkaitan untuknya. Berikut ialah contoh mudah:

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

di mana #editor ialah ID div yang kami tetapkan. Semerta melalui var editor = wangEditor baru('#editor'); dan kemudian mulakan editor melalui kaedah editor.create(). Pada ketika ini, halaman kami boleh menggunakan editor teks kaya WangEditor.

5. Tetapkan parameter editor

Selain memulakan editor, kami juga boleh menetapkan parameter editor mengikut keperluan. Berikut adalah beberapa contoh, anda boleh memilih mengikut keperluan anda:

Tetapkan lebar dan ketinggian editor

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

Tetapkan warna fon dan warna latar belakang 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'     //背景颜色
];

Tetapkan pengeditan Fon editor

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

Tetapkan antara muka untuk memuat naik imej

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

6 Dapatkan kandungan dalam editor

Selepas pengguna selesai mengedit, kami perlu untuk mendapatkan kandungan dalam editor . Berikut ialah contoh mudah:

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

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

Di mana, kaedah editor.txt.html() mengembalikan rentetan HTML dalam editor.

Ringkasan

Di atas ialah pengenalan terperinci untuk menggunakan editor teks kaya WangEditor dalam ThinkPHP6. Dengan hanya memperkenalkan fail sumber, mencipta halaman, memulakan editor dan menetapkan parameter, kami boleh menyepadukan editor teks kaya WangEditor dengan cepat dan melaksanakan fungsi penyuntingan teks kaya dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan editor teks kaya WangEditor dalam ThinkPHP6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!