ホームページ > 記事 > ウェブフロントエンド > jsオンラインhtml(リッチテキスト、WYSIWYG)エディターの基礎知識を学ぶ
jsオンラインhtml(リッチテキスト、WYSIWYG)エディターの基礎知識を学ぶ
- WBOYオリジナル
- 2016-05-16 17:46:141333ブラウズ
必要なのは WYSIWYG HTML エディタです。簡単に言うと、次のような基本的な手順が必要です。
1. エフェクトを表示しながら編集できる編集ボックスが必要です。 Textarea は機能しません。プレーン テキストの入力にのみ使用でき、メモ帳と同様に色や斜体などのテキスト スタイルを表示できません。
これを実現するには iframe を使用し、iframe の designMode 属性を編集できるように変更します。
コードをコピー コードは次のとおりです:
<script>myEditer.document.designMode = 'on';</script>
この iframe 領域に書き込みがあります。
2. スタイルを追加するテキストを選択します。通常、WORD を使用してテキストのスタイルを編集する場合、最初にテキストを入力してからスタイルを編集します。したがって、処理するテキストを選択する方法が必要です。 JS のselection.createRange() はテキストを選択してオブジェクトを返すことができます。オブジェクトの text プロパティにアクセスすることで、選択されたテキストを取得できます。
コードをコピー コードは次のとおりです:
🎜> myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
3. 選択したテキストのスタイルを変更します。 selection.createRange() はテキストを選択し、オブジェクトを返します。このオブジェクトには、選択したテキストのスタイルを変更するために使用できるメソッド execCommand() があります。
コードをコピー コードは次のとおりです:
🎜> myEditer.document.designMode = 'on'; function Bold(){
var sel = myEditer.document.selection.createRange();
>sel .execCommand("Bold")
}
execCommand() の一般的な使用法
:
フォント - 宋朝、黒竜江省、楷書など
execCommand("fontname","",font)
フォント サイズ - フォント サイズvar sel = myEditer.document.selection.createRange();
>sel .execCommand("Bold")
}
execCommand() の一般的な使用法
:
フォント - 宋朝、黒竜江省、楷書など
execCommand("fontname","",font)
execCommand("fontsize","",font size)強調execCommand("太字")
斜体
execCommand("斜体")
下線
execCommand("下線")
取り消し線
execCommand("StrikeThrough")
Left
execCommand ("JustifyLeft")
right
execCommand("JustifyRight")
center
execCommand("JustifyCenter")
cut
execCommand("Cut")
copy
execCommand("Copy")
Paste
execCommand("Paste")
操作のキャンセル -- IE5.0 以降は無限にキャンセルできます
execCommand("Undo")
繰り返し操作
execCommand("Redo")
ボタンを使用して上記の各使用法を実装すると、シンプルなビジュアル テキスト エディターが完成します。
Document.execCommand() の使用手順
コードをコピー
コードは次のとおりです:
位置を使用すると、絶対に配置されたオブジェクトをドラッグして移動できます。
AbsolutePosition は、要素の位置属性を「absolute」(絶対) に設定します。
BackColor は、現在選択されている領域の背景色を設定または取得します。
BlockDirLTR は現在サポートされていません。
BlockDirRTL は現在サポートされていません。
太字は、現在選択されている領域の太字表示を切り替えます。
BrowseMode は現在サポートされていません。
コピー 現在の選択内容をクリップボードにコピーします。
CreateBookmark は、現在の選択範囲または挿入ポイントのブックマーク アンカーを作成するか、ブックマーク アンカーの名前を取得します。
CreateLink 現在の選択範囲にハイパーリンクを挿入するか、ユーザーが現在の選択範囲に挿入するハイパーリンクの URL を指定できるダイアログ ボックスを表示します。
切り取り 現在の選択内容をクリップボードにコピーし、削除します。
削除 現在選択されている領域を削除します。
DirLTR は現在サポートされていません。
DirRTL は現在サポートされていません。
EditMode は現在サポートされていません。
FontName は、現在選択されている領域のフォントを設定または取得します。
FontSize は、現在選択されている領域のフォント サイズを設定または取得します。
ForeColor は、現在選択されている領域の前景色 (テキスト) の色を設定または取得します。
FormatBlock は、現在のブロックの書式設定タグを設定します。
インデントは、選択したテキストのインデントを増やします。
InlineDirLTR は現在サポートされていません。
InlineDirRTL は現在サポートされていません。
InsertButton は、現在の選択範囲をボタン コントロールでカバーします。
InsertFieldset は、現在選択されている領域をボックスで覆います。
InserthorizontalRule は、現在の選択範囲を水平線で覆います。
InsertIFrame は、現在の選択範囲をインライン フレームでカバーします。
InsertImage 現在の選択範囲を画像で覆います。
InsertInputButton は、現在の選択範囲をボタン コントロールでカバーします。
InsertInputCheckbox は、現在選択されている領域をチェックボックス コントロールでカバーします。
InsertInputFileUpload は、現在の選択内容をファイル アップロード コントロールで上書きします。
InsertInputHidden は、現在選択されている領域をカバーする非表示のコントロールを挿入します。
InsertInputImage は、現在の選択範囲を画像コントロールでカバーします。
InsertInputPassword は、現在の選択内容をパスワード制御で上書きします。
InsertInputRadio は、現在選択されている領域をラジオ ボタン コントロールでカバーします。
InsertInputReset は、現在の選択をリセット コントロールで上書きします。
InsertInputSubmit は、現在の選択内容を送信コントロールで上書きします。
InsertInputText は、現在の選択範囲をテキスト コントロールでカバーします。
InsertMarquee は、現在選択されている領域を空の字幕でカバーします。
InsertOrderedList は、現在選択されている領域が番号付きリストであるか、通常のフォーマットされたブロックであるかを切り替えます。
InsertParagraph は、現在の選択範囲を改行で上書きします。
InsertSelectDropdown は、現在選択されている領域をドロップダウン ボックス コントロールでカバーします。
InsertSelectListbox は、現在選択されている領域をリスト ボックス コントロールでカバーします。
InsertTextArea は、現在選択されている領域を複数行のテキスト入力コントロールでカバーします。
InsertUnownedList は、現在選択されている領域が箇条書きリストであるか、通常の書式設定されたブロックであるかを切り替えます。
Italic は、現在の選択領域を斜体表示にするかどうかを切り替えます。
JustifyCenter 現在選択されている領域を書式設定ブロックの中央に配置します。
JustifyFull は現在サポートされていません。
JustifyLeft は、現在選択されている領域の書式設定ブロックを左に揃えます。
JustifyNone は現在サポートされていません。
JustifyRight 現在選択されている領域が位置する書式設定ブロックを右揃えにします。
LiveResize は、MSHTML エディターに、移動またはスケーリングの完了後にのみ更新するのではなく、スケーリングまたは移動中に要素の外観を継続的に更新するように強制します。
MultipleSelection を使用すると、ユーザーが Shift キーまたは Ctrl キーを押したままにしたときに、一度に複数のサイト選択可能要素を選択できます。
開きます。
アウトデントは、選択した領域が配置されている書式設定ブロックのインデントを減らします。
OverWrite は、テキスト状態の挿入と上書きを切り替えます。
貼り付けは、現在の選択範囲をクリップボードの内容で上書きします。
PlayImage は現在サポートされていません。
印刷は、印刷ダイアログ ボックスを開き、ユーザーが現在のページを印刷できるようにします。
やり直し。
更新は、現在のドキュメントを更新します。
RemoveFormat 現在の選択範囲から書式設定タグを削除します。
RemoveParaFormat は現在サポートされていません。
名前を付けて保存は、現在の Web ページをファイルとして保存します。
SelectAll はドキュメント全体を選択します。
SizeToControl は現在サポートされていません。
SizeToControlHeight は現在サポートされていません。
SizeToControlWidth は現在サポートされていません。
ストップストップ。
StopImage は現在サポートされていません。
ストライクスルーは現在サポートされていません。
添字は現在サポートされていません。
上付き文字は現在サポートされていません。
ブックマークを解除すると、現在の選択範囲からすべてのブックマークが削除されます。
下線は、現在選択されている領域の下線を表示するかどうかを切り替えます。
元に戻す 元に戻す。
リンクを解除すると、現在の選択範囲からすべてのハイパーリンクが削除されます。
選択を解除すると、現在選択されている領域の選択状態が解除されます。
シンプルなオープンソースエディタ
編集者
位置を使用すると、絶対に配置されたオブジェクトをドラッグして移動できます。
AbsolutePosition は、要素の位置属性を「absolute」(絶対) に設定します。
BackColor は、現在選択されている領域の背景色を設定または取得します。
BlockDirLTR は現在サポートされていません。
BlockDirRTL は現在サポートされていません。
太字は、現在選択されている領域の太字表示を切り替えます。
BrowseMode は現在サポートされていません。
コピー 現在の選択内容をクリップボードにコピーします。
CreateBookmark は、現在の選択範囲または挿入ポイントのブックマーク アンカーを作成するか、ブックマーク アンカーの名前を取得します。
CreateLink 現在の選択範囲にハイパーリンクを挿入するか、ユーザーが現在の選択範囲に挿入するハイパーリンクの URL を指定できるダイアログ ボックスを表示します。
切り取り 現在の選択内容をクリップボードにコピーし、削除します。
削除 現在選択されている領域を削除します。
DirLTR は現在サポートされていません。
DirRTL は現在サポートされていません。
EditMode は現在サポートされていません。
FontName は、現在選択されている領域のフォントを設定または取得します。
FontSize は、現在選択されている領域のフォント サイズを設定または取得します。
ForeColor は、現在選択されている領域の前景色 (テキスト) の色を設定または取得します。
FormatBlock は、現在のブロックの書式設定タグを設定します。
インデントは、選択したテキストのインデントを増やします。
InlineDirLTR は現在サポートされていません。
InlineDirRTL は現在サポートされていません。
InsertButton は、現在の選択範囲をボタン コントロールでカバーします。
InsertFieldset は、現在選択されている領域をボックスで覆います。
InserthorizontalRule は、現在の選択範囲を水平線で覆います。
InsertIFrame は、現在の選択範囲をインライン フレームでカバーします。
InsertImage 現在の選択範囲を画像で覆います。
InsertInputButton は、現在の選択範囲をボタン コントロールでカバーします。
InsertInputCheckbox は、現在選択されている領域をチェックボックス コントロールでカバーします。
InsertInputFileUpload は、現在の選択内容をファイル アップロード コントロールで上書きします。
InsertInputHidden は、現在選択されている領域をカバーする非表示のコントロールを挿入します。
InsertInputImage は、現在の選択範囲を画像コントロールでカバーします。
InsertInputPassword は、現在の選択内容をパスワード制御で上書きします。
InsertInputRadio は、現在選択されている領域をラジオ ボタン コントロールでカバーします。
InsertInputReset は、現在の選択をリセット コントロールで上書きします。
InsertInputSubmit は、現在の選択内容を送信コントロールで上書きします。
InsertInputText は、現在の選択範囲をテキスト コントロールでカバーします。
InsertMarquee は、現在選択されている領域を空の字幕でカバーします。
InsertOrderedList は、現在選択されている領域が番号付きリストであるか、通常のフォーマットされたブロックであるかを切り替えます。
InsertParagraph は、現在の選択範囲を改行で上書きします。
InsertSelectDropdown は、現在選択されている領域をドロップダウン ボックス コントロールでカバーします。
InsertSelectListbox は、現在選択されている領域をリスト ボックス コントロールでカバーします。
InsertTextArea は、現在選択されている領域を複数行のテキスト入力コントロールでカバーします。
InsertUnownedList は、現在選択されている領域が箇条書きリストであるか、通常の書式設定されたブロックであるかを切り替えます。
Italic は、現在の選択領域を斜体表示にするかどうかを切り替えます。
JustifyCenter 現在選択されている領域を書式設定ブロックの中央に配置します。
JustifyFull は現在サポートされていません。
JustifyLeft は、現在選択されている領域の書式設定ブロックを左に揃えます。
JustifyNone は現在サポートされていません。
JustifyRight 現在選択されている領域が位置する書式設定ブロックを右揃えにします。
LiveResize は、MSHTML エディターに、移動またはスケーリングの完了後にのみ更新するのではなく、スケーリングまたは移動中に要素の外観を継続的に更新するように強制します。
MultipleSelection を使用すると、ユーザーが Shift キーまたは Ctrl キーを押したままにしたときに、一度に複数のサイト選択可能要素を選択できます。
開きます。
アウトデントは、選択した領域が配置されている書式設定ブロックのインデントを減らします。
OverWrite は、テキスト状態の挿入と上書きを切り替えます。
貼り付けは、現在の選択範囲をクリップボードの内容で上書きします。
PlayImage は現在サポートされていません。
印刷は、印刷ダイアログ ボックスを開き、ユーザーが現在のページを印刷できるようにします。
やり直し。
更新は、現在のドキュメントを更新します。
RemoveFormat 現在の選択範囲から書式設定タグを削除します。
RemoveParaFormat は現在サポートされていません。
名前を付けて保存は、現在の Web ページをファイルとして保存します。
SelectAll はドキュメント全体を選択します。
SizeToControl は現在サポートされていません。
SizeToControlHeight は現在サポートされていません。
SizeToControlWidth は現在サポートされていません。
ストップストップ。
StopImage は現在サポートされていません。
ストライクスルーは現在サポートされていません。
添字は現在サポートされていません。
上付き文字は現在サポートされていません。
ブックマークを解除すると、現在の選択範囲からすべてのブックマークが削除されます。
下線は、現在選択されている領域の下線を表示するかどうかを切り替えます。
元に戻す 元に戻す。
リンクを解除すると、現在の選択範囲からすべてのハイパーリンクが削除されます。
選択を解除すると、現在選択されている領域の選択状態が解除されます。
シンプルなオープンソースエディタ
コードをコピーします コードは次のとおりです以下のように: