ホーム
js

Javascriptにおけるdocument.execCommand()の使用法

2022-02-12 12:09:51

図形入力のためのdiv推論モードでの画像挿入 - 例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user- scalable=no">
</head>
    <body>
       <! --editor -->
      <div contenteditable id="div"></div> 
      <div style="height:3em;width:100%;background:none;"></div>
      <div class="fixed">
         <div id="img"><input type="button" value="Upload image"/></div>
         <div><a href="#" style="color:#fff;">Next</a></div>
      </div>

    </body>

<script src="js/src/zepto.js"></script>
<script src="js/src/event.js"></script>
<script src="js/src/touch.js"></script>
<script>
  (function(){
    $('#div').css({'min-height':$(window).height()-106})    
             .blur(function () { 
              var that = this; 
              setTimeout(function () { 
                 $(that).focus(); }
                 , 100); 
              }); 
    $('#div img').on('doubleTap',function(){
        $(this).remove();
    })  
    $("#img").on('click',function(){
          document.execCommand("insertimage", false, "images/touxiang.jpg");//fill in the real image address, the image will be inserted into the $('#div') in deduction mode, positioned at the mouse cursor
}) })(); </script> </html>

document.execCommand()メソッドは、以下の共通構文形式のHtmlデータを扱います。
document.execCommand(sCommand[,対話メソッド,動的パラメータ])

ここで、sCommandはコマンドパラメータ("2D-Position" 下の例では)、interactionパラメータはtrueならダイアログを表示し、falseなら表示しない("false "。下の例では、ダイアログを表示しない)、dynamicパラメータは通常利用できる値またはプロパティ値("true"。下の例では)である。

document.execCommand("2D-Position", "false", "true") を実行します。

execCommand()を呼び出すと、ブラウザのメニューでいろいろなことができるようになります。ファイルの保存、新しいファイルのオープン、操作の取り消しややり直し...などなど。このメソッドを使えば、ウェブページにテキストエディターを簡単に実装することができます。

柔軟に使えば、様々なプロジェクトに役立てることができますね。

使い方の一例は以下の通りです。

1. すべて選択〗コマンドの実装
[形式]:document.execCommand("selectAll")
[解説】ページのコンテンツ全体を選択します!
[例】間に追加する。
すべて選択

2. 開く〗コマンドの実装
[書式]:document.execCommand("open")
[解説】VBなどのプログラミング設計で、Webブラウザコントロールのコマンドとやや似ているので、こちらも把握できるはずです。
[例] 間を追加する。
開く

3、「名前を付けて保存」コマンドの実装
[形式]:document.execCommand("saveAs")
[説明] このページをこのサイトの別のディレクトリに保存します!
[例】間に追加する。
として保存する

4、〖印刷〗コマンドの実装
[形式]:document.execCommand("print")
[説明] もちろん、プリンターがインストールされている必要があります!
[例】間に追加する。
印刷する

Jsコードコマンドのパラメーターとその意味は次のとおりです。

//ファイルを開くボタンをクリックするのと同じです。
document.execCommand("Open") を実行します。

//現在のページを保存する
document.execCommand("SaveAs") を実行します。

//選択されたテキストをクリップボードにカット＆ペーストします。
document.execCommand("Cut", "false",null);

// 選択したテキストを削除します。
document.execCommand("Delete", "false",null) を実行します。

//選択領域のフォントを変更します。
document.execCommand("FontName", "false",sFontName) を実行します。

//選択領域のフォントサイズを変更します。
document.execCommand("FontSize", "false",sSize|iSize) を実行します。

// 前景色を設定します。
document.execCommand("ForeColor", "false",sColor) を実行します。

//絶対位置指定されたオブジェクトを直接ドラッグできるようにする。
document.execCommand("2D-Position", "false", "true") を実行します。

//オブジェクトの位置決めを絶対化する。
document.execCommand("AbsolutePosition", "false", "true") を実行します。

// 背景色を設定します。
document.execCommand("BackColor", "false",sColor) を実行します。

// 選択領域のテキストを太字にする。

document.execCommand("Bold", "false",null) を実行します。

//選択されたテキストをクリップボードにコピーします。
document.execCommand("Copy", "false",null) を実行します。

// 指定したアンカーポイントをブックマークに設定する。
document.execCommand("CreateBookmark", "false",sAnchorName) を実行します。

選択されたテキストをハイパーリンクにします。2番目のパラメータがtrueの場合、パラメータ設定ダイアログが表示されます。
document.execCommand("CreateLink", "false",sLinkURL);

// 現在のブロックのタグ名を設定する。
document.execCommand("FormatBlock", "false",sTagName) を実行します。

//ドキュメントを開くボタンをクリックするのと同じです。
document.execCommand("Open") を実行します。