ThinkPHP6.0 でのリッチテキストエディター wangEditor3 の使用について-ThinkPHP-php.cn

ThinkPHP6.0 でのリッチテキストエディター wangEditor3 の使用について

藏色散人

リリース： 2020-11-01 16:20:04

転載

3771 人が閲覧しました

ThinkPHP の次のチュートリアルコラムでは、ThinkPHP6.0 でリッチテキストエディター wangEditor3 を使用する方法を紹介します。困っている友人の役に立てば幸いです。

UEditor は、Baidu Web フロントエンド R&D 部門によって開発された WYSIWYG リッチテキスト Web エディタです。

軽量で、カスタマイズ可能で、ユーザーエクスペリエンスに重点を置いています。オープンソースは MIT に基づいています。ライセンスを取得し、コードを自由に使用および変更することができます。

残念ながら、公式サイトからのダウンロードは遅かったのと、インターフェースがちょっとレトロだったので諦めて軽量なwangEditor3を使いました。

1. ダウンロード

マニュアルからダウンロード

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

プロジェクトにインポート

2. プロジェクトに作成

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

ログイン後にコピー

画像アップロードオプションでは、base64 エンコードを使用して画像をコンテンツに直接挿入するため、ローカルアップロードを構成する必要がなくなります

Ajax は使用されないため、非表示のテキストボックスが追加されますフォーム

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

ログイン後にコピー

onchange関数を設定した後、ユーザーの操作(マウスクリック、キーボード)によってコンテンツが変更された後、onchange関数の実行が自動的にトリガーされます。タイピングなど）。

送信時にリッチテキストコンテンツも送信されます。

3. テキストをデータベースに保存します

以上がThinkPHP6.0 でのリッチテキストエディター wangEditor3 の使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ThinkPHP6.0 でのリッチ テキスト エディター wangEditor3 の使用について

ThinkPHP6.0 でのリッチテキストエディター wangEditor3 の使用について