ホームページ >ウェブフロントエンド >jsチュートリアル >jquery カスタマイズ可能なオンライン UEditor editor_jquery
jquery カスタマイズ可能なオンライン UEditor editor_jquery
- WBOYオリジナル
- 2016-05-16 15:31:491561ブラウズ
UMeditor は、Baidu の Web フロントエンド研究開発部門が開発した WYSIWYG リッチ テキスト Web エディタ UEditor のミニバージョンで、軽量でカスタマイズ可能で、ユーザー エクスペリエンスを重視しており、コードの自由な使用と変更が可能で、フロント エンドに適しています。 - 迅速かつシンプルな返信ボックスまたはバックエンド コンテンツ エディター。
使用法:
このプラグインは Baidu の「FEX フロントエンド R&D チーム」によって開発されたため、強力で詳細な中国語の公式ドキュメントが用意されています。この記事の目的は、このような優れたプラグインがあることを友人に知らせることです。にあるため、ドキュメントマニュアル、ダウンロード、サンプルはすべて公式へのリンクです。
必要な言語バージョンをダウンロードして解凍し、解凍したディレクトリに「demo」という名前の HTML ファイルを作成します。コードは次のとおりです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
上記の作業が完了したら、demo.html をブラウザで開きます。次の画面が表示されたら、最初のデプロイは成功しました。
使い方は？別の詳細な使用法:
demo.html ファイルを作成します。まず、エディターを追加する必要がある場所に次のコードを追加して、エディターの幅と高さを設定します。
<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> <p>内容区域</p> </script>
次に、UMeditor 関連の js および css ファイルを読み込みます。関連ファイルはこのサイトからダウンロードするか、UMeditor 公式 Web サイトに直接アクセスして最新バージョンをダウンロードできます。
<script src="http://libs.useso.com/js/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script> <link href="themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">
次に、エディターの呼び出しを開始します。
<script type="text/javascript">
var um = UM.getEditor('myEditor');
</script>
これで、ブラウザを開いてエディターの効果をプレビューできます。
カスタマイズオプション
UMeditor には、ユーザーが独自のプロジェクトのニーズに応じてカスタマイズできる豊富なオプション設定が用意されています。
次のコードを使用してエディターでコンテンツを取得できます。また、プレーン テキストのコンテンツを取得することもできます。
UM.getEditor('myEditor').getContent();
エディターにコンテンツがあるかどうかを確認するには、次のコードを使用できます:
var cont = UM.getEditor('myEditor').hasContents();
if(cont==true){
alert('有内容。');
}else{
alert('无内容。');
}
エディターをフォームに配置し、アクション パスを設定すると、フォームを送信してエディター内のコンテンツを送信できます。例:
<form action="server.php" method="post"> <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> <button type="submit" class="btn">提交</button> </form>
ツールバーで使用できるツール アイコンを設定できます。たとえば、以下はよく使用されるいくつかのツール アイコンの簡単なカスタマイズです。
var editor = UM.getEditor('container',{
toolbar:
['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map']
});
UMeditor は、テーブル編集、リスト レイアウト、マルチメディア挿入、画像アップロード、マップ呼び出しなど、ニーズに応じてカスタマイズできる多くのツールを提供します。 UMeditor は、主にアップロードされた画像の処理に使用されるサーバーのいくつかの言語バージョンを提供します。ユーザーは、アップロード パス、アップロード ファイルの種類の制限、サイズの制限などを設定できます。設定して適用するだけです。
使用効果:
上記がこの記事の全内容です。これが、皆さんが UMeditor エディターをより良く使用するのに役立つことを願っています。