contenteditable 属性と execCommand() メソッドを使用して、シンプルなリッチ テキスト エディターを作成する_html/css_WEB-ITnose

ディレクトリ [1] contenteditable [2] execCommand() 段落形式のテキスト形式編集画像 [3] リッチ テキスト エディタ

前の単語

HTML5 は、この属性と document.execCommand() メソッドを通じて contenteditable グローバル属性を追加しますリッチ テキスト エディターを作成するには

contenteditable 属性

機能: ブラウザーでコンテンツを編集できるかどうかを指定します

値: true/false

注: document.designMode ='on' を設定すると、ページ すべての位置を編集できます。contenteditable ='true' を使用すると、特定の要素とそれに含まれる要素にのみ機能します

モバイル端末: この属性はモバイル ios5 および android3 以降でのみサポートされます

<div contenteditable>我是测试文字</div>    

document.execCommand( ) メソッド

document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)//aCommandName为命令名称，不可省略//aShowDefaultUI为是否展示用户界面，默认为false，可省略//aValueArgument为额外参数值，默认为null,可省略

【1】段落形式

[1.1] 中央揃え

document.execCommand('justifyCenter');

[1.2] 左揃え

document.execCommand('justifyLeft');

[1.3] 右揃え

document.execCommand('justifyRight');

[1.4]インデントの追加

document.execCommand('indent');

[1.5] インデントの削除

document.execCommand('outdent');

【2】テキスト形式

[2.1] フォントの種類

document.execCommand('fontname',false,sFontName)

[2.2]文字サイズ

document.execCommand('fontsize',false,sFontSize)

[2.3] 文字色

document.execCommand('forecolor',false,sFontColor)

[2.4]背景色

document.execCommand('backColor',false,sBackColor)

[2.5]太字

document.execCommand('bold');

[2.6]斜体

document.execCommand('italic');

2 .7】 下線

document.execCommand('underline');

【3】編集

[3.1]コピー

document.execCommand('copy');

[3.2]カット

document.execCommand('cut');

[3.3]ペースト(テスト後無効)

document.execCommand('paste');

[3.4]すべて選択

rr

[3.5]

を削除します

[3.6] カーソル以降の文字を削除

document.execCommand('selectAll');    

[3.7] 書式をクリア

document.execCommand('delete');

[3.8] 一歩進む

document.execCommand('forwarddelete');

[3.9] 一歩戻る

れー

[ 3.10]印刷(Firefoxでは無効)

document.execCommand('removeFormat');

【4】画像

document.execCommand('redo');

シンプルリッチテキストエディタ

document.execCommand('undo');

document.execCommand('print');

document.execCommand('insertImage',false,'image.png');

＜化粧箱＞Afterテキストを選択し、以下の対応する属性値をクリックして説明します。