ソースコード download_jquery を使用した jquery に基づくカスタマイズ可能な Web オンラインリッチテキストエディター-jsチュートリアル-php.cn

ソースコード download_jquery を使用した jquery に基づくカスタマイズ可能な Web オンラインリッチテキストエディター

WBOY

リリース： 2016-05-16 15:31:50

オリジナル

1460 人が閲覧しました

今日は、素晴らしい WEB オンラインリッチテキストエディター UMeditor を紹介します。これは、Baidu Web フロントエンドの研究開発部門が開発した WYSIWYG リッチテキスト Web エディター UEditor のミニバージョンです。スケーラブルでカスタマイズ可能で、ユーザーエクスペリエンスに重点を置き、コードの自由な使用と変更が可能で、フロントエンドの迅速かつシンプルな返信ボックスやバックエンドのコンテンツエディターに適しています。

オンラインプレビューソースコードのダウンロード

使い方は？

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 は、主にアップロードされた画像の処理に使用されるサーバーのいくつかの言語バージョンを提供します。ユーザーは、アップロードパス、アップロードファイルの種類の制限、サイズの制限などを設定できます。設定して適用するだけです。