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

I. 公式サイトからソースコード一式をダウンロードし、任意のディレクトリに解凍し、解凍したソースコードのディレクトリ構成は以下の通りです。

_examples。製品版エディタのサンプルページ
デモ: エディタの様々な使用例
ダイアログ：ポップアップダイアログに対応したリソースとJSファイル
テーマ：スタイル画像とスタイルファイル
サーバーを使用します。PHP、JSP、その他サーバーサイドの操作に関わるファイル
third-party：サードパーティ製プラグイン
editor_all.js: _srcディレクトリ内の全ファイルのパッケージファイル
editor_all_min.js: editor_all.js ファイルの圧縮版、公式デプロイに推奨
editor_config.js: エディタの設定ファイル。エディタのインスタンス化ページと同じディレクトリに置くことを推奨します。

II. 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>Editor Full Version Example</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コンテナを作成します。具体的なコード例は以下の通りです。

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

最後のステップ：エディタインスタンスのトップに以下のコードを追加します。

<script type="text/javascript">
 window.UEDITOR_HOME_URL='ueditor/';//this is the path to ueditor relative to the instance page
</script>

上記は相対パスを使用していますが、例えばサイトのルートからの相対的な絶対パスを使用することもできます。

<script type="text/javascript">
 window.UEDITOR_HOME_URL='/uc/ueditor/';//this is the path of ueditor relative to the root of the site
</script>

サイトのルートからの相対的な絶対パスを使用することをお勧めします。
この時点で、完全なエディタインスタンスがプロジェクトにデプロイされました!
最後のステップは、以下のように修正することでも実現できます（jsを知らない人にはお勧めしません）。
/UETest/ueditor/ editor_config.js で "URL= window.UEDITOR_HOME_URL||" を探し、該当するパスに変更します。もちろん、ここで変更すれば、インスタンスページで window.UEDITOR_HOME_URL は設定する必要はありません。

// It is highly recommended to configure absolute paths in this way
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

III. 具体的な使用方法

1. エディタコンテンツをバックエンドに送信する
シナリオ1：エディターが配置されているフォームに送信ボタンがあり、このボタンをクリックすることで送信アクションが行われます。
このシナリオは、最も一般的な状況に適用されるもので、大きな問題点はなく、3つの注意点のみです。
1) デフォルトでバックエンドに送信されるフォームの名前は "editorValue" で、これは editor_config.js でパラメータ名 textarea で設定することが可能です。
2) コンテナタグ（つまりscriptタグ）にname属性を設定することで、editor_config.jsのデフォルト設定をオーバーライドすることが可能です。コード例は以下のとおりで、myContentが新しい投稿フォームの名前になります。

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

3) バックエンドの受信者は、いくつかの方法でエディターのリッチテキストコンテンツを取得することができます。

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

シナリオ 2: エディターが配置されているフォームに送信ボタンがなく、送信アクションが外部イベントによってトリガーされる場合。
このシナリオは、フロントエンドでのインタラクションが多いサイトに適しています。留意すべき点は、フォーム送信アクションを起動する前にエディタのコンテンツ同期を実行することです。一般的なコードパターンを以下に示します。

//Sync the content and submit when the submit condition is met, here editor is the editor instance
if(editor.hasContent()){ //here is a non-empty example
 editor.sync(); //Sync content
 someForm.submit(); // submit the Form
}

ここでeditorはエディタインスタンスオブジェクトです。

シナリオ 3: エディタはどのフォームにもなく、投稿アクションは外部イベントによってトリガーされます。

このシナリオはあまり使われませんが、特殊なケースで必要になることがあります。uEditも対応する処理ソリューションを提供しており、基本ロジックはシナリオ2と同じですが、同期操作を行うときに、editor.sync(myFormID)のように、送信フォームのIDを渡す必要があることを除けば、シナリオ2と同じです。あとはシナリオ2と同じです。
2. データベースからコンテンツを読み込む

<script type="text/plain" id="editor">
 //Print the article content from the database here
</script>

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

3. エディターコンテンツの初期化（エディターにリッチテキストを設定する） 3．

あらかじめプロンプトや挨拶などを設定した新しい記事をエディターで書く。
editor_config.jsファイルのinitialContentパラメータを探し、その値を希望のプロンプトやグリーティングに設定します（例: initialContent:'Welcome to UEditor!

4. 画像のアップロード

新しいサイト、つまり画像へのパスがエディター自身のパスである場合は、変更する必要はありません。旧サイトにすでに独自の画像フォルダがある場合、uiditor/phpフォルダ内の以下のファイルを変更する必要があります。