MENU
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
PCやMacの性能を100%発揮
ソフトアンテナ
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
ソフトアンテナ
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
  1. ホーム
  2. Webサービス
  3. 世界一シンプルなHTML5 WYSISYG埋め込みエディタ

世界一シンプルなHTML5 WYSISYG埋め込みエディタ

2013 8/07
Webサービス ソフトウェア
2013年8月7日 2013年8月7日
  • URLをコピーしました!

Editable WYSIWYG 1

ブログ「World Simplest HTML5 WYSISYG Inline Editor」にて、世界一簡単な(と主張している)HTML5を使ったブラウザ埋め込み型WYSISYGエディタの実装が公開されています。

上は実際のエディタの画面で、ここから動かしてみることができます。とても簡単なコードですが、文字の修飾だけでなく、UndoやRedoができるのが驚きですね。

キーポイントは2つ

ブログによるとこのエディタ実装のキーポイントは2つあって、1つ目は

contenteditable

を使って、ブラウザにコンテンツが編集可能であることを伝えること。

2つ目は、

execCommand

でエディタのコマンドを処理すること。execCommandはコマンド名などを引数に取りいろいろ複雑なことができるコマンドです(The Mozilla Docs)。

実装

jQueryで書かれたコマンドを処理するJavaScript部分はたったこれだけです。

/*
Big Thanks To:
 
https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands
 
*/
$(function() {
$('#editControls a').click(function(e) {
switch($(this).data('role')) {
case 'h1':
case 'h2':
case 'p':
document.execCommand('formatBlock', false, $(this).data('role'));
break;
default:
document.execCommand($(this).data('role'), false, null);
break;
}
 
})
});

h1、h2、pの場合を除き、クリックされた要素のdata-role属性の値がそのままexecCommandに渡されていることがわかります。data-role属性の値はhtmlタグから渡される値で、例えばUndoのaタグの場合、undoが設定されていることがわかります。


たったこれだけで、Undo/Redo思いのままのエディタが作れるのは驚きですね。HTML5の無限の可能性を感じました。「contenteditable WYSIWYG」で検索すると他にも実装が見つかるので比較してみるとおもしろいかもです。

Webサービス ソフトウェア
HTML5
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • セキュリティフィックス、バグ修正が行われた「PuTTY 0.63」
  • 1秒間あたりの人類のアクティビティを観察できるサイト「One Second on the Internet」

関連記事

  • elementary OS 7が正式リリース - アプリ入手性の改善や設定の改良など新機能多数
    2023年2月1日
  • Gmailの開発者、AIによってGoogleの検索ビジネスが2年以内に崩壊すると予言
    2023年2月1日
  • Adobe Creative Suite 6のライセンス認証期限が1月31日から再延長
    2023年1月31日
  • AutoHotkey v2が正式に主要バージョンに
    2023年1月30日
  • 画面録画機能を搭載したMicrosoftの「Snipping Tool」の正式公開が一歩近づく
    2023年1月30日
  • M1/M2/Intel MacでWindows 11を実行できる「UTM 4.1」
    2023年1月29日
  • Microsoft、プロジェクト「Phoenix」でEdgeブラウザを刷新
    2023年1月28日
  • OpenCore Legacy Patcher 0.6.1がリリース - 非互換MacでmacOS Venturaを動かすためのツール
    2023年1月26日
スポンサーリンク
サイト内検索
特集アーカイブ
  • Windows更新情報
  • Windows11使いこなし
  • Windows 10使いこなし
  • macOS/iOS/iPadOS更新情報
  • macOS使いこなし
  • iOS使いこなし
  • Webブラウザ更新情報
Feedlyに登録

登録お願いします!

follow us in feedly

人気記事
  • Lp logo 3 1000x657 質問に対し流暢な日本語で回答してくれる「ChatGPT」が公開 - 試し方はこちら
  • S 20230125 112030 Microsoft Edgeに「ウィンドウの分割」機能が導入。2つのページを同時に閲覧可能に
  • S 20221123 111042 Windows 11のタスクトレイ時計の秒表示を有効にする方法
  • S 20230119 111028 Microsoft、Windows 11 22H2でシステムの復元ポイントがアプリを破壊する事を確認
  • S 20221206 204658 メニューバーから対話できる「ChatGPT for Mac」がリリース
  • S 20210923 114221 Windows 11で「管理ツール」を開く方法
  • S 20220219 172234 【Tips】iPhoneで撮影した特定の写真だけをiCloudに保存する方法
  • Mac mini M2 2023 【悲報】M2搭載ローエンドMac miniとMacBook ProのSSD速度は前世代より低下
  • Img3File M1/M2/Intel MacでWindows 11を実行できる「UTM 4.1」
  • S 20230127 111050 Windows 11 Version 22H2用のプレビューアップデートKB5022360が公開 - タスクバー検索やIMEの不具合修正
カテゴリー
タグ
Amazon Android App Apple applewatch appsale Chrome Edge Firefox Git Github Google iOS iPad ipados iPhone iPhone6 iphone7 iphone8 iTunes JavaScript Kindle Linux Mac MacBook MacBookPro macos Microsoft Nintendo OS X OSX Parallels Rails Ruby Sale Steam Swift Twitter VMware Windows windows7 windows10 windows11 Wine Yosemite
新着記事
  • 【2/28まで】Amazonのオーディオブック聴き放題サービス「Audible」が2ヶ月無料になるキャンペーンが実施中
  • 【2023年2月分】Kindle月替わりセールが更新 - 「超雑談力」などが対象
  • elementary OS 7が正式リリース - アプリ入手性の改善や設定の改良など新機能多数
src256
ソフトアンテナを開発しています。

Windows/Mac/Linux全部使用中。ソフトウェア、ハードウェアいろいろなモノに興味があります。

好きなエディタはEmacs。好きな言語はRubyです。


srcw.net
  • プライバシーポリシー

© 2022 ソフトアンテナ

目次