PHP UEditor Baidu エディタのインストールと使用方法の共有
- 不言オリジナル
- 2018-06-02 10:55:543944ブラウズ
この記事では主に、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 ディレクトリを除く残りのファイルは特定のプロジェクト ファイルであり、ここでは例としてのみリストされています。
<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='ueditor/';//此为ueditor相对于实例页面的路径 </script>上記は相対パスですが、Web サイトのルート ディレクトリからの相対パスを使用することもできます。例:
<script type="text/javascript"> window.UEDITOR_HOME_URL='/uc/ueditor/';//此为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 タグを使用すると、コンテナによって引き起こされる追加のトランスコーディング問題として機能します。
editor_config.js ファイルでInitialContent パラメータを見つけて、その値を必要なプロンプトまたは挨拶 (initialContent: 'Welcome to UEditor!') に設定します。
4. 画像のアップロード
以上がPHP UEditor Baidu エディタのインストールと使用方法の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。