PHP UEditor Baidu エディタのインストールと使用方法の共有

この記事では主に、UEditor Baidu エディターのインストール方法と使用方法を紹介します。必要な友達は参考にしてください。 1. 公式 Web サイトから完全なソース コード パッケージをダウンロードし、解凍されたソース コードのディレクトリ構造。は次のとおりです:

_examples: エディターのフルバージョンのサンプルページ _demos: エディターのさまざまな使用例

dialogs: ポップアップダイアログボックスに対応するリソースと JS ファイル

主題: スタイル画像とスタイルファイル
サーバー: サーバー側の操作を含む PHP、JSP、およびその他のファイル
サードパーティ: サードパーティのプラグイン
editor_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: 簡単にするために、ルート ディレクトリの Index.php ページが、UEditor のフル バージョンを表示するエディタのインスタンス化ページとして使用されます。 Index.php ファイルで、まずエディターに必要な 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>

上記は相対パスですが、Web サイトのルート ディレクトリからの相対パスを使用することもできます。例:

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

Web サイトのルートからの相対パスを使用することをお勧めします。

この時点で、完全なエディター インスタンスがプロジェクトにデプロイされました。

最後のステップは、次の場所を変更することによっても実行できます (js を理解していない人には推奨しません):

/UETest/ueditor/ editor_config.js で「URL= window.UEDITOR_HOME_URL||」を探し、次のように変更します。もちろん、対応するパス。これを変更した場合、インスタンス ページで 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 Baidu エディタのインストールと使用方法の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。