{"id":11551,"date":"2013-08-07T10:38:56","date_gmt":"2013-08-07T01:38:56","guid":{"rendered":"http:\/\/www.softantenna.com\/wp\/?p=11551"},"modified":"2013-08-07T10:38:56","modified_gmt":"2013-08-07T01:38:56","slug":"world-simplest-html5-wysisyg-inline-editor","status":"publish","type":"post","link":"https:\/\/softantenna.com\/blog\/world-simplest-html5-wysisyg-inline-editor\/","title":{"rendered":"\u4e16\u754c\u4e00\u30b7\u30f3\u30d7\u30eb\u306aHTML5 WYSISYG\u57cb\u3081\u8fbc\u307f\u30a8\u30c7\u30a3\u30bf"},"content":{"rendered":"

\"Editable<\/p>\n

\u30d6\u30ed\u30b0\u300cWorld Simplest HTML5 WYSISYG Inline Editor<\/a>\u300d\u306b\u3066\u3001\u4e16\u754c\u4e00\u7c21\u5358\u306a(\u3068\u4e3b\u5f35\u3057\u3066\u3044\u308b)HTML5\u3092\u4f7f\u3063\u305f\u30d6\u30e9\u30a6\u30b6\u57cb\u3081\u8fbc\u307f\u578bWYSISYG\u30a8\u30c7\u30a3\u30bf\u306e\u5b9f\u88c5\u304c\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u4e0a\u306f\u5b9f\u969b\u306e\u30a8\u30c7\u30a3\u30bf\u306e\u753b\u9762\u3067\u3001\u3053\u3053<\/a>\u304b\u3089\u52d5\u304b\u3057\u3066\u307f\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3068\u3066\u3082\u7c21\u5358\u306a\u30b3\u30fc\u30c9\u3067\u3059\u304c\u3001\u6587\u5b57\u306e\u4fee\u98fe\u3060\u3051\u3067\u306a\u304f\u3001Undo\u3084Redo\u304c\u3067\u304d\u308b\u306e\u304c\u9a5a\u304d\u3067\u3059\u306d\u3002
\n<\/p>\n

\u30ad\u30fc\u30dd\u30a4\u30f3\u30c8\u306f2\u3064<\/h3>\n

\u30d6\u30ed\u30b0\u306b\u3088\u308b\u3068\u3053\u306e\u30a8\u30c7\u30a3\u30bf\u5b9f\u88c5\u306e\u30ad\u30fc\u30dd\u30a4\u30f3\u30c8\u306f2\u3064\u3042\u3063\u3066\u30011\u3064\u76ee\u306f<\/p>\n

\ncontenteditable\n<\/pre>\n
\u3092\u4f7f\u3063\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u7de8\u96c6\u53ef\u80fd\u3067\u3042\u308b\u3053\u3068\u3092\u4f1d\u3048\u308b\u3053\u3068\u3002<\/p>\n
2\u3064\u76ee\u306f\u3001<\/p>\n
\nexecCommand\n<\/pre>\n
\u3067\u30a8\u30c7\u30a3\u30bf\u306e\u30b3\u30de\u30f3\u30c9\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u3002execCommand\u306f\u30b3\u30de\u30f3\u30c9\u540d\u306a\u3069\u3092\u5f15\u6570\u306b\u53d6\u308a\u3044\u308d\u3044\u308d\u8907\u96d1\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u30b3\u30de\u30f3\u30c9\u3067\u3059(The Mozilla Docs<\/a>)\u3002<\/p>\n
\u5b9f\u88c5<\/h3>\n
jQuery\u3067\u66f8\u304b\u308c\u305f\u30b3\u30de\u30f3\u30c9\u3092\u51e6\u7406\u3059\u308bJavaScript\u90e8\u5206\u306f\u305f\u3063\u305f\u3053\u308c\u3060\u3051\u3067\u3059\u3002<\/p>\n
\/*\nBig Thanks To:\n \nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Rich-Text_Editing_in_Mozilla#Executing_Commands\n \n*\/\n$(function() {\n$('#editControls a').click(function(e) {\nswitch($(this).data('role')) {\ncase 'h1':\ncase 'h2':\ncase 'p':\ndocument.execCommand('formatBlock', false, $(this).data('role'));\nbreak;\ndefault:\ndocument.execCommand($(this).data('role'), false, null);\nbreak;\n}\n \n})\n});\n<\/code><\/pre>\n
h1\u3001h2\u3001p\u306e\u5834\u5408\u3092\u9664\u304d\u3001\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u8981\u7d20\u306edata-role\u5c5e\u6027\u306e\u5024\u304c\u305d\u306e\u307e\u307eexecCommand\u306b\u6e21\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002data-role\u5c5e\u6027\u306e\u5024\u306fhtml\u30bf\u30b0\u304b\u3089\u6e21\u3055\u308c\u308b\u5024\u3067\u3001\u4f8b\u3048\u3070Undo\u306ea\u30bf\u30b0\u306e\u5834\u5408\u3001undo<\/strong>\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n
\n<\/i><\/a>\n<\/pre>\n
\u305f\u3063\u305f\u3053\u308c\u3060\u3051\u3067\u3001Undo\/Redo\u601d\u3044\u306e\u307e\u307e\u306e\u30a8\u30c7\u30a3\u30bf\u304c\u4f5c\u308c\u308b\u306e\u306f\u9a5a\u304d\u3067\u3059\u306d\u3002HTML5\u306e\u7121\u9650\u306e\u53ef\u80fd\u6027\u3092\u611f\u3058\u307e\u3057\u305f\u3002\u300ccontenteditable  WYSIWYG\u300d\u3067\u691c\u7d22\u3059\u308b\u3068\u4ed6\u306b\u3082\u5b9f\u88c5\u304c\u898b\u3064\u304b\u308b\u306e\u3067\u6bd4\u8f03\u3057\u3066\u307f\u308b\u3068\u304a\u3082\u3057\u308d\u3044\u304b\u3082\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30d6\u30ed\u30b0\u300cWorld Simplest HTML5 WYSISYG Inline Editor\u300d\u306b\u3066\u3001\u4e16\u754c\u4e00\u7c21\u5358\u306a(\u3068\u4e3b\u5f35\u3057\u3066\u3044\u308b)HTML5\u3092\u4f7f\u3063\u305f\u30d6\u30e9\u30a6\u30b6\u57cb\u3081\u8fbc\u307f\u578bWYSISYG\u30a8\u30c7\u30a3\u30bf\u306e\u5b9f\u88c5\u304c\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u4e0a\u306f […]<\/p>\n","protected":false},"author":2,"featured_media":11550,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[66,75],"tags":[574],"class_list":["post-11551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webservice","category-software","tag-html5"],"_links":{"self":[{"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/posts\/11551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/comments?post=11551"}],"version-history":[{"count":0,"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/posts\/11551\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/media\/11550"}],"wp:attachment":[{"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/media?parent=11551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/categories?post=11551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softantenna.com\/blog\/wp-json\/wp\/v2\/tags?post=11551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}