ホームページ > 記事 > ウェブフロントエンド > 使いやすい HTML エディター (UEditor) のチュートリアル
使いやすい HTML エディター (UEditor) のチュートリアル
- 零下一度オリジナル
- 2017-05-04 14:45:235368ブラウズ
HTMLエディタに関しては、CKeditorのバージョンアップ版であるFCKeditor、最近はBaiduのUEditorを試しています。それに比べれば、UEditor の構成は比較的シンプルで、すぐに始めることができ、ドキュメントやサンプルも充実していると今でも感じます。そこで、ここでは UEditor1.2.3.0PHP 版 UTF-8 版を例にして、UEditor の使用プロセスを整理します。
1. 1つ目はUEditorのドキュメント構造です
_examples: エディターのさまざまなバージョンのサンプルページ
_src: JSファイル
ダイアログ:ポップアップダイアログ ボックスに対応するリソースと JS ファイル
lang: 言語パックファイル
PHP: ファイルアップロード処理、リモート画像キャプチャ、画像オンライン管理、スクリーンショット関連ファイル
テーマ: スタイル画像とスタイル ファイル
third-party: サードパーティのプラグイン
editor_all.js: _src ディレクトリ内のすべてのファイルのパッケージ化されたファイル
editor_all_min.js: editor_all の圧縮バージョン.js ファイル (正式な展開時にのみ使用可能)
editor_config.js: エディター構成ファイル
2. システム構成
UEditor 構成は、システムのデフォルト構成と 2 つのタイプに分類できます。ユーザー定義の構成。 システムのデフォルト設定は、対応する各コアまたはプラグイン ファイルに分散されており、ユーザーには見えません。ユーザーがカスタム構成をコメントアウトした場合に機能します。 ユーザー定義の設定には 2 つのタイプがあり、1 つは editor_config.js ファイルにあり、システムのデフォルト設定よりも高い優先順位を持っています。もう 1 つは、エディターのインスタンス化時に渡されるパラメーターにあり、最も高い優先順位を持っています。 デフォルトでは、UEditor は editor_congfig.js で省略できるすべての設定項目をコメント化し、コメントが解除されている場合は、コメント化されていない設定項目が優先され、ユーザーはそれに応じて実際の項目を入力する必要があります。プロジェクトに。
以下は私が定義した簡単な設定です:
<script type="text/javascript">
// 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置
var editorOption = {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下四个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo']]
//更多其他参数，请参考editor_config.js中的配置项
};最も重要な設定は、画像のアップロード、処理、その他のパスに関連する 28 行目の URL パラメータの設定です。 Web サイトの相対パスまたは絶対パスで uediotr として構成されます。たとえば、プロジェクト名が t でルート ディレクトリが www の場合、URL 値は次のように設定されます:
URL = window.UEDITOR_HOME_URL||"/t/UEditor/";
3.引入配置文件，JS文件和主题CSS文件
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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">
4.创建编辑器实例及其DOM容器
<form action="" method="post" name="myForm"> <!--以下引入UEditor编辑器界面--> <script type="text/plain" id="editor" name="myContent"></script> //此处不设置name，则editor默认名字为"editorValue"，可以在 //editor_config.js中配置参数textarea，或者在此处设置 <input type="submit" name="submit" value="upload"/> </form>
5.设置选项并且渲染编辑器
如果需要有不同设置的ueditor，可以分别定义之后设置不同的自定义选项再渲染编辑器，
<script type="text/plain" id="myEditor" style="width:800px">
</script>
<script type="text/plain" id="myEditor1" style="width:800px">
<p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( 'myEditor1' );
</script>6.前后台数据交互
对于PHP可以直接用$_POST['ueditorName']获取编辑器的值，其中ueditorName的值为初始化编辑器时ueditor的name值。
以下为完整的渲染2个ueditor的代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor</title>
<!--以下为引入UEditor资源部分-->
<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">
<!--以上为引入UEditor资源部分-->
</head>
<body>
<form action="test.php" method="post" name="myForm">
<!--以下引入UEditor编辑器界面-->
<script type="text/plain" id="myEditor" name="myContent">这是一个测试还是一个测试</script>
<input type="submit" name="submit" value="upload"/>
</form>
<script type="text/plain" id="myEditor1"><p>这里我可以写一些输入提示</p></script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此处的参数值为编辑器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( 'myEditor1' );
</script>
</body>
</html【相关推荐】
1. 免费html在线视频教程
2. html开发手册
以上が使いやすい HTML エディター (UEditor) のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。