この編集者の関連する機能の公式説明を見てみましょう。
1. MACおよびWNDOWSプラットフォームでの一般的な操作のために、標準のホットキーを自動的にバインドできます。
2。ドラッグとドロップして写真を挿入できます。画像のアップロードをサポートします（モバイルデバイスで写真を入手することもできます）
3。音声認識入力（Chromeブラウザのみ）
4.カスタムツールバーを許可します。追加のタグは生成されません。 Webサイトをサポートして、Bootstrap、Font Awesomeなどのツールライブラリの優れた機能を最大限に活用してください。
5。必須のスタイルがない場合、すべてはあなた次第です
6.ブラウザの標準機能、非標準コードなしに依存します。ツールバーとキーボード機能はカスタマイズでき、ブラウザでサポートされているコマンドを実行できます。
7.このエディターは、個別のフレーム、バックアップテキスト領域などを作成しません。可能な限りシンプルに保ち、Divで実行してください。
8。（オプション）テールスペースをクリアします。空のdivとスパンをクリアします
9。最新のブラウザで実行する必要があります（Chrome 26、Firefox 19、Safari 6でテストし、ユーザーはIE10で動作できると報告しています）
10。サポートモバイルブラウザ（iOS 6 iPad/iPhoneおよびAndroid 4.1.1 Chromeでテスト）
注： wysiwygとwysihtml5は2つの異なるエディターです。 wysiwygは、wysihtml5の拡張バージョンであり、比較的似ています。そのため、ニーズに応じて使用できます。
wysiwyg公式ウェブサイト：http：//mindmup.github.io/bootstrap-wysiwyg/
wysiwyg中国のウェブサイト：http：//www.bootcss.com/p/bootstrap-wysiwyg//
wysihtml5公式ウェブサイト：http：//jhollingworth.github.io/bootstrap-wysihtml5/
wysiwygはwysihtml5の拡張バージョンであるため、wysiwygの使用について話させてください。wysihtml5は似ています。
使用する手順
1.次のJSおよびCSSファイルを紹介します。ここでは、公式ウェブサイトは単なる一般的なものであり、次のドキュメントを有効にする前に紹介する必要があるため、このウェブサイトは実際のアプリケーションに焦点を当てており、これらの詳細は無視できません。
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel = "styleSheet"> <link href = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "styleSheet"> <スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script src = "https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"> </script> < src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script src = "http://twitter.github.com/boottrap/ases href = "index.css" rel = "styleSheet"> <script src = "bootstrap-wysiwyg.js"> </script>
2. JSコードを追加します。コードが多すぎるため、ここにはリストされません。このウェブサイトはソースコードを整理しました。 demo.htmlのソースコードを参照してください
.........
3.次の形式のHTMLコードをボディタグに追加します。ここでは、エディターがカプセル化されていないが、HTMLページにコードを直接書き込むことに注意する必要があります。エディター全体を、トップツールバーとテキスト編集ボックスの2つの部分に分割できます。
1）トップツールバー：複数のdiv.btn-groupを含むdiv.btn-toolbarです。各ツールボタンはdiv.btn-groupです。各div.btn-groupでは、中国語を表示するようにプロンプトテキストを設定できます。
<div data-role = "editor-toolbar" data-target = "＃editor"> <div> </div> .......... <div> </div> </div>
HTML5音声入力ツールもここにあります。コードは次のとおりです。
<input type = "text" data-edit = "inserttext" id = "voicebtn" x-webkit-speech = "">
2）コンテンツテキストボックス： Div＃エディター
<div id = "editor"> content </div>
上記はBootstrap-WysiWygの簡単な紹介です。効果を見てみましょう
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル
実際、WYSIWGは視覚エディターを構築するためにいくつかのDIVを定義する必要がありますが、編集部品にはIDエディターを備えたDIVのみが必要です。 Bootstrap-WysiWygのビジュアルエディターのこの簡単な紹介が、すべての人に本当に役立つことを願っています。