オンライン WYSIWYG HTML エディター_JavaScript スキルの実装原則の簡単な分析-jsチュートリアル-php.cn

オンライン WYSIWYG HTML エディター_JavaScript スキルの実装原則の簡単な分析

WBOY

リリース： 2016-05-16 16:02:19

オリジナル

1426 人が閲覧しました

現在、Web サイト開発はユーザーエクスペリエンスをますます推進しており、ユーザーに利便性を提供するツールがますます増えています。オンライン HTML コンテンツエディターは「古い」ものの 1 つであると考えるべきです。単純な機能を備えたものは、テキストの色やフォントサイズなどのテキストスタイルの制御をユーザーに提供できますが、複雑な機能を備えたものは、Word に似た強力な機能を提供することもできます。現在、オープンソースのエディタは数多くありますが、実際に使いやすいものは多くないため、常に改良作業が行われています。

今日のインターネット上のほとんどのエディターは、比較的強力な機能を備えており、使用中には当然ながら多くの設定が必要になります。コードは複雑ではないため、そのような強力なエディターが必要ない場合は、自分で実装することができます。以下は、参考のために少し個人的な経験を述べたものです (例として ExtJS HTMLEditor を取り上げます)。

1. 初期化。ページの読み込みが完了したら、ページに IFrame を追加します (オプション)。ここで注意すべき点は、特定の要素が見つからないエラーを防ぐために、ページのステータスを判断するには、ページが完全に読み込まれるまで待ってから続行することです。

2. 編集機能を開きます。 IFrame を編集可能にします (以下のコードは ExtJS の HTMLEditor からのものです):

コードをコピーコードは次のとおりです:

// iframe のウィンドウオブジェクトを取得
getWin : function(){
戻り Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
}、

//iframe のドキュメントオブジェクトを取得します
getDoc: function(){
return Ext.isIE ? this.getWin().document: (this.iframe.contentDocument || this.getWin().document);
}、

//ドキュメントオブジェクトを開き、FireFox と互換性を持たせるために初期化コンテンツをそれに書き込みます
doc = this.getDoc();
doc.open();
doc.write('

');
//ドキュメントオブジェクト編集モードを開きます
doc.designMode = "オン";
doc.close();

このようにして、このシンプルなエディターにコンテンツを書き込むことができます。

3. エディターのコンテンツを取得します。コードは次のとおりです:

コードをコピーコードは次のとおりです:

//エディターのボディオブジェクトを取得します
var body = doc.body || doc.documentElement;
//エディターのコンテンツを取得します
var content = body.innerHTML;
//一部の特殊文字の置換など、コンテンツを処理します
// いくつかのコード

//コンテンツを返します
コンテンツを返す;

4. スタイル設定を追加します。上記のエディターは基本的な機能を実装していますが、実際には単純すぎるため、いくつかの単純なスタイルの実装を追加する必要があります。ドキュメントの execCommand メソッドは、このアイデアを可能にします。

コードをコピーコードは次のとおりです:

//統一実行コマンドメソッド
function execCmd(cmd, value){
// doc オブジェクトを取得するには、上記のコードを参照してください
// execCommand メソッドを呼び出してコマンドを実行します
doc.execCommand(cmd, false, value === 未定義 ? null : value);
};

//選択したフォントを太字に変更します。Ctrl+B
execCmd('太字');
//下線、Ctrl+U
execCmd('下線');
//斜体に変更するには、Ctrl-I
execCmd('斜体');
//テキストの色を設定します
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : color);
// カーソル位置にコンテンツを挿入します
function insertAtCursor(text){
//win オブジェクトを取得するには、上記のコードを参照してください
if(Ext.isIE){
win.focus();
var r = doc.selection.createRange();
If(r){
r.collapse(true);
r.pasteHTML(text); }else if(Ext.isGecko || Ext.isOpera){
win.focus();
execCmd('InsertHTML', text);
}else if(Ext.isSafari){
execCmd('InsertText', text);
}
}

5. さらに一歩進みます。エディターにツールバーがある場合は (これは避けられませんが)、スタイルを変更できるようになりました。また、カーソル位置のスタイルに応じて、ツールバー上のボタンが自動的に強調表示されるか、通常どおりに表示されるようにします。ドキュメントの queryCommandState() メソッドを使用すると、このアイデアを実現できます。

コードをコピーコードは次のとおりです:

//docオブジェクトを取得するには反対側を参照
//カーソルが太字かどうか
var isBold = doc.queryCommandState('bold');
if(isBold){
//太字ボタンのスタイルを変更します
}
// もちろん、上記のコードはマージできます。これは単なるヒントです

//下線
doc.queryCommandState('下線');
//斜体
doc.queryCommandState('italic');

この記事では、エディターを実装するための簡単なアイデアのみを提供します。一部のコードは直接使用できます。独自のエディタを実装したい友人には、ExtJS の HTMLEditor コードを参照することをお勧めします。ExtJS はシンプルで明確で、拡張することができます。

最後の注意事項: ブラウザーの互換性の問題に必ず注意し、互換性をテストするのに最後まで待たないでください。これほど大量の JavaScript コードの場合、調整はさらに困難になります。