エディタの初期化とフロントエンド設定
UEditor を Web ページに組み込むためには、必要な JavaScript ファイルを読み込み、特定の ID を持つテキストエリアを用意する必要があります。まず、HTML のヘッド部分で以下のスクリプトを読み込みます。
<head>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script>
</head>次に、ボディ部分にエディタを表示するためのコンテナ要素を配置します。この際、ID 属性は後ほどの初期化スクリプトと一致させる必要があります。
<body>
<textarea id="post_content" name="article_body" style="width:800px;height:400px;"></textarea>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
// ID 'post_content' に紐づけてエディタを生成
const editorInstance = UE.getEditor('post_content');
});
</script>
</body>フォーム送信時、コンテンツは name 属性に指定された値（上記例では article_body）としてサーバーへ POST データが送出されます。
バックエンド設定ファイルの編集
画像やファイルの保存先ディレクトリを変更するには、PHP バックエンド側の設定ファイルを修正します。通常、このファイルは ueditor1_4_3-utf8-php/php/config.json に存在します。デフォルトではアップロードパスが設定されていますが、プロジェクトの構造に合わせて変更可能です。
例えば、すべてのアップロードファイルを /public ディレクトリ配下で管理したい場合、imagePathFormat などのパス設定値を変更します。以下は設定ファイルの主要な抜粋です。
{
/* 画像アップロードに関する設定 */
"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imageMaxSize": 2048000,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"imageCompressEnable": true,
"imageCompressBorder": 1600,
"imageInsertAlign": "none",
"imageUrlPrefix": "",
/* 保存パスの定制：public ディレクトリ配下に統一 */
"imagePathFormat": "/public/assets/images/{yyyy}{mm}{dd}/{time}{rand:6}",
/* スクロール描画（涂鸦）の設定 */
"scrawlActionName": "uploadscrawl",
"scrawlFieldName": "upfile",
"scrawlPathFormat": "/public/assets/images/{yyyy}{mm}{dd}/{time}{rand:6}",
"scrawlMaxSize": 2048000,
"scrawlUrlPrefix": "",
"scrawlInsertAlign": "none",
/* 画面キャプチャの設定 */
"snapscreenActionName": "uploadimage",
"snapscreenPathFormat": "/public/assets/images/{yyyy}{mm}{dd}/{time}{rand:6}",
"snapscreenUrlPrefix": "",
"snapscreenInsertAlign": "none",
/* リモート画像抓取の設定 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage",
"catcherFieldName": "source",
"catcherPathFormat": "/public/assets/images/{yyyy}{mm}{dd}/{time}{rand:6}",
"catcherUrlPrefix": "",
"catcherMaxSize": 2048000,
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
/* 動画アップロードの設定 */
"videoActionName": "uploadvideo",
"videoFieldName": "upfile",
"videoPathFormat": "/public/assets/videos/{yyyy}{mm}{dd}/{time}{rand:6}",
"videoUrlPrefix": "",
"videoMaxSize": 102400000,
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
],
/* 一般ファイルアップロードの設定 */
"fileActionName": "uploadfile",
"fileFieldName": "upfile",
"filePathFormat": "/public/assets/files/{yyyy}{mm}{dd}/{time}{rand:6}",
"fileUrlPrefix": "",
"fileMaxSize": 51200000,
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
],
/* 画像リスト取得の設定 */
"imageManagerActionName": "listimage",
"imageManagerListPath": "/public/assets/images/",
"imageManagerListSize": 20,
"imageManagerUrlPrefix": "",
"imageManagerInsertAlign": "none",
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
/* ファイルリスト取得の設定 */
"fileManagerActionName": "listfile",
"fileManagerListPath": "/public/assets/files/",
"fileManagerUrlPrefix": "",
"fileManagerListSize": 20,
"fileManagerAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
]
}パスフォーマット文字列には、{time} や {rand:6} といったプレースホルダーが使用可能です。これらはそれぞれタイムスタンプやランダムな数値に置換され、ファイル名の重複を防ぐ役割を果たします。設定変更後は、指定されたディレクトリに書き込み権限が付与されていることを確認してください。