使いやすい HTML エディター (UEditor) のチュートリアル-htmlチュートリアル-php.cn

使いやすい HTML エディター (UEditor) のチュートリアル

零下一度

リリース： 2017-05-04 14:45:23

オリジナル

5402 人が閲覧しました

HTMLエディタに関しては、CKeditorのバージョンアップ版であるFCKeditor、最近はBaiduのUEditorを試しています。それに比べれば、UEditor の構成は比較的シンプルで、すぐに始めることができ、ドキュメントやサンプルも充実していると今でも感じます。そこで、ここでは UEditor1.2.3.0PHP 版 UTF-8 版を例にして、UEditor の使用プロセスを整理します。

1. 1つ目はUEditorのドキュメント構造です

HTML编辑器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:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;]]
//更多其他参数，请参考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( &#39;myEditor&#39; ); //此处的参数值为编辑器的id值

var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;,&#39;Bold&#39;]],
//focus时自动清空初始化时的内容
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( &#39;myEditor1&#39; );
</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( &#39;myEditor&#39; ); //此处的参数值为编辑器的id值
    
    var editor_a1 = new baidu.editor.ui.Editor({
    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;,&#39;Bold&#39;]],
    //focus时自动清空初始化时的内容
    autoClearinitialContent:true,
    //更多其他参数，请参考editor_config.js中的配置项
});
    editor_a1.render( &#39;myEditor1&#39; );
</script>
</body>
</html

ログイン後にコピー

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上が使いやすい HTML エディター (UEditor) のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。