php UEditor 百度エディターのインストール方法と使い方を詳しく紹介

この記事では主にUEditor Baidueditorインストールを紹介し、使用方法を共有します。必要な友達は参考にしてください。

1. 公式 Web サイトから完全なソース コード パッケージをダウンロードし、任意のディレクトリに解凍します。解凍されたソース コード のディレクトリ構造 は次のとおりです:

_examples: エディターのフル バージョンのサンプル ページ
_demos : エディターのさまざまな用途 ケース
ダイアログ: ポップアップ ダイアログ ボックスに対応するリソースと JS ファイル
テーマ: スタイル 写真 とスタイル ファイル
サーバー: PHP、JSP およびサーバー側に関連するその他のファイル操作
サードパーティ: サードパーティのプラグイン
edi​​tor_all.js: _src ディレクトリ内のすべてのファイルのパッケージ化されたファイル
editor_all_min.js: editor_all.js ファイルの圧縮バージョン。以下の目的でのみ使用することをお勧めします。正式なデプロイメント
editor_config.js: エディターの 設定ファイル 、提案とエディターの例 ページは同じディレクトリに配置されます

2. UEditor を実際のプロジェクト (UETest) にデプロイする手順:

ステップ 1: UEditor 関連のリソースを保存するフォルダーをプロジェクトの任意のフォルダーに作成します。ファイルのディレクトリはプロジェクトのルート ディレクトリに作成され、ueditor という名前が付けられます。
ステップ 2: ダイアログ、テーマ、サードパーティ、editor_all をコピーします。 js と editor_config.js を ueditor フォルダーにコピーし、ueditor ディレクトリを除く残りのファイルは特定のプロジェクト ファイルであり、ここでは例としてのみリストします。
ステップ 3: 簡単にするために、ルート ディレクトリは、UEditor の完全バージョンを表示するページとして使用されます。まず、エディターに必要な 3 つの エントリ ファイル をインポートします。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/ueditor.css" rel="external nofollow" >

ステップ 4: 次に、index.php ファイルにエディター インスタンスとその DOM コンテナーを作成します。具体的なコード例は次のとおりです:

<p id="myEditor"></p>
<script type="text/javascript">
 var editor = new baidu.editor.ui.Editor();
 editor.render("myEditor");
</script>

最後のステップ: エディター インスタンスの先頭に次のコードを追加します:

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;ueditor/&#39;;//此为ueditor相对于实例页面的路径
</script>

上記は相対パスですが、次のような絶対パスも使用できます。

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;/uc/ueditor/&#39;;//此为ueditor相对于网站根目录的路径
</script>

この時点では、Web サイトのルート ディレクトリに対する絶対パスを使用することをお勧めします。完全なエディター インスタンスがプロジェクトにデプロイされました!

最後のステップは、次の場所を変更することによっても実行できます (js を理解していない人にはお勧めできません):
「URL= window.UEDITOR_HOME_URL||」を探します。 /UETest/ueditor/ editor_config.js を該当のパスに変更します。 もちろん、ここで変更すれば、window.UEDITOR_HOME_URL が存在する必要はありません。インスタンス ページがセットアップされます。

//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

3. 具体的な使用方法

1. エディターのコンテンツをバックエンドに送信します

シナリオ 1: エディターが配置されているフォームに送信 ボタン があり、これをクリックすることで送信アクションが完了します。ボタン。 このシナリオは、最も一般的な状況に適しています。注意すべき大きな問題はありません。注意すべき点は 3 つだけです。
1) デフォルトでは、バックグラウンドに送信されるフォームの名前は「editorValue」です。 editor_config.js で設定できる textarea のパラメーター名。
2) name
属性 をコンテナ タグ (つまり、script タグ) に設定して、editor_config.js のデフォルト設定をオーバーライドできます。コード例は次のとおりです。ここでの myContent は、新しい送信フォーム名になります:

<form action="" method="post">
 <script type="text/plain" id="editor" name="myContent">
 </script>
 <input type="submit" name="submit" value="提交">
</form>

3) バックエンド受信プログラムは、次の方法でエディターでリッチ テキスト コンテンツを取得できます。

//PHP获取：
$_POST["myContent"]
   
//JSP获取：
request.getParameter("myContent");
   
//ASP获取：
request("myContent");
   
//NET获取:
context.Request.Form["myContent"];

シナリオ 2: エディターが配置されているフォームには送信ボタンがなく、送信アクションは外部のイベントによってトリガーされます。 このシナリオは、フロントエンドの対話が多いサイトに適しています。主に注意すべきことは、フォーム送信アクションをトリガーする前にエディターのコンテンツの同期操作を実行することです。一般的なコード パターンは次のとおりです:

//满足提交条件时同步内容并提交，此处editor为编辑器实例
if(editor.hasContent()){ //此处以非空为例
 editor.sync();  //同步内容
 someForm.submit(); //提交Form
}

ここで editor はエディタ インスタンス

オブジェクトです。

シナリオ 3: エディターはどのフォームにも存在せず、送信アクションは外部イベントによってトリガーされます。

このシナリオはあまり使用されませんが、特殊な状況では必要になる場合があります。 UEditor は、対応する処理ソリューションも提供します。基本的なロジックはシナリオ 2 と同じですが、同期操作を実行するときに、editor.sync(myFormID) など、送信されたフォームの ID を渡す必要がある点が異なります。その他はシーン2と同じです。

2. データベースからコンテンツを読み取ります

<script type="text/plain" id="editor">
 //从数据库中取出文章内容打印到此处
</script>

ここでは、script タグがエディターのコンテナー オブジェクトとして使用され、そのタイプがプレーン テキストに設定されているため、タグ内での JS コードの実行が回避され、一部の生徒の問題が解決されます。従来の textarea タグを使用すると、コンテナによって引き起こされる追加のトランスコーディング問題として機能します。

3. エディターのコンテンツの初期化 (つまり、エディターでのリッチ テキストの設定)

新しい記事を作成し、エディターでプロンプト、挨拶、その他のコンテンツをプリセットします。
editor_config.js ファイルでInitialContent パラメータを見つけて、その値を必要なプロンプトまたは挨拶 (initialContent: 'Welcome to UEditor!') に設定します。

4. 画像のアップロード

新しいサイトの場合、つまり、画像のパスがエディター自体のパスを採用している場合、古いサイトに既に独自の画像がある場合は、変更する必要はありません。フォルダーを変更するには、次の ueditor/php フォルダーを変更する必要があります:

以上がphp UEditor 百度エディターのインストール方法と使い方を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。