ThinkPHP6 で WangEditor リッチ テキスト エディターを使用するにはどうすればよいですか?

インターネットの急速な発展に伴い、リッチ テキスト エディタは Web サイト開発プロセスに不可欠な部分になりました。 WangEditor は、国産オープンソースのリッチテキストエディタとして、使いやすさ、軽量さ、機能の豊富さなどの優れた特徴を持ち、徐々に多くの開発者に選ばれるようになりました。

ThinkPHP6 は、中国で最も主流の PHP 開発フレームワークの 1 つであり、開発者が WangEditor リッチ テキスト エディターを迅速に統合するのに役立つ豊富な拡張機能も提供します。この記事では、ThinkPHP6 のリッチテキストエディター WangEditor の使い方を詳しく紹介します。

1. WangEditor のダウンロード

まず、WangEditor エディタのソース コードをダウンロードする必要があります。最新バージョンは、WangEditor の公式 Web サイト (https://www.wangeditor.com/) からダウンロードできます。ソース コードを解凍した後、そのディレクトリを ThinkPHP6 プロジェクトのパブリック ディレクトリにコピーします。

2. 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 ファイルです。

3. ページの作成

WangEditor を使用する必要があるページでは、エディターを表示し ID を設定するための div コンテナーを作成する必要があります。例:

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

4. 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 リッチ テキスト エディターを使用できるようになります。

5. エディター パラメーターの設定

エディターの初期化に加えて、必要に応じてエディター パラメーターを設定することもできます。以下にいくつかの例を示します。必要に応じて選択できます。

エディタの幅と高さを設定します

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

6. エディターでコンテンツを取得します

ユーザーが編集を完了したら、エディターでコンテンツを取得する必要があります。以下は簡単な例です:

<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 中国語 Web サイトの他の関連記事を参照してください。