[{"data":1,"prerenderedAt":5078},["ShallowReactive",2],{"article-editorjs-repeatable":3},{"id":4,"title":5,"body":6,"category":5067,"createdAt":5069,"description":5,"extension":5070,"index":5071,"meta":5072,"navigation":1444,"path":5073,"publish":1444,"seo":5074,"series":5071,"seriesTitle":5071,"stem":5075,"tag":5076,"thumbnail":5071,"updatedAt":5069,"__hash__":5077},"articles\u002Farticles\u002Feditorjs-repeatable.md","Editor.jsで反復入力できるブロックを作る（バニラJS）",{"type":7,"value":8,"toc":5049},"minimark",[9,13,16,20,23,28,31,47,50,54,62,65,68,71,74,77,81,92,107,110,711,719,723,726,729,741,744,747,750,753,756,760,774,1232,1239,1297,1331,1334,1337,1340,1349,1352,1509,1516,1525,1531,1546,1649,1652,1655,1658,1875,1889,1892,1902,1905,1920,2078,2084,2252,2255,2258,2261,2749,2759,2765,2768,2786,3448,3451,3454,3460,3467,3470,3473,3476,3558,3561,3564,4061,4269,4295,4515,4542,4646,4652,4655,4658,4665,4668,4671,4674,4677,4687,4804,4816,4985,5000,5003,5006,5024,5033,5039,5046],[10,11,12],"p",{},"こんにちはjunです。今回の記事は気になっているブラウザテキストエディターであるeditor.jsについての記事です。WYSINGの一種ですが、シンプルながらもckeditorやtinymceに変わるエディターになるのでは？と思いながら、カスタムブロックを作成しましので記事にしたいと思います。",[10,14,15],{},"なぜeditor.jsなのかという経緯や背景から解説しますので、さっさとタイトルの実装内容を知りたい場合は「今回作るもの」からご覧ください。",[17,18,19],"h2",{"id":19},"背景",[10,21,22],{},"webシステムを作る際にはプレーンテキストのサポートだけでなく、リッチテキストエディタをサポートして欲しいという声があります。リッチテキストがあれば太字、リンク、色、画像などをhtmlを知らずともリッチなコンテンツをワードを使うようにユーザーが実装できるようになります。（こんなやつです↓）",[24,25],"image-render",{":src":26,":width":27},"'editorjs-repeatable\u002Fsample-wysing.png'","'100%'",[10,29,30],{},"ワードで作るような文章ベースの内容であればckeditorやtinymceで問題はありませんが、以下のようなデメリットや要件での難しさがあります。",[32,33,34,38,41,44],"ul",{},[35,36,37],"li",{},"生成されるコンテンツがHTMLであるため、webブラウザ意外に表示（レンダリング）が難しい。",[35,39,40],{},"構造化したデータ、特定のフォーマットにしたがった入力やパーツを表現、制御UIを作成することが難しい。",[35,42,43],{},"複雑なビューに対するデータモデルの入力。",[35,45,46],{},"複雑なビューを見たまま編集する（wixみたいな感じ）。",[10,48,49],{},"「構造化したデータ、特定のフォーマット」というのは表示したいビューコンポーネントに対する入力項目のことです。例えば以下のbootstrapのカードを見てみてください。",[24,51],{":src":52,":width":53},"'editorjs-repeatable\u002Fbootsrap-sample.png'","'200px'",[10,55,56,57,61],{},"お客様が「このカードを自分達でテキスト、画像を選択して任意のページ、箇所で表示できるようにしたい」という",[58,59,60],"del",{},"めんどうな","要件があったとします。自由な入力をサポートするので、管理画面での固定的なフォームでは難しそうです。しかし、リッチテキストでは画像の選択や、テキスト部分の制御、カード自体の表示と削除など難しと思います。",[10,63,64],{},"さらに以下のようなアコーディオンはどうでしょうか？",[24,66],{":src":67,":width":27},"'editorjs-repeatable\u002Fbootsrap-accordion.png'",[10,69,70],{},"タイトル、テキスト意外にも「複数個」入力しないといけない、１つのコンポーネントにn個のフォーマットデータを入力できるようにする必要があります。",[10,72,73],{},"これが「構造化したデータ、特定のフォーマットにしたがった入力やパーツを表現、制御UI」でしたり、「複雑なビューを見たまま編集する」が難しいという意味です。wordpressでもグーデンベルクというコンポーネントレベルで記事を作成することが主流になり、webコンテンツの編集はワードで作成する様な文章的な内容からリッチなビューをサポートするのが要件になりつつあります。",[10,75,76],{},"その場合、従来のWYSINGでは実装が難しいです。そのためWYSINGでHTMLを作成してそれを保存、表示するのではなくて構造化されたデータをベースに表示、編集、出力できるようにしたものがeditor.jsです。",[17,78,80],{"id":79},"editorjsの特徴","editor.jsの特徴",[10,82,83,84,91],{},"詳細は",[85,86,90],"a",{"href":87,"rel":88},"https:\u002F\u002Feditorjs.io\u002F",[89],"nofollow","公式サイトを参照","ですがざっとあげるとすれば",[93,94,95,98,101,104],"ol",{},[35,96,97],{},"出力されるデータが配列。（永続化はJSONにする）",[35,99,100],{},"特定のプロパティーに沿った要素で出力する。",[35,102,103],{},"カスタマイズがしやすい。",[35,105,106],{},"挿入するブロックを都度選択し、データを入力する。",[10,108,109],{},"といった感じです。取得されるデータは以下のようになっています。",[111,112,117],"pre",{"className":113,"code":114,"language":115,"meta":116,"style":116},"language-json shiki shiki-themes material-theme-ocean","{\n    \"time\" : 1654313680224,\n    \"blocks\" : [\n        {\n            \"id\" : \"gy0oTOBqL2\",\n            \"type\" : \"header\",\n            \"data\" : {\n                \"text\" : \"Editor.js\",\n                \"level\" : 2\n            }\n        },\n        {\n            \"id\" : \"AOOa_CMrPW\",\n            \"type\" : \"list\",\n            \"data\" : {\n                \"style\" : \"unordered\",\n                \"items\" : [\n                    \"It is a block-styled editor\",\n                    \"It returns clean data output in JSON\",\n                    \"Designed to be extendable and pluggable with a simple API\"\n                ]\n            }\n        },\n        {\n            \"id\" : \"6crsAbriK8\",\n            \"type\" : \"header\",\n            \"data\" : {\n                \"text\" : \"What does it mean clean data output\",\n                \"level\" : 3\n            }\n        },\n        {\n            \"id\" : \"GBhduZdsZW\",\n            \"type\" : \"image\",\n            \"data\" : {\n                \"file\" : {\n                    \"url\" : \"https:\u002F\u002Fcodex.so\u002Fpublic\u002Fapp\u002Fimg\u002Fexternal\u002Fcodex2x.png\"\n                },\n                \"caption\" : \"\",\n                \"withBorder\" : false,\n                \"stretched\" : false,\n                \"withBackground\" : false\n            }\n        }\n    ]\n}\n","json","",[118,119,120,129,152,167,173,198,219,234,256,271,277,283,288,308,328,341,362,376,389,401,412,418,423,428,433,453,472,485,505,519,524,529,534,554,574,587,601,621,627,644,659,673,688,693,699,705],"code",{"__ignoreMap":116},[121,122,125],"span",{"class":123,"line":124},"line",1,[121,126,128],{"class":127},"sAklC","{\n",[121,130,132,135,139,142,145,149],{"class":123,"line":131},2,[121,133,134],{"class":127},"    \"",[121,136,138],{"class":137},"sJ14y","time",[121,140,141],{"class":127},"\"",[121,143,144],{"class":127}," :",[121,146,148],{"class":147},"sx098"," 1654313680224",[121,150,151],{"class":127},",\n",[121,153,155,157,160,162,164],{"class":123,"line":154},3,[121,156,134],{"class":127},[121,158,159],{"class":137},"blocks",[121,161,141],{"class":127},[121,163,144],{"class":127},[121,165,166],{"class":127}," [\n",[121,168,170],{"class":123,"line":169},4,[121,171,172],{"class":127},"        {\n",[121,174,176,179,183,185,187,190,194,196],{"class":123,"line":175},5,[121,177,178],{"class":127},"            \"",[121,180,182],{"class":181},"s5Dmg","id",[121,184,141],{"class":127},[121,186,144],{"class":127},[121,188,189],{"class":127}," \"",[121,191,193],{"class":192},"sfyAc","gy0oTOBqL2",[121,195,141],{"class":127},[121,197,151],{"class":127},[121,199,201,203,206,208,210,212,215,217],{"class":123,"line":200},6,[121,202,178],{"class":127},[121,204,205],{"class":181},"type",[121,207,141],{"class":127},[121,209,144],{"class":127},[121,211,189],{"class":127},[121,213,214],{"class":192},"header",[121,216,141],{"class":127},[121,218,151],{"class":127},[121,220,222,224,227,229,231],{"class":123,"line":221},7,[121,223,178],{"class":127},[121,225,226],{"class":181},"data",[121,228,141],{"class":127},[121,230,144],{"class":127},[121,232,233],{"class":127}," {\n",[121,235,237,240,243,245,247,249,252,254],{"class":123,"line":236},8,[121,238,239],{"class":127},"                \"",[121,241,242],{"class":147},"text",[121,244,141],{"class":127},[121,246,144],{"class":127},[121,248,189],{"class":127},[121,250,251],{"class":192},"Editor.js",[121,253,141],{"class":127},[121,255,151],{"class":127},[121,257,259,261,264,266,268],{"class":123,"line":258},9,[121,260,239],{"class":127},[121,262,263],{"class":147},"level",[121,265,141],{"class":127},[121,267,144],{"class":127},[121,269,270],{"class":147}," 2\n",[121,272,274],{"class":123,"line":273},10,[121,275,276],{"class":127},"            }\n",[121,278,280],{"class":123,"line":279},11,[121,281,282],{"class":127},"        },\n",[121,284,286],{"class":123,"line":285},12,[121,287,172],{"class":127},[121,289,291,293,295,297,299,301,304,306],{"class":123,"line":290},13,[121,292,178],{"class":127},[121,294,182],{"class":181},[121,296,141],{"class":127},[121,298,144],{"class":127},[121,300,189],{"class":127},[121,302,303],{"class":192},"AOOa_CMrPW",[121,305,141],{"class":127},[121,307,151],{"class":127},[121,309,311,313,315,317,319,321,324,326],{"class":123,"line":310},14,[121,312,178],{"class":127},[121,314,205],{"class":181},[121,316,141],{"class":127},[121,318,144],{"class":127},[121,320,189],{"class":127},[121,322,323],{"class":192},"list",[121,325,141],{"class":127},[121,327,151],{"class":127},[121,329,331,333,335,337,339],{"class":123,"line":330},15,[121,332,178],{"class":127},[121,334,226],{"class":181},[121,336,141],{"class":127},[121,338,144],{"class":127},[121,340,233],{"class":127},[121,342,344,346,349,351,353,355,358,360],{"class":123,"line":343},16,[121,345,239],{"class":127},[121,347,348],{"class":147},"style",[121,350,141],{"class":127},[121,352,144],{"class":127},[121,354,189],{"class":127},[121,356,357],{"class":192},"unordered",[121,359,141],{"class":127},[121,361,151],{"class":127},[121,363,365,367,370,372,374],{"class":123,"line":364},17,[121,366,239],{"class":127},[121,368,369],{"class":147},"items",[121,371,141],{"class":127},[121,373,144],{"class":127},[121,375,166],{"class":127},[121,377,379,382,385,387],{"class":123,"line":378},18,[121,380,381],{"class":127},"                    \"",[121,383,384],{"class":192},"It is a block-styled editor",[121,386,141],{"class":127},[121,388,151],{"class":127},[121,390,392,394,397,399],{"class":123,"line":391},19,[121,393,381],{"class":127},[121,395,396],{"class":192},"It returns clean data output in JSON",[121,398,141],{"class":127},[121,400,151],{"class":127},[121,402,404,406,409],{"class":123,"line":403},20,[121,405,381],{"class":127},[121,407,408],{"class":192},"Designed to be extendable and pluggable with a simple API",[121,410,411],{"class":127},"\"\n",[121,413,415],{"class":123,"line":414},21,[121,416,417],{"class":127},"                ]\n",[121,419,421],{"class":123,"line":420},22,[121,422,276],{"class":127},[121,424,426],{"class":123,"line":425},23,[121,427,282],{"class":127},[121,429,431],{"class":123,"line":430},24,[121,432,172],{"class":127},[121,434,436,438,440,442,444,446,449,451],{"class":123,"line":435},25,[121,437,178],{"class":127},[121,439,182],{"class":181},[121,441,141],{"class":127},[121,443,144],{"class":127},[121,445,189],{"class":127},[121,447,448],{"class":192},"6crsAbriK8",[121,450,141],{"class":127},[121,452,151],{"class":127},[121,454,456,458,460,462,464,466,468,470],{"class":123,"line":455},26,[121,457,178],{"class":127},[121,459,205],{"class":181},[121,461,141],{"class":127},[121,463,144],{"class":127},[121,465,189],{"class":127},[121,467,214],{"class":192},[121,469,141],{"class":127},[121,471,151],{"class":127},[121,473,475,477,479,481,483],{"class":123,"line":474},27,[121,476,178],{"class":127},[121,478,226],{"class":181},[121,480,141],{"class":127},[121,482,144],{"class":127},[121,484,233],{"class":127},[121,486,488,490,492,494,496,498,501,503],{"class":123,"line":487},28,[121,489,239],{"class":127},[121,491,242],{"class":147},[121,493,141],{"class":127},[121,495,144],{"class":127},[121,497,189],{"class":127},[121,499,500],{"class":192},"What does it mean clean data output",[121,502,141],{"class":127},[121,504,151],{"class":127},[121,506,508,510,512,514,516],{"class":123,"line":507},29,[121,509,239],{"class":127},[121,511,263],{"class":147},[121,513,141],{"class":127},[121,515,144],{"class":127},[121,517,518],{"class":147}," 3\n",[121,520,522],{"class":123,"line":521},30,[121,523,276],{"class":127},[121,525,527],{"class":123,"line":526},31,[121,528,282],{"class":127},[121,530,532],{"class":123,"line":531},32,[121,533,172],{"class":127},[121,535,537,539,541,543,545,547,550,552],{"class":123,"line":536},33,[121,538,178],{"class":127},[121,540,182],{"class":181},[121,542,141],{"class":127},[121,544,144],{"class":127},[121,546,189],{"class":127},[121,548,549],{"class":192},"GBhduZdsZW",[121,551,141],{"class":127},[121,553,151],{"class":127},[121,555,557,559,561,563,565,567,570,572],{"class":123,"line":556},34,[121,558,178],{"class":127},[121,560,205],{"class":181},[121,562,141],{"class":127},[121,564,144],{"class":127},[121,566,189],{"class":127},[121,568,569],{"class":192},"image",[121,571,141],{"class":127},[121,573,151],{"class":127},[121,575,577,579,581,583,585],{"class":123,"line":576},35,[121,578,178],{"class":127},[121,580,226],{"class":181},[121,582,141],{"class":127},[121,584,144],{"class":127},[121,586,233],{"class":127},[121,588,590,592,595,597,599],{"class":123,"line":589},36,[121,591,239],{"class":127},[121,593,594],{"class":147},"file",[121,596,141],{"class":127},[121,598,144],{"class":127},[121,600,233],{"class":127},[121,602,604,606,610,612,614,616,619],{"class":123,"line":603},37,[121,605,381],{"class":127},[121,607,609],{"class":608},"s-wAU","url",[121,611,141],{"class":127},[121,613,144],{"class":127},[121,615,189],{"class":127},[121,617,618],{"class":192},"https:\u002F\u002Fcodex.so\u002Fpublic\u002Fapp\u002Fimg\u002Fexternal\u002Fcodex2x.png",[121,620,411],{"class":127},[121,622,624],{"class":123,"line":623},38,[121,625,626],{"class":127},"                },\n",[121,628,630,632,635,637,639,642],{"class":123,"line":629},39,[121,631,239],{"class":127},[121,633,634],{"class":147},"caption",[121,636,141],{"class":127},[121,638,144],{"class":127},[121,640,641],{"class":127}," \"\"",[121,643,151],{"class":127},[121,645,647,649,652,654,656],{"class":123,"line":646},40,[121,648,239],{"class":127},[121,650,651],{"class":147},"withBorder",[121,653,141],{"class":127},[121,655,144],{"class":127},[121,657,658],{"class":127}," false,\n",[121,660,662,664,667,669,671],{"class":123,"line":661},41,[121,663,239],{"class":127},[121,665,666],{"class":147},"stretched",[121,668,141],{"class":127},[121,670,144],{"class":127},[121,672,658],{"class":127},[121,674,676,678,681,683,685],{"class":123,"line":675},42,[121,677,239],{"class":127},[121,679,680],{"class":147},"withBackground",[121,682,141],{"class":127},[121,684,144],{"class":127},[121,686,687],{"class":127}," false\n",[121,689,691],{"class":123,"line":690},43,[121,692,276],{"class":127},[121,694,696],{"class":123,"line":695},44,[121,697,698],{"class":127},"        }\n",[121,700,702],{"class":123,"line":701},45,[121,703,704],{"class":127},"    ]\n",[121,706,708],{"class":123,"line":707},46,[121,709,710],{"class":127},"}\n",[10,712,713,715,716,718],{},[118,714,159],{},"という要素はいかにそれぞれのブロックのデータが入り、",[118,717,205],{},"によって種類を識別して決まったプロパティーが取得されます。",[720,721,722],"h3",{"id":722},"editorjsのメリット",[10,724,725],{},"メリットは従来のwysingで管理できなかったような複雑なビューや構造化したデータをクライアント側で簡単に入力できるようになったこと、そしてそのデータをJSONで管理できることです。スキーマを定義してバリデーションもしやすいですし、JSONなので配布もしやすいです。ブロックのカスタマイズや作成も簡単に行えるので、拡張性も高いです。今回は「作成」のみ行います。",[720,727,728],{"id":728},"editorjsのデメリット",[10,730,731,732,737,738,740],{},"デメリットは取得されるデータがJSONのため、レンダリングをしたい際は専用のパーサを作成する必要がります。node.jsであれば",[85,733,736],{"href":734,"rel":735},"https:\u002F\u002Fgithub.com\u002Fpavittarx\u002Feditorjs-html",[89],"editorjs-html","というものを使用したりして自前でhtmlに変換する処理が必要です。基本的には",[118,739,159],{},"をforeachして、typeをswitchにて分岐させて特定のhtml文字列を作成するといった感じです。",[10,742,743],{},"また当たり前ですがバリデーションも実装する必要があります。従来のwysingではphp-purifier,html_sanitizerなどを使用して特定のタグや属性をフィルタして保存するなどを行います。editor.jsは構造化したデータが大切になるので、永続化処理時にあらかじめ定義したプロパティーであるか、構造であるかをチェックするシステムは自前で実装する必要があります。（ここはまた今度書く予定です。）",[10,745,746],{},"まだ公式から言語ごとのパーサーやバリデーターはまだ安定したものが出ていない印象です。（2022年6月当時）",[17,748,749],{"id":749},"今回作るもの",[10,751,752],{},"上記のような特徴を持ったeditor.jsですが、今回は例に出したアコーディオンを作ってみようかと思います。タイトルと本文（太字、斜体、リンクをサポート）を複数個に増減可能で、順番も変えられるようにします。",[10,754,755],{},"使う場面としては「よくある質問」みたいなページです。editor.jsの説明をメインに行うため、デザインや動きは最低限となっています。バニラJSで作成し、サンプルはこちらに置いておきました。",[17,757,759],{"id":758},"足場となるhtmljscssを作成","足場となるhtml,js,cssを作成",[10,761,762,763,766,767,766,770,773],{},"今回は",[118,764,765],{},"index.html",",",[118,768,769],{},"app.js",[118,771,772],{},"style.css","の３つだけを使用します。editor.jsはCDNから引っ張り、webpackなどは使用しません。",[111,775,779],{"className":776,"code":777,"filename":765,"language":778,"meta":116,"style":116},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml lang=\"ja\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fcss\u002Fbootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\u002FazprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n    \u003Ctitle>editorjs\u003C\u002Ftitle>\n    \u003Clink rel=\"stylesheet\" href=\".\u002Fstyle.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"mt-5 border bg-light\">\n            \u003Cdiv id=\"editorjs\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"mt-2\">\n            \u003Cpre id=\"data\">\u003C\u002Fpre>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@editorjs\u002Feditorjs@latest\">\u003C\u002Fscript>\n\u003Cscript src=\".\u002Fapp.js\">\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","html",[118,780,781,795,817,826,848,880,911,968,989,1018,1026,1035,1056,1076,1101,1110,1129,1151,1159,1168,1176,1201,1224],{"__ignoreMap":116},[121,782,783,786,789,792],{"class":123,"line":124},[121,784,785],{"class":127},"\u003C!",[121,787,788],{"class":608},"DOCTYPE",[121,790,791],{"class":137}," html",[121,793,794],{"class":127},">\n",[121,796,797,800,802,805,808,810,813,815],{"class":123,"line":131},[121,798,799],{"class":127},"\u003C",[121,801,778],{"class":608},[121,803,804],{"class":137}," lang",[121,806,807],{"class":127},"=",[121,809,141],{"class":127},[121,811,812],{"class":192},"ja",[121,814,141],{"class":127},[121,816,794],{"class":127},[121,818,819,821,824],{"class":123,"line":154},[121,820,799],{"class":127},[121,822,823],{"class":608},"head",[121,825,794],{"class":127},[121,827,828,831,834,837,839,841,844,846],{"class":123,"line":169},[121,829,830],{"class":127},"    \u003C",[121,832,833],{"class":608},"meta",[121,835,836],{"class":137}," charset",[121,838,807],{"class":127},[121,840,141],{"class":127},[121,842,843],{"class":192},"UTF-8",[121,845,141],{"class":127},[121,847,794],{"class":127},[121,849,850,852,854,857,859,861,864,866,869,871,873,876,878],{"class":123,"line":175},[121,851,830],{"class":127},[121,853,833],{"class":608},[121,855,856],{"class":137}," http-equiv",[121,858,807],{"class":127},[121,860,141],{"class":127},[121,862,863],{"class":192},"X-UA-Compatible",[121,865,141],{"class":127},[121,867,868],{"class":137}," content",[121,870,807],{"class":127},[121,872,141],{"class":127},[121,874,875],{"class":192},"IE=edge",[121,877,141],{"class":127},[121,879,794],{"class":127},[121,881,882,884,886,889,891,893,896,898,900,902,904,907,909],{"class":123,"line":200},[121,883,830],{"class":127},[121,885,833],{"class":608},[121,887,888],{"class":137}," name",[121,890,807],{"class":127},[121,892,141],{"class":127},[121,894,895],{"class":192},"viewport",[121,897,141],{"class":127},[121,899,868],{"class":137},[121,901,807],{"class":127},[121,903,141],{"class":127},[121,905,906],{"class":192},"width=device-width, initial-scale=1.0",[121,908,141],{"class":127},[121,910,794],{"class":127},[121,912,913,915,918,921,923,925,928,930,933,935,937,940,942,945,947,949,952,954,957,959,961,964,966],{"class":123,"line":221},[121,914,830],{"class":127},[121,916,917],{"class":608},"link",[121,919,920],{"class":137}," href",[121,922,807],{"class":127},[121,924,141],{"class":127},[121,926,927],{"class":192},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fcss\u002Fbootstrap.min.css",[121,929,141],{"class":127},[121,931,932],{"class":137}," rel",[121,934,807],{"class":127},[121,936,141],{"class":127},[121,938,939],{"class":192},"stylesheet",[121,941,141],{"class":127},[121,943,944],{"class":137}," integrity",[121,946,807],{"class":127},[121,948,141],{"class":127},[121,950,951],{"class":192},"sha384-EVSTQN3\u002FazprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",[121,953,141],{"class":127},[121,955,956],{"class":137}," crossorigin",[121,958,807],{"class":127},[121,960,141],{"class":127},[121,962,963],{"class":192},"anonymous",[121,965,141],{"class":127},[121,967,794],{"class":127},[121,969,970,972,975,978,982,985,987],{"class":123,"line":236},[121,971,830],{"class":127},[121,973,974],{"class":608},"title",[121,976,977],{"class":127},">",[121,979,981],{"class":980},"s0W1g","editorjs",[121,983,984],{"class":127},"\u003C\u002F",[121,986,974],{"class":608},[121,988,794],{"class":127},[121,990,991,993,995,997,999,1001,1003,1005,1007,1009,1011,1014,1016],{"class":123,"line":258},[121,992,830],{"class":127},[121,994,917],{"class":608},[121,996,932],{"class":137},[121,998,807],{"class":127},[121,1000,141],{"class":127},[121,1002,939],{"class":192},[121,1004,141],{"class":127},[121,1006,920],{"class":137},[121,1008,807],{"class":127},[121,1010,141],{"class":127},[121,1012,1013],{"class":192},".\u002Fstyle.css",[121,1015,141],{"class":127},[121,1017,794],{"class":127},[121,1019,1020,1022,1024],{"class":123,"line":273},[121,1021,984],{"class":127},[121,1023,823],{"class":608},[121,1025,794],{"class":127},[121,1027,1028,1030,1033],{"class":123,"line":279},[121,1029,799],{"class":127},[121,1031,1032],{"class":608},"body",[121,1034,794],{"class":127},[121,1036,1037,1039,1042,1045,1047,1049,1052,1054],{"class":123,"line":285},[121,1038,830],{"class":127},[121,1040,1041],{"class":608},"div",[121,1043,1044],{"class":137}," class",[121,1046,807],{"class":127},[121,1048,141],{"class":127},[121,1050,1051],{"class":192},"container",[121,1053,141],{"class":127},[121,1055,794],{"class":127},[121,1057,1058,1061,1063,1065,1067,1069,1072,1074],{"class":123,"line":290},[121,1059,1060],{"class":127},"        \u003C",[121,1062,1041],{"class":608},[121,1064,1044],{"class":137},[121,1066,807],{"class":127},[121,1068,141],{"class":127},[121,1070,1071],{"class":192},"mt-5 border bg-light",[121,1073,141],{"class":127},[121,1075,794],{"class":127},[121,1077,1078,1081,1083,1086,1088,1090,1092,1094,1097,1099],{"class":123,"line":310},[121,1079,1080],{"class":127},"            \u003C",[121,1082,1041],{"class":608},[121,1084,1085],{"class":137}," id",[121,1087,807],{"class":127},[121,1089,141],{"class":127},[121,1091,981],{"class":192},[121,1093,141],{"class":127},[121,1095,1096],{"class":127},">\u003C\u002F",[121,1098,1041],{"class":608},[121,1100,794],{"class":127},[121,1102,1103,1106,1108],{"class":123,"line":330},[121,1104,1105],{"class":127},"        \u003C\u002F",[121,1107,1041],{"class":608},[121,1109,794],{"class":127},[121,1111,1112,1114,1116,1118,1120,1122,1125,1127],{"class":123,"line":343},[121,1113,1060],{"class":127},[121,1115,1041],{"class":608},[121,1117,1044],{"class":137},[121,1119,807],{"class":127},[121,1121,141],{"class":127},[121,1123,1124],{"class":192},"mt-2",[121,1126,141],{"class":127},[121,1128,794],{"class":127},[121,1130,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149],{"class":123,"line":364},[121,1132,1080],{"class":127},[121,1134,111],{"class":608},[121,1136,1085],{"class":137},[121,1138,807],{"class":127},[121,1140,141],{"class":127},[121,1142,226],{"class":192},[121,1144,141],{"class":127},[121,1146,1096],{"class":127},[121,1148,111],{"class":608},[121,1150,794],{"class":127},[121,1152,1153,1155,1157],{"class":123,"line":378},[121,1154,1105],{"class":127},[121,1156,1041],{"class":608},[121,1158,794],{"class":127},[121,1160,1161,1164,1166],{"class":123,"line":391},[121,1162,1163],{"class":127},"    \u003C\u002F",[121,1165,1041],{"class":608},[121,1167,794],{"class":127},[121,1169,1170,1172,1174],{"class":123,"line":403},[121,1171,984],{"class":127},[121,1173,1032],{"class":608},[121,1175,794],{"class":127},[121,1177,1178,1180,1183,1186,1188,1190,1193,1195,1197,1199],{"class":123,"line":414},[121,1179,799],{"class":127},[121,1181,1182],{"class":608},"script",[121,1184,1185],{"class":137}," src",[121,1187,807],{"class":127},[121,1189,141],{"class":127},[121,1191,1192],{"class":192},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@editorjs\u002Feditorjs@latest",[121,1194,141],{"class":127},[121,1196,1096],{"class":127},[121,1198,1182],{"class":608},[121,1200,794],{"class":127},[121,1202,1203,1205,1207,1209,1211,1213,1216,1218,1220,1222],{"class":123,"line":420},[121,1204,799],{"class":127},[121,1206,1182],{"class":608},[121,1208,1185],{"class":137},[121,1210,807],{"class":127},[121,1212,141],{"class":127},[121,1214,1215],{"class":192},".\u002Fapp.js",[121,1217,141],{"class":127},[121,1219,1096],{"class":127},[121,1221,1182],{"class":608},[121,1223,794],{"class":127},[121,1225,1226,1228,1230],{"class":123,"line":425},[121,1227,984],{"class":127},[121,1229,778],{"class":608},[121,1231,794],{"class":127},[10,1233,1234,1235,1238],{},"editor.js側はひとまず以下のようにして、",[118,1236,1237],{},"\u003Cdiv id=\"editorjs\">\u003C\u002Fdiv>","にエディターがマウントされるようにします。",[111,1240,1244],{"className":1241,"code":1242,"filename":769,"language":1243,"meta":116,"style":116},"language-js shiki shiki-themes material-theme-ocean","const editor = new EditorJS({\n    holder: 'editorjs',\n});\n","js",[118,1245,1246,1268,1286],{"__ignoreMap":116},[121,1247,1248,1251,1254,1256,1259,1263,1266],{"class":123,"line":124},[121,1249,1250],{"class":137},"const",[121,1252,1253],{"class":980}," editor ",[121,1255,807],{"class":127},[121,1257,1258],{"class":127}," new",[121,1260,1262],{"class":1261},"sdLwU"," EditorJS",[121,1264,1265],{"class":980},"(",[121,1267,128],{"class":127},[121,1269,1270,1273,1276,1279,1281,1284],{"class":123,"line":131},[121,1271,1272],{"class":608},"    holder",[121,1274,1275],{"class":127},":",[121,1277,1278],{"class":127}," '",[121,1280,981],{"class":192},[121,1282,1283],{"class":127},"'",[121,1285,151],{"class":127},[121,1287,1288,1291,1294],{"class":123,"line":154},[121,1289,1290],{"class":127},"}",[121,1292,1293],{"class":980},")",[121,1295,1296],{"class":127},";\n",[111,1298,1302],{"className":1299,"code":1300,"filename":772,"language":1301,"meta":116,"style":116},"language-css shiki shiki-themes material-theme-ocean",".ce-block__content{\n    background-color: white;\n}\n","css",[118,1303,1304,1314,1327],{"__ignoreMap":116},[121,1305,1306,1309,1312],{"class":123,"line":124},[121,1307,1308],{"class":127},".",[121,1310,1311],{"class":181},"ce-block__content",[121,1313,128],{"class":127},[121,1315,1316,1320,1322,1325],{"class":123,"line":131},[121,1317,1319],{"class":1318},"s6YsC","    background-color",[121,1321,1275],{"class":127},[121,1323,1324],{"class":980}," white",[121,1326,1296],{"class":127},[121,1328,1329],{"class":123,"line":154},[121,1330,710],{"class":127},[10,1332,1333],{},"マウントされると以下の画像のように、editor.jsがマウントされて初期状態ではテキストブロックだけが入力できます。",[24,1335],{":src":1336,":width":27},"'editorjs-repeatable\u002Finit-mounted.png'",[17,1338,1339],{"id":1339},"基本のメソッド",[10,1341,1342,1343,1348],{},"実装には",[85,1344,1347],{"href":1345,"rel":1346},"https:\u002F\u002Feditorjs.io\u002Fthe-first-plugin",[89],"editor.jsのドキュメント","を参考にして解説します。ドキュメントの方も合わせて作ってみることをお勧めします。",[10,1350,1351],{},"editor.jsにてブロックを実装する場合以下のメソッドを実装します。",[111,1353,1355],{"className":1241,"code":1354,"language":1243,"meta":116,"style":116},"class Accordion{\n    \u002F\u002F editor jsにブロックの情報を渡す\n    static get toolbox() {\n        return{\n            title: 'YourBlockName',\n            icon: '\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 576 512\">\u003C!--! Font Awesome Pro 6.1.1 by @fontawesome - https:\u002F\u002Ffontawesome.com License - https:\u002F\u002Ffontawesome.com\u002Flicense (Commercial License) Copyright 2022 Fonticons, Inc. -->\u003Cpath d=\"M528 32H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48H528c26.51 0 48-21.49 48-48v-256C576 53.49 554.5 32 528 32zM223.1 96c17.68 0 32 14.33 32 32S241.7 160 223.1 160c-17.67 0-32-14.33-32-32S206.3 96 223.1 96zM494.1 311.6C491.3 316.8 485.9 320 480 320H192c-6.023 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.332-16.68l70-96C252.1 194.4 256.9 192 262 192c5.111 0 9.916 2.441 12.93 6.574l22.35 30.66l62.74-94.11C362.1 130.7 367.1 128 373.3 128c5.348 0 10.34 2.672 13.31 7.125l106.7 160C496.6 300 496.9 306.3 494.1 311.6zM456 432H120c-39.7 0-72-32.3-72-72v-240C48 106.8 37.25 96 24 96S0 106.8 0 120v240C0 426.2 53.83 480 120 480h336c13.25 0 24-10.75 24-24S469.3 432 456 432z\"\u002F>\u003C\u002Fsvg>'\n        }\n    } \n\n    constructor({ data,api,config }){\n    }\n\n    render(){}\n\n    save(blockContent){}\n}\n",[118,1356,1357,1367,1373,1389,1397,1413,1428,1432,1440,1446,1471,1476,1480,1488,1492,1505],{"__ignoreMap":116},[121,1358,1359,1362,1365],{"class":123,"line":124},[121,1360,1361],{"class":137},"class",[121,1363,1364],{"class":181}," Accordion",[121,1366,128],{"class":127},[121,1368,1369],{"class":123,"line":131},[121,1370,1372],{"class":1371},"sC9rS","    \u002F\u002F editor jsにブロックの情報を渡す\n",[121,1374,1375,1378,1381,1384,1387],{"class":123,"line":154},[121,1376,1377],{"class":137},"    static",[121,1379,1380],{"class":137}," get",[121,1382,1383],{"class":608}," toolbox",[121,1385,1386],{"class":127},"()",[121,1388,233],{"class":127},[121,1390,1391,1395],{"class":123,"line":169},[121,1392,1394],{"class":1393},"s6cf3","        return",[121,1396,128],{"class":127},[121,1398,1399,1402,1404,1406,1409,1411],{"class":123,"line":175},[121,1400,1401],{"class":608},"            title",[121,1403,1275],{"class":127},[121,1405,1278],{"class":127},[121,1407,1408],{"class":192},"YourBlockName",[121,1410,1283],{"class":127},[121,1412,151],{"class":127},[121,1414,1415,1418,1420,1422,1425],{"class":123,"line":200},[121,1416,1417],{"class":608},"            icon",[121,1419,1275],{"class":127},[121,1421,1278],{"class":127},[121,1423,1424],{"class":192},"\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 576 512\">\u003C!--! Font Awesome Pro 6.1.1 by @fontawesome - https:\u002F\u002Ffontawesome.com License - https:\u002F\u002Ffontawesome.com\u002Flicense (Commercial License) Copyright 2022 Fonticons, Inc. -->\u003Cpath d=\"M528 32H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48H528c26.51 0 48-21.49 48-48v-256C576 53.49 554.5 32 528 32zM223.1 96c17.68 0 32 14.33 32 32S241.7 160 223.1 160c-17.67 0-32-14.33-32-32S206.3 96 223.1 96zM494.1 311.6C491.3 316.8 485.9 320 480 320H192c-6.023 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.332-16.68l70-96C252.1 194.4 256.9 192 262 192c5.111 0 9.916 2.441 12.93 6.574l22.35 30.66l62.74-94.11C362.1 130.7 367.1 128 373.3 128c5.348 0 10.34 2.672 13.31 7.125l106.7 160C496.6 300 496.9 306.3 494.1 311.6zM456 432H120c-39.7 0-72-32.3-72-72v-240C48 106.8 37.25 96 24 96S0 106.8 0 120v240C0 426.2 53.83 480 120 480h336c13.25 0 24-10.75 24-24S469.3 432 456 432z\"\u002F>\u003C\u002Fsvg>",[121,1426,1427],{"class":127},"'\n",[121,1429,1430],{"class":123,"line":221},[121,1431,698],{"class":127},[121,1433,1434,1437],{"class":123,"line":236},[121,1435,1436],{"class":127},"    }",[121,1438,1439],{"class":980}," \n",[121,1441,1442],{"class":123,"line":258},[121,1443,1445],{"emptyLinePlaceholder":1444},true,"\n",[121,1447,1448,1451,1454,1458,1460,1463,1465,1468],{"class":123,"line":273},[121,1449,1450],{"class":137},"    constructor",[121,1452,1453],{"class":127},"({",[121,1455,1457],{"class":1456},"s7ZW3"," data",[121,1459,766],{"class":127},[121,1461,1462],{"class":1456},"api",[121,1464,766],{"class":127},[121,1466,1467],{"class":1456},"config",[121,1469,1470],{"class":127}," }){\n",[121,1472,1473],{"class":123,"line":279},[121,1474,1475],{"class":127},"    }\n",[121,1477,1478],{"class":123,"line":285},[121,1479,1445],{"emptyLinePlaceholder":1444},[121,1481,1482,1485],{"class":123,"line":290},[121,1483,1484],{"class":608},"    render",[121,1486,1487],{"class":127},"(){}\n",[121,1489,1490],{"class":123,"line":310},[121,1491,1445],{"emptyLinePlaceholder":1444},[121,1493,1494,1497,1499,1502],{"class":123,"line":330},[121,1495,1496],{"class":608},"    save",[121,1498,1265],{"class":127},[121,1500,1501],{"class":1456},"blockContent",[121,1503,1504],{"class":127},"){}\n",[121,1506,1507],{"class":123,"line":343},[121,1508,710],{"class":127},[10,1510,1511,1512,1515],{},"とりあえずこれら３つがあればブロックは実装できます。",[118,1513,1514],{},"static get toolbox()","はeditor.jsが呼び出し、ツールボックスのアイコンやブロック名の表示を行います。アイコンはsvgのタグまたは、画像タグを指定します。widthとheightは50ぐらいが適切です。",[10,1517,1518,1519,1521,1522,1524],{},"コンストラクターにはeditor.jsより、このブロックの初期データ",[118,1520,226],{},"、とeditor.jsのコアにアクセスできる",[118,1523,1462],{},"が渡されます。",[10,1526,1527,1530],{},[118,1528,1529],{},"render()","はブロックが初期化された時に最初に呼び出され、ブロックのUIビューのhtmlを返すようにします。",[10,1532,1533,1536,1537,1539,1540,1542,1543,1545],{},[118,1534,1535],{},"save(blockContent){}","はエディターの保存時に呼ばれ、このブロッククラスの値を出力します。引数の",[118,1538,1501],{},"は",[118,1541,1529],{},"にて渡されたDOMです。このメソッドはオブジェクトを返すようにします。上記の例でいう、",[118,1544,226],{},"の箇所を出力します。",[111,1547,1549],{"className":113,"code":1548,"language":115,"meta":116,"style":116},"{\n    \"id\" : \"6crsAbriK8\",\n    \"type\" : \"header\",\n    \u002F\u002F save で出力する\n    \"data\" : {\n        \"text\" : \"What does it mean clean data output\",\n        \"level\" : 3\n    }\n},\n",[118,1550,1551,1555,1573,1591,1596,1608,1627,1639,1643],{"__ignoreMap":116},[121,1552,1553],{"class":123,"line":124},[121,1554,128],{"class":127},[121,1556,1557,1559,1561,1563,1565,1567,1569,1571],{"class":123,"line":131},[121,1558,134],{"class":127},[121,1560,182],{"class":137},[121,1562,141],{"class":127},[121,1564,144],{"class":127},[121,1566,189],{"class":127},[121,1568,448],{"class":192},[121,1570,141],{"class":127},[121,1572,151],{"class":127},[121,1574,1575,1577,1579,1581,1583,1585,1587,1589],{"class":123,"line":154},[121,1576,134],{"class":127},[121,1578,205],{"class":137},[121,1580,141],{"class":127},[121,1582,144],{"class":127},[121,1584,189],{"class":127},[121,1586,214],{"class":192},[121,1588,141],{"class":127},[121,1590,151],{"class":127},[121,1592,1593],{"class":123,"line":169},[121,1594,1595],{"class":1371},"    \u002F\u002F save で出力する\n",[121,1597,1598,1600,1602,1604,1606],{"class":123,"line":175},[121,1599,134],{"class":127},[121,1601,226],{"class":137},[121,1603,141],{"class":127},[121,1605,144],{"class":127},[121,1607,233],{"class":127},[121,1609,1610,1613,1615,1617,1619,1621,1623,1625],{"class":123,"line":200},[121,1611,1612],{"class":127},"        \"",[121,1614,242],{"class":181},[121,1616,141],{"class":127},[121,1618,144],{"class":127},[121,1620,189],{"class":127},[121,1622,500],{"class":192},[121,1624,141],{"class":127},[121,1626,151],{"class":127},[121,1628,1629,1631,1633,1635,1637],{"class":123,"line":221},[121,1630,1612],{"class":127},[121,1632,263],{"class":181},[121,1634,141],{"class":127},[121,1636,144],{"class":127},[121,1638,518],{"class":147},[121,1640,1641],{"class":123,"line":236},[121,1642,1475],{"class":127},[121,1644,1645,1647],{"class":123,"line":258},[121,1646,1290],{"class":127},[121,1648,151],{"class":980},[10,1650,1651],{},"とりあえず上記の４つのメソッドはブロックを作成する上で重要なものになりますので、ひとまず把握しておいてください。",[17,1653,1654],{"id":1654},"実装",[10,1656,1657],{},"とりあえずEditor.js上でブロックを選択できるようにしましょう。上記のクラスとメソッドを実装してDOMにマウントします。",[111,1659,1661],{"className":1241,"code":1660,"language":1243,"meta":116,"style":116},"class Accordion{\n    \u002F\u002F editor jsにブロックの情報を渡す\n    static get toolbox() {\n        return{\n            title: 'アコーディオン',\n            icon: 'svg' \u002F\u002F 長いので省略\n        }\n    } \n\n    constructor({ data,api,config }){\n    }\n\n    render(){}\n\n    save(blockContent){}\n}\n\nconst editor = new EditorJS({\n    holder: 'editorjs',\n    tools: { \n        accordion : {class:Accordion,inlineToolbar: true}\n    }\n});\n",[118,1662,1663,1671,1675,1687,1693,1708,1724,1728,1734,1738,1756,1760,1764,1770,1774,1784,1788,1792,1808,1822,1834,1863,1867],{"__ignoreMap":116},[121,1664,1665,1667,1669],{"class":123,"line":124},[121,1666,1361],{"class":137},[121,1668,1364],{"class":181},[121,1670,128],{"class":127},[121,1672,1673],{"class":123,"line":131},[121,1674,1372],{"class":1371},[121,1676,1677,1679,1681,1683,1685],{"class":123,"line":154},[121,1678,1377],{"class":137},[121,1680,1380],{"class":137},[121,1682,1383],{"class":608},[121,1684,1386],{"class":127},[121,1686,233],{"class":127},[121,1688,1689,1691],{"class":123,"line":169},[121,1690,1394],{"class":1393},[121,1692,128],{"class":127},[121,1694,1695,1697,1699,1701,1704,1706],{"class":123,"line":175},[121,1696,1401],{"class":608},[121,1698,1275],{"class":127},[121,1700,1278],{"class":127},[121,1702,1703],{"class":192},"アコーディオン",[121,1705,1283],{"class":127},[121,1707,151],{"class":127},[121,1709,1710,1712,1714,1716,1719,1721],{"class":123,"line":200},[121,1711,1417],{"class":608},[121,1713,1275],{"class":127},[121,1715,1278],{"class":127},[121,1717,1718],{"class":192},"svg",[121,1720,1283],{"class":127},[121,1722,1723],{"class":1371}," \u002F\u002F 長いので省略\n",[121,1725,1726],{"class":123,"line":221},[121,1727,698],{"class":127},[121,1729,1730,1732],{"class":123,"line":236},[121,1731,1436],{"class":127},[121,1733,1439],{"class":980},[121,1735,1736],{"class":123,"line":258},[121,1737,1445],{"emptyLinePlaceholder":1444},[121,1739,1740,1742,1744,1746,1748,1750,1752,1754],{"class":123,"line":273},[121,1741,1450],{"class":137},[121,1743,1453],{"class":127},[121,1745,1457],{"class":1456},[121,1747,766],{"class":127},[121,1749,1462],{"class":1456},[121,1751,766],{"class":127},[121,1753,1467],{"class":1456},[121,1755,1470],{"class":127},[121,1757,1758],{"class":123,"line":279},[121,1759,1475],{"class":127},[121,1761,1762],{"class":123,"line":285},[121,1763,1445],{"emptyLinePlaceholder":1444},[121,1765,1766,1768],{"class":123,"line":290},[121,1767,1484],{"class":608},[121,1769,1487],{"class":127},[121,1771,1772],{"class":123,"line":310},[121,1773,1445],{"emptyLinePlaceholder":1444},[121,1775,1776,1778,1780,1782],{"class":123,"line":330},[121,1777,1496],{"class":608},[121,1779,1265],{"class":127},[121,1781,1501],{"class":1456},[121,1783,1504],{"class":127},[121,1785,1786],{"class":123,"line":343},[121,1787,710],{"class":127},[121,1789,1790],{"class":123,"line":364},[121,1791,1445],{"emptyLinePlaceholder":1444},[121,1793,1794,1796,1798,1800,1802,1804,1806],{"class":123,"line":378},[121,1795,1250],{"class":137},[121,1797,1253],{"class":980},[121,1799,807],{"class":127},[121,1801,1258],{"class":127},[121,1803,1262],{"class":1261},[121,1805,1265],{"class":980},[121,1807,128],{"class":127},[121,1809,1810,1812,1814,1816,1818,1820],{"class":123,"line":391},[121,1811,1272],{"class":608},[121,1813,1275],{"class":127},[121,1815,1278],{"class":127},[121,1817,981],{"class":192},[121,1819,1283],{"class":127},[121,1821,151],{"class":127},[121,1823,1824,1827,1829,1832],{"class":123,"line":403},[121,1825,1826],{"class":608},"    tools",[121,1828,1275],{"class":127},[121,1830,1831],{"class":127}," {",[121,1833,1439],{"class":980},[121,1835,1836,1839,1841,1843,1845,1847,1850,1852,1855,1857,1861],{"class":123,"line":414},[121,1837,1838],{"class":608},"        accordion ",[121,1840,1275],{"class":127},[121,1842,1831],{"class":127},[121,1844,1361],{"class":608},[121,1846,1275],{"class":127},[121,1848,1849],{"class":980},"Accordion",[121,1851,766],{"class":127},[121,1853,1854],{"class":608},"inlineToolbar",[121,1856,1275],{"class":127},[121,1858,1860],{"class":1859},"sbqyR"," true",[121,1862,710],{"class":127},[121,1864,1865],{"class":123,"line":420},[121,1866,1475],{"class":127},[121,1868,1869,1871,1873],{"class":123,"line":425},[121,1870,1290],{"class":127},[121,1872,1293],{"class":980},[121,1874,1296],{"class":127},[10,1876,1877,1880,1881,1884,1885,1888],{},[118,1878,1879],{},"holder","のIDに指定したDOMにEditor.jsがマウントされます。そして",[118,1882,1883],{},"tools","に追加したいカスタムブロックのクラスを指定します。後でも解説しますが、インラインツールバーという斜体や太字などを使用できるようにする場合は",[118,1886,1887],{},"inlineToolbar:true","を指定します。",[24,1890],{":src":1891,":width":27},"'editorjs-repeatable\u002Fset1.png'",[10,1893,1894,1895,1897,1898,1901],{},"この時にブロックをリストから選択した時にeditor.jsにマウントされます。この時に",[118,1896,1529],{},"でreturnされた",[118,1899,1900],{},"Element","がマウントされます。まずは要素を追加するボタンを用意しましょう。",[720,1903,1904],{"id":1904},"追加ボタンのレンダリング",[10,1906,1907,1908,1911,1912,1897,1914,1916,1917,1919],{},"ブロックを追加したい際にまずブロックの",[118,1909,1910],{},"constructor","が呼ばれます。そして",[118,1913,1529],{},[118,1915,1900],{},"がマウントされます。今は追加ですが、後ほど保存した値からブロックをレンダーする処理を追加することもあるので、",[118,1918,1910],{},"で処理処理を記述します。",[111,1921,1923],{"className":1241,"code":1922,"language":1243,"meta":116,"style":116},"class Accordion{\n    static get toolbox() {\n        return {\n          title: 'アコーディオン',\n          icon: 'svg'\n        };\n    }\n\n    constructor({data,config,api}){\n        const accordionData = data.itmes || [];\n        this.createParentWrapper();\n    }\n\n    render(){}\n\n    createParentWrapper(){}\n}\n",[118,1924,1925,1933,1945,1951,1966,1979,1984,1988,1992,2011,2037,2049,2053,2057,2063,2067,2074],{"__ignoreMap":116},[121,1926,1927,1929,1931],{"class":123,"line":124},[121,1928,1361],{"class":137},[121,1930,1364],{"class":181},[121,1932,128],{"class":127},[121,1934,1935,1937,1939,1941,1943],{"class":123,"line":131},[121,1936,1377],{"class":137},[121,1938,1380],{"class":137},[121,1940,1383],{"class":608},[121,1942,1386],{"class":127},[121,1944,233],{"class":127},[121,1946,1947,1949],{"class":123,"line":154},[121,1948,1394],{"class":1393},[121,1950,233],{"class":127},[121,1952,1953,1956,1958,1960,1962,1964],{"class":123,"line":169},[121,1954,1955],{"class":608},"          title",[121,1957,1275],{"class":127},[121,1959,1278],{"class":127},[121,1961,1703],{"class":192},[121,1963,1283],{"class":127},[121,1965,151],{"class":127},[121,1967,1968,1971,1973,1975,1977],{"class":123,"line":175},[121,1969,1970],{"class":608},"          icon",[121,1972,1275],{"class":127},[121,1974,1278],{"class":127},[121,1976,1718],{"class":192},[121,1978,1427],{"class":127},[121,1980,1981],{"class":123,"line":200},[121,1982,1983],{"class":127},"        };\n",[121,1985,1986],{"class":123,"line":221},[121,1987,1475],{"class":127},[121,1989,1990],{"class":123,"line":236},[121,1991,1445],{"emptyLinePlaceholder":1444},[121,1993,1994,1996,1998,2000,2002,2004,2006,2008],{"class":123,"line":258},[121,1995,1450],{"class":137},[121,1997,1453],{"class":127},[121,1999,226],{"class":1456},[121,2001,766],{"class":127},[121,2003,1467],{"class":1456},[121,2005,766],{"class":127},[121,2007,1462],{"class":1456},[121,2009,2010],{"class":127},"}){\n",[121,2012,2013,2016,2019,2022,2024,2026,2029,2032,2035],{"class":123,"line":273},[121,2014,2015],{"class":137},"        const",[121,2017,2018],{"class":980}," accordionData",[121,2020,2021],{"class":127}," =",[121,2023,1457],{"class":980},[121,2025,1308],{"class":127},[121,2027,2028],{"class":980},"itmes",[121,2030,2031],{"class":127}," ||",[121,2033,2034],{"class":608}," []",[121,2036,1296],{"class":127},[121,2038,2039,2042,2045,2047],{"class":123,"line":279},[121,2040,2041],{"class":127},"        this.",[121,2043,2044],{"class":1261},"createParentWrapper",[121,2046,1386],{"class":608},[121,2048,1296],{"class":127},[121,2050,2051],{"class":123,"line":285},[121,2052,1475],{"class":127},[121,2054,2055],{"class":123,"line":290},[121,2056,1445],{"emptyLinePlaceholder":1444},[121,2058,2059,2061],{"class":123,"line":310},[121,2060,1484],{"class":608},[121,2062,1487],{"class":127},[121,2064,2065],{"class":123,"line":330},[121,2066,1445],{"emptyLinePlaceholder":1444},[121,2068,2069,2072],{"class":123,"line":343},[121,2070,2071],{"class":608},"    createParentWrapper",[121,2073,1487],{"class":127},[121,2075,2076],{"class":123,"line":364},[121,2077,710],{"class":127},[10,2079,2080,2083],{},[118,2081,2082],{},"createParentWrapper()","では最終的にアコーディオンのDOMを作成します。",[111,2085,2087],{"className":1241,"code":2086,"language":1243,"meta":116,"style":116},"createParentWrapper(){\n    const wrapper = document.createElement(\"div\");\n    const parentId = \"parent-\" + this.randomID();\n    wrapper.classList.add(\"accordion\");\n    wrapper.id = parentId;\n    wrapper.innerHTML = `\n    \u003Cbutton class=\"accordion-add btn btn-success d-block btn-sm\">\n    追加する\n    \u003C\u002Fbutton>\n    `;\n    this.wrapper = wrapper;\n}\n",[118,2088,2089,2097,2127,2156,2184,2198,2212,2217,2222,2227,2234,2248],{"__ignoreMap":116},[121,2090,2091,2093,2095],{"class":123,"line":124},[121,2092,2044],{"class":1261},[121,2094,1386],{"class":980},[121,2096,128],{"class":127},[121,2098,2099,2102,2105,2107,2110,2112,2115,2117,2119,2121,2123,2125],{"class":123,"line":131},[121,2100,2101],{"class":137},"    const",[121,2103,2104],{"class":980}," wrapper",[121,2106,2021],{"class":127},[121,2108,2109],{"class":980}," document",[121,2111,1308],{"class":127},[121,2113,2114],{"class":1261},"createElement",[121,2116,1265],{"class":608},[121,2118,141],{"class":127},[121,2120,1041],{"class":192},[121,2122,141],{"class":127},[121,2124,1293],{"class":608},[121,2126,1296],{"class":127},[121,2128,2129,2131,2134,2136,2138,2141,2143,2146,2149,2152,2154],{"class":123,"line":154},[121,2130,2101],{"class":137},[121,2132,2133],{"class":980}," parentId",[121,2135,2021],{"class":127},[121,2137,189],{"class":127},[121,2139,2140],{"class":192},"parent-",[121,2142,141],{"class":127},[121,2144,2145],{"class":127}," +",[121,2147,2148],{"class":127}," this.",[121,2150,2151],{"class":1261},"randomID",[121,2153,1386],{"class":608},[121,2155,1296],{"class":127},[121,2157,2158,2161,2163,2166,2168,2171,2173,2175,2178,2180,2182],{"class":123,"line":169},[121,2159,2160],{"class":980},"    wrapper",[121,2162,1308],{"class":127},[121,2164,2165],{"class":980},"classList",[121,2167,1308],{"class":127},[121,2169,2170],{"class":1261},"add",[121,2172,1265],{"class":608},[121,2174,141],{"class":127},[121,2176,2177],{"class":192},"accordion",[121,2179,141],{"class":127},[121,2181,1293],{"class":608},[121,2183,1296],{"class":127},[121,2185,2186,2188,2190,2192,2194,2196],{"class":123,"line":175},[121,2187,2160],{"class":980},[121,2189,1308],{"class":127},[121,2191,182],{"class":980},[121,2193,2021],{"class":127},[121,2195,2133],{"class":980},[121,2197,1296],{"class":127},[121,2199,2200,2202,2204,2207,2209],{"class":123,"line":200},[121,2201,2160],{"class":980},[121,2203,1308],{"class":127},[121,2205,2206],{"class":980},"innerHTML",[121,2208,2021],{"class":127},[121,2210,2211],{"class":127}," `\n",[121,2213,2214],{"class":123,"line":221},[121,2215,2216],{"class":192},"    \u003Cbutton class=\"accordion-add btn btn-success d-block btn-sm\">\n",[121,2218,2219],{"class":123,"line":236},[121,2220,2221],{"class":192},"    追加する\n",[121,2223,2224],{"class":123,"line":258},[121,2225,2226],{"class":192},"    \u003C\u002Fbutton>\n",[121,2228,2229,2232],{"class":123,"line":273},[121,2230,2231],{"class":127},"    `",[121,2233,1296],{"class":127},[121,2235,2236,2239,2242,2244,2246],{"class":123,"line":279},[121,2237,2238],{"class":127},"    this.",[121,2240,2241],{"class":980},"wrapper",[121,2243,2021],{"class":127},[121,2245,2104],{"class":980},[121,2247,1296],{"class":127},[121,2249,2250],{"class":123,"line":285},[121,2251,710],{"class":127},[10,2253,2254],{},"こうすると追加するボタンが追加されたはずです。",[24,2256],{":src":2257,":width":27},"'editorjs-repeatable\u002Fset2.png'",[10,2259,2260],{},"この追加するボタンを押したらアコーディオンの要素が追加されるようにします。",[111,2262,2264],{"className":1241,"code":2263,"language":1243,"meta":116,"style":116},"randomID(){\n    let result           = '';\n    let characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n    let charactersLength = characters.length;\n    for ( let i = 0; i \u003C 10; i++ ) {\n        result += characters.charAt(Math.floor(Math.random() * \n        charactersLength));\n    }\n    return result;\n}\n\ncreateParentWrapper(){\n    const wrapper = document.createElement(\"div\");\n    const parentId = \"parent-\" + this.randomID();\n    wrapper.classList.add(\"accordion\");\n    wrapper.id = parentId;\n    wrapper.innerHTML = `\n    \u003Cbutton class=\"accordion-add btn btn-success d-block btn-sm\">\n    追加する\n    \u003C\u002Fbutton>\n    `;\n\n    wrapper.querySelector(\".accordion-add\").addEventListener(\"click\",()=>{\n        this.addItemEle();\n    });\n    this.wrapper = wrapper;\n}\n\naddItemEle(title=\"\",content=\"\"){\n    this.wrapper.insertBefore(this.generateItemEle(title,content),this.wrapper.querySelector(\".accordion-add\"))\n}\n\ngenerateItemEle(title,content){}\n",[118,2265,2266,2274,2290,2309,2327,2369,2411,2421,2425,2434,2438,2442,2450,2476,2500,2524,2538,2550,2554,2558,2562,2568,2572,2614,2625,2633,2645,2649,2653,2678,2727,2731,2735],{"__ignoreMap":116},[121,2267,2268,2270,2272],{"class":123,"line":124},[121,2269,2151],{"class":1261},[121,2271,1386],{"class":980},[121,2273,128],{"class":127},[121,2275,2276,2279,2282,2285,2288],{"class":123,"line":131},[121,2277,2278],{"class":137},"    let",[121,2280,2281],{"class":980}," result",[121,2283,2284],{"class":127},"           =",[121,2286,2287],{"class":127}," ''",[121,2289,1296],{"class":127},[121,2291,2292,2294,2297,2300,2302,2305,2307],{"class":123,"line":154},[121,2293,2278],{"class":137},[121,2295,2296],{"class":980}," characters",[121,2298,2299],{"class":127},"       =",[121,2301,1278],{"class":127},[121,2303,2304],{"class":192},"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",[121,2306,1283],{"class":127},[121,2308,1296],{"class":127},[121,2310,2311,2313,2316,2318,2320,2322,2325],{"class":123,"line":169},[121,2312,2278],{"class":137},[121,2314,2315],{"class":980}," charactersLength",[121,2317,2021],{"class":127},[121,2319,2296],{"class":980},[121,2321,1308],{"class":127},[121,2323,2324],{"class":980},"length",[121,2326,1296],{"class":127},[121,2328,2329,2332,2335,2338,2341,2343,2346,2349,2351,2354,2357,2359,2361,2364,2367],{"class":123,"line":175},[121,2330,2331],{"class":1393},"    for",[121,2333,2334],{"class":608}," ( ",[121,2336,2337],{"class":137},"let",[121,2339,2340],{"class":980}," i",[121,2342,2021],{"class":127},[121,2344,2345],{"class":147}," 0",[121,2347,2348],{"class":127},";",[121,2350,2340],{"class":980},[121,2352,2353],{"class":127}," \u003C",[121,2355,2356],{"class":147}," 10",[121,2358,2348],{"class":127},[121,2360,2340],{"class":980},[121,2362,2363],{"class":127},"++",[121,2365,2366],{"class":608}," ) ",[121,2368,128],{"class":127},[121,2370,2371,2374,2377,2379,2381,2384,2386,2389,2391,2394,2396,2398,2400,2403,2406,2409],{"class":123,"line":200},[121,2372,2373],{"class":980},"        result",[121,2375,2376],{"class":127}," +=",[121,2378,2296],{"class":980},[121,2380,1308],{"class":127},[121,2382,2383],{"class":1261},"charAt",[121,2385,1265],{"class":608},[121,2387,2388],{"class":980},"Math",[121,2390,1308],{"class":127},[121,2392,2393],{"class":1261},"floor",[121,2395,1265],{"class":608},[121,2397,2388],{"class":980},[121,2399,1308],{"class":127},[121,2401,2402],{"class":1261},"random",[121,2404,2405],{"class":608},"() ",[121,2407,2408],{"class":127},"*",[121,2410,1439],{"class":608},[121,2412,2413,2416,2419],{"class":123,"line":221},[121,2414,2415],{"class":980},"        charactersLength",[121,2417,2418],{"class":608},"))",[121,2420,1296],{"class":127},[121,2422,2423],{"class":123,"line":236},[121,2424,1475],{"class":127},[121,2426,2427,2430,2432],{"class":123,"line":258},[121,2428,2429],{"class":1393},"    return",[121,2431,2281],{"class":980},[121,2433,1296],{"class":127},[121,2435,2436],{"class":123,"line":273},[121,2437,710],{"class":127},[121,2439,2440],{"class":123,"line":279},[121,2441,1445],{"emptyLinePlaceholder":1444},[121,2443,2444,2446,2448],{"class":123,"line":285},[121,2445,2044],{"class":1261},[121,2447,1386],{"class":980},[121,2449,128],{"class":127},[121,2451,2452,2454,2456,2458,2460,2462,2464,2466,2468,2470,2472,2474],{"class":123,"line":290},[121,2453,2101],{"class":137},[121,2455,2104],{"class":980},[121,2457,2021],{"class":127},[121,2459,2109],{"class":980},[121,2461,1308],{"class":127},[121,2463,2114],{"class":1261},[121,2465,1265],{"class":608},[121,2467,141],{"class":127},[121,2469,1041],{"class":192},[121,2471,141],{"class":127},[121,2473,1293],{"class":608},[121,2475,1296],{"class":127},[121,2477,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498],{"class":123,"line":310},[121,2479,2101],{"class":137},[121,2481,2133],{"class":980},[121,2483,2021],{"class":127},[121,2485,189],{"class":127},[121,2487,2140],{"class":192},[121,2489,141],{"class":127},[121,2491,2145],{"class":127},[121,2493,2148],{"class":127},[121,2495,2151],{"class":1261},[121,2497,1386],{"class":608},[121,2499,1296],{"class":127},[121,2501,2502,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522],{"class":123,"line":330},[121,2503,2160],{"class":980},[121,2505,1308],{"class":127},[121,2507,2165],{"class":980},[121,2509,1308],{"class":127},[121,2511,2170],{"class":1261},[121,2513,1265],{"class":608},[121,2515,141],{"class":127},[121,2517,2177],{"class":192},[121,2519,141],{"class":127},[121,2521,1293],{"class":608},[121,2523,1296],{"class":127},[121,2525,2526,2528,2530,2532,2534,2536],{"class":123,"line":343},[121,2527,2160],{"class":980},[121,2529,1308],{"class":127},[121,2531,182],{"class":980},[121,2533,2021],{"class":127},[121,2535,2133],{"class":980},[121,2537,1296],{"class":127},[121,2539,2540,2542,2544,2546,2548],{"class":123,"line":364},[121,2541,2160],{"class":980},[121,2543,1308],{"class":127},[121,2545,2206],{"class":980},[121,2547,2021],{"class":127},[121,2549,2211],{"class":127},[121,2551,2552],{"class":123,"line":378},[121,2553,2216],{"class":192},[121,2555,2556],{"class":123,"line":391},[121,2557,2221],{"class":192},[121,2559,2560],{"class":123,"line":403},[121,2561,2226],{"class":192},[121,2563,2564,2566],{"class":123,"line":414},[121,2565,2231],{"class":127},[121,2567,1296],{"class":127},[121,2569,2570],{"class":123,"line":420},[121,2571,1445],{"emptyLinePlaceholder":1444},[121,2573,2574,2576,2578,2581,2583,2585,2588,2590,2592,2594,2597,2599,2601,2604,2606,2609,2612],{"class":123,"line":425},[121,2575,2160],{"class":980},[121,2577,1308],{"class":127},[121,2579,2580],{"class":1261},"querySelector",[121,2582,1265],{"class":608},[121,2584,141],{"class":127},[121,2586,2587],{"class":192},".accordion-add",[121,2589,141],{"class":127},[121,2591,1293],{"class":608},[121,2593,1308],{"class":127},[121,2595,2596],{"class":1261},"addEventListener",[121,2598,1265],{"class":608},[121,2600,141],{"class":127},[121,2602,2603],{"class":192},"click",[121,2605,141],{"class":127},[121,2607,2608],{"class":127},",()",[121,2610,2611],{"class":137},"=>",[121,2613,128],{"class":127},[121,2615,2616,2618,2621,2623],{"class":123,"line":430},[121,2617,2041],{"class":127},[121,2619,2620],{"class":1261},"addItemEle",[121,2622,1386],{"class":608},[121,2624,1296],{"class":127},[121,2626,2627,2629,2631],{"class":123,"line":435},[121,2628,1436],{"class":127},[121,2630,1293],{"class":608},[121,2632,1296],{"class":127},[121,2634,2635,2637,2639,2641,2643],{"class":123,"line":455},[121,2636,2238],{"class":127},[121,2638,2241],{"class":980},[121,2640,2021],{"class":127},[121,2642,2104],{"class":980},[121,2644,1296],{"class":127},[121,2646,2647],{"class":123,"line":474},[121,2648,710],{"class":127},[121,2650,2651],{"class":123,"line":487},[121,2652,1445],{"emptyLinePlaceholder":1444},[121,2654,2655,2657,2660,2662,2665,2667,2670,2672,2674,2676],{"class":123,"line":507},[121,2656,2620],{"class":1261},[121,2658,2659],{"class":980},"(title",[121,2661,807],{"class":127},[121,2663,2664],{"class":127},"\"\"",[121,2666,766],{"class":127},[121,2668,2669],{"class":980},"content",[121,2671,807],{"class":127},[121,2673,2664],{"class":127},[121,2675,1293],{"class":980},[121,2677,128],{"class":127},[121,2679,2680,2682,2684,2686,2689,2691,2694,2697,2699,2701,2703,2705,2707,2710,2712,2714,2716,2718,2720,2722,2724],{"class":123,"line":521},[121,2681,2238],{"class":127},[121,2683,2241],{"class":980},[121,2685,1308],{"class":127},[121,2687,2688],{"class":1261},"insertBefore",[121,2690,1265],{"class":608},[121,2692,2693],{"class":127},"this.",[121,2695,2696],{"class":1261},"generateItemEle",[121,2698,1265],{"class":608},[121,2700,974],{"class":980},[121,2702,766],{"class":127},[121,2704,2669],{"class":980},[121,2706,1293],{"class":608},[121,2708,2709],{"class":127},",this.",[121,2711,2241],{"class":980},[121,2713,1308],{"class":127},[121,2715,2580],{"class":1261},[121,2717,1265],{"class":608},[121,2719,141],{"class":127},[121,2721,2587],{"class":192},[121,2723,141],{"class":127},[121,2725,2726],{"class":608},"))\n",[121,2728,2729],{"class":123,"line":526},[121,2730,710],{"class":127},[121,2732,2733],{"class":123,"line":531},[121,2734,1445],{"emptyLinePlaceholder":1444},[121,2736,2737,2739,2741,2743,2746],{"class":123,"line":536},[121,2738,2696],{"class":1261},[121,2740,2659],{"class":980},[121,2742,766],{"class":127},[121,2744,2745],{"class":980},"content)",[121,2747,2748],{"class":127},"{}\n",[10,2750,2751,2754,2755,2758],{},[118,2752,2753],{},"addItemEle()","を呼ぶことでアイテムのDOMが挿入されるようにします。DOM自体は",[118,2756,2757],{},"generateItemEle()","で生成されるようにします。",[10,2760,2761,2762,2764],{},"次は",[118,2763,2757],{},"で生成されるDOMの記述を作成します。",[720,2766,2767],{"id":2767},"要素の生成",[10,2769,2770,2772,2773,2776,2777,2779,2780,2782,2783,2785],{},[118,2771,2757],{},"では",[118,2774,2775],{},"document.createElement","を使用してbootstrap通りのHTMLを作成します。",[118,2778,974],{},"と",[118,2781,2669],{},"ではリッチテキストを挿入するために",[118,2784,2206],{},"で入れています。実際に表示する際はXSSの危険があるので入力値の検証が必要です。",[111,2787,2789],{"className":1241,"code":2788,"language":1243,"meta":116,"style":116},"generateItemEle(title,content){\n        const itemWrapper = document.createElement(\"div\");\n        const wrapperId = this.randomID();\n        itemWrapper.id = wrapperId;\n        itemWrapper.classList.add(\"accordion-item\");\n\n        const itemHeaderWrapper = document.createElement(\"h2\");\n        itemHeaderWrapper.classList.add(\"accordion-header\");\n        const collapseId = wrapperId+\"-collapse\";\n        itemHeaderWrapper.innerHTML = `\n        \u003Cbutton class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\">\n            \u003Cdiv class=\"accordion-button-wrapper\">${title}\u003C\u002Fdiv>\n        \u003C\u002Fbutton>\n        `;\n        itemHeaderWrapper.querySelector('.accordion-button-wrapper').contentEditable = true;\n\n        const itemBodyWrapper = document.createElement(\"div\");\n        itemBodyWrapper.classList.add(\"accordion-collapse\",\"collapse\",\"show\");\n        itemBodyWrapper.id = collapseId;\n        itemBodyWrapper.innerHTML = `\n        \u003Cdiv class=\"accordion-body\">\n            \u003Cp class=\"accordion-body-input\">${content}\u003C\u002Fp>\n            \u003Cdiv class=\"mt-2\">\n            \u003Cbutton class=\"accordion-delete btn btn-danger btn-sm\">削除\u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        `;\n        itemBodyWrapper.querySelector('.accordion-body-input').contentEditable = true;\n        itemBodyWrapper.querySelector('.accordion-delete').addEventListener('click',()=>{\n            if(window.confirm(\"削除してもよろしいですか？\")) itemWrapper.remove();\n        });\n\n        itemWrapper.appendChild(itemHeaderWrapper);\n        itemWrapper.appendChild(itemBodyWrapper);\n        return itemWrapper;\n        \u002F*\n        生成イメージ\n        \u003Cdiv class=\"accordion-item\">\n            \u003Ch2 class=\"accordion-header\" id=\"headingOne\">\n                \u003Cbutton class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" >\n                    \u003Cdiv class=\"accordion-button-wrapper\">${title}\u003C\u002Fdiv>\n                \u003C\u002Fbutton>\n            \u003C\u002Fh2>\n            \u003Cdiv id=\"${wrapperId}-collaps\" class=\"accordion-collapse collapse show\">\n                \u003Cdiv class=\"accordion-body\">\n                    \u003Cp class=\"accordion-body-input\">${content}\u003C\u002Fp>\n                    \u003Cbutton class=\"accordion-delete btn btn-danger mt-2 btn-sm\">\n                    削除\n                    \u003C\u002Fbutton>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        *\u002F\n    }\n",[118,2790,2791,2803,2830,2847,2862,2887,2891,2918,2944,2967,2979,2984,2999,3004,3011,3041,3045,3072,3116,3130,3142,3147,3161,3166,3171,3176,3181,3187,3216,3253,3292,3301,3305,3323,3340,3348,3353,3358,3363,3368,3373,3378,3383,3388,3393,3398,3403,3409,3415,3421,3427,3432,3437,3443],{"__ignoreMap":116},[121,2792,2793,2795,2797,2799,2801],{"class":123,"line":124},[121,2794,2696],{"class":1261},[121,2796,2659],{"class":980},[121,2798,766],{"class":127},[121,2800,2745],{"class":980},[121,2802,128],{"class":127},[121,2804,2805,2807,2810,2812,2814,2816,2818,2820,2822,2824,2826,2828],{"class":123,"line":131},[121,2806,2015],{"class":137},[121,2808,2809],{"class":980}," itemWrapper",[121,2811,2021],{"class":127},[121,2813,2109],{"class":980},[121,2815,1308],{"class":127},[121,2817,2114],{"class":1261},[121,2819,1265],{"class":608},[121,2821,141],{"class":127},[121,2823,1041],{"class":192},[121,2825,141],{"class":127},[121,2827,1293],{"class":608},[121,2829,1296],{"class":127},[121,2831,2832,2834,2837,2839,2841,2843,2845],{"class":123,"line":154},[121,2833,2015],{"class":137},[121,2835,2836],{"class":980}," wrapperId",[121,2838,2021],{"class":127},[121,2840,2148],{"class":127},[121,2842,2151],{"class":1261},[121,2844,1386],{"class":608},[121,2846,1296],{"class":127},[121,2848,2849,2852,2854,2856,2858,2860],{"class":123,"line":169},[121,2850,2851],{"class":980},"        itemWrapper",[121,2853,1308],{"class":127},[121,2855,182],{"class":980},[121,2857,2021],{"class":127},[121,2859,2836],{"class":980},[121,2861,1296],{"class":127},[121,2863,2864,2866,2868,2870,2872,2874,2876,2878,2881,2883,2885],{"class":123,"line":175},[121,2865,2851],{"class":980},[121,2867,1308],{"class":127},[121,2869,2165],{"class":980},[121,2871,1308],{"class":127},[121,2873,2170],{"class":1261},[121,2875,1265],{"class":608},[121,2877,141],{"class":127},[121,2879,2880],{"class":192},"accordion-item",[121,2882,141],{"class":127},[121,2884,1293],{"class":608},[121,2886,1296],{"class":127},[121,2888,2889],{"class":123,"line":200},[121,2890,1445],{"emptyLinePlaceholder":1444},[121,2892,2893,2895,2898,2900,2902,2904,2906,2908,2910,2912,2914,2916],{"class":123,"line":221},[121,2894,2015],{"class":137},[121,2896,2897],{"class":980}," itemHeaderWrapper",[121,2899,2021],{"class":127},[121,2901,2109],{"class":980},[121,2903,1308],{"class":127},[121,2905,2114],{"class":1261},[121,2907,1265],{"class":608},[121,2909,141],{"class":127},[121,2911,17],{"class":192},[121,2913,141],{"class":127},[121,2915,1293],{"class":608},[121,2917,1296],{"class":127},[121,2919,2920,2923,2925,2927,2929,2931,2933,2935,2938,2940,2942],{"class":123,"line":236},[121,2921,2922],{"class":980},"        itemHeaderWrapper",[121,2924,1308],{"class":127},[121,2926,2165],{"class":980},[121,2928,1308],{"class":127},[121,2930,2170],{"class":1261},[121,2932,1265],{"class":608},[121,2934,141],{"class":127},[121,2936,2937],{"class":192},"accordion-header",[121,2939,141],{"class":127},[121,2941,1293],{"class":608},[121,2943,1296],{"class":127},[121,2945,2946,2948,2951,2953,2955,2958,2960,2963,2965],{"class":123,"line":258},[121,2947,2015],{"class":137},[121,2949,2950],{"class":980}," collapseId",[121,2952,2021],{"class":127},[121,2954,2836],{"class":980},[121,2956,2957],{"class":127},"+",[121,2959,141],{"class":127},[121,2961,2962],{"class":192},"-collapse",[121,2964,141],{"class":127},[121,2966,1296],{"class":127},[121,2968,2969,2971,2973,2975,2977],{"class":123,"line":273},[121,2970,2922],{"class":980},[121,2972,1308],{"class":127},[121,2974,2206],{"class":980},[121,2976,2021],{"class":127},[121,2978,2211],{"class":127},[121,2980,2981],{"class":123,"line":279},[121,2982,2983],{"class":192},"        \u003Cbutton class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\">\n",[121,2985,2986,2989,2992,2994,2996],{"class":123,"line":285},[121,2987,2988],{"class":192},"            \u003Cdiv class=\"accordion-button-wrapper\">",[121,2990,2991],{"class":127},"${",[121,2993,974],{"class":980},[121,2995,1290],{"class":127},[121,2997,2998],{"class":192},"\u003C\u002Fdiv>\n",[121,3000,3001],{"class":123,"line":290},[121,3002,3003],{"class":192},"        \u003C\u002Fbutton>\n",[121,3005,3006,3009],{"class":123,"line":310},[121,3007,3008],{"class":127},"        `",[121,3010,1296],{"class":127},[121,3012,3013,3015,3017,3019,3021,3023,3026,3028,3030,3032,3035,3037,3039],{"class":123,"line":330},[121,3014,2922],{"class":980},[121,3016,1308],{"class":127},[121,3018,2580],{"class":1261},[121,3020,1265],{"class":608},[121,3022,1283],{"class":127},[121,3024,3025],{"class":192},".accordion-button-wrapper",[121,3027,1283],{"class":127},[121,3029,1293],{"class":608},[121,3031,1308],{"class":127},[121,3033,3034],{"class":980},"contentEditable",[121,3036,2021],{"class":127},[121,3038,1860],{"class":1859},[121,3040,1296],{"class":127},[121,3042,3043],{"class":123,"line":343},[121,3044,1445],{"emptyLinePlaceholder":1444},[121,3046,3047,3049,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070],{"class":123,"line":364},[121,3048,2015],{"class":137},[121,3050,3051],{"class":980}," itemBodyWrapper",[121,3053,2021],{"class":127},[121,3055,2109],{"class":980},[121,3057,1308],{"class":127},[121,3059,2114],{"class":1261},[121,3061,1265],{"class":608},[121,3063,141],{"class":127},[121,3065,1041],{"class":192},[121,3067,141],{"class":127},[121,3069,1293],{"class":608},[121,3071,1296],{"class":127},[121,3073,3074,3077,3079,3081,3083,3085,3087,3089,3092,3094,3096,3098,3101,3103,3105,3107,3110,3112,3114],{"class":123,"line":378},[121,3075,3076],{"class":980},"        itemBodyWrapper",[121,3078,1308],{"class":127},[121,3080,2165],{"class":980},[121,3082,1308],{"class":127},[121,3084,2170],{"class":1261},[121,3086,1265],{"class":608},[121,3088,141],{"class":127},[121,3090,3091],{"class":192},"accordion-collapse",[121,3093,141],{"class":127},[121,3095,766],{"class":127},[121,3097,141],{"class":127},[121,3099,3100],{"class":192},"collapse",[121,3102,141],{"class":127},[121,3104,766],{"class":127},[121,3106,141],{"class":127},[121,3108,3109],{"class":192},"show",[121,3111,141],{"class":127},[121,3113,1293],{"class":608},[121,3115,1296],{"class":127},[121,3117,3118,3120,3122,3124,3126,3128],{"class":123,"line":391},[121,3119,3076],{"class":980},[121,3121,1308],{"class":127},[121,3123,182],{"class":980},[121,3125,2021],{"class":127},[121,3127,2950],{"class":980},[121,3129,1296],{"class":127},[121,3131,3132,3134,3136,3138,3140],{"class":123,"line":403},[121,3133,3076],{"class":980},[121,3135,1308],{"class":127},[121,3137,2206],{"class":980},[121,3139,2021],{"class":127},[121,3141,2211],{"class":127},[121,3143,3144],{"class":123,"line":414},[121,3145,3146],{"class":192},"        \u003Cdiv class=\"accordion-body\">\n",[121,3148,3149,3152,3154,3156,3158],{"class":123,"line":420},[121,3150,3151],{"class":192},"            \u003Cp class=\"accordion-body-input\">",[121,3153,2991],{"class":127},[121,3155,2669],{"class":980},[121,3157,1290],{"class":127},[121,3159,3160],{"class":192},"\u003C\u002Fp>\n",[121,3162,3163],{"class":123,"line":425},[121,3164,3165],{"class":192},"            \u003Cdiv class=\"mt-2\">\n",[121,3167,3168],{"class":123,"line":430},[121,3169,3170],{"class":192},"            \u003Cbutton class=\"accordion-delete btn btn-danger btn-sm\">削除\u003C\u002Fbutton>\n",[121,3172,3173],{"class":123,"line":435},[121,3174,3175],{"class":192},"            \u003C\u002Fdiv>\n",[121,3177,3178],{"class":123,"line":455},[121,3179,3180],{"class":192},"        \u003C\u002Fdiv>\n",[121,3182,3183,3185],{"class":123,"line":474},[121,3184,3008],{"class":127},[121,3186,1296],{"class":127},[121,3188,3189,3191,3193,3195,3197,3199,3202,3204,3206,3208,3210,3212,3214],{"class":123,"line":487},[121,3190,3076],{"class":980},[121,3192,1308],{"class":127},[121,3194,2580],{"class":1261},[121,3196,1265],{"class":608},[121,3198,1283],{"class":127},[121,3200,3201],{"class":192},".accordion-body-input",[121,3203,1283],{"class":127},[121,3205,1293],{"class":608},[121,3207,1308],{"class":127},[121,3209,3034],{"class":980},[121,3211,2021],{"class":127},[121,3213,1860],{"class":1859},[121,3215,1296],{"class":127},[121,3217,3218,3220,3222,3224,3226,3228,3231,3233,3235,3237,3239,3241,3243,3245,3247,3249,3251],{"class":123,"line":507},[121,3219,3076],{"class":980},[121,3221,1308],{"class":127},[121,3223,2580],{"class":1261},[121,3225,1265],{"class":608},[121,3227,1283],{"class":127},[121,3229,3230],{"class":192},".accordion-delete",[121,3232,1283],{"class":127},[121,3234,1293],{"class":608},[121,3236,1308],{"class":127},[121,3238,2596],{"class":1261},[121,3240,1265],{"class":608},[121,3242,1283],{"class":127},[121,3244,2603],{"class":192},[121,3246,1283],{"class":127},[121,3248,2608],{"class":127},[121,3250,2611],{"class":137},[121,3252,128],{"class":127},[121,3254,3255,3258,3260,3263,3265,3268,3270,3272,3275,3277,3280,3283,3285,3288,3290],{"class":123,"line":521},[121,3256,3257],{"class":1393},"            if",[121,3259,1265],{"class":608},[121,3261,3262],{"class":980},"window",[121,3264,1308],{"class":127},[121,3266,3267],{"class":1261},"confirm",[121,3269,1265],{"class":608},[121,3271,141],{"class":127},[121,3273,3274],{"class":192},"削除してもよろしいですか？",[121,3276,141],{"class":127},[121,3278,3279],{"class":608},")) ",[121,3281,3282],{"class":980},"itemWrapper",[121,3284,1308],{"class":127},[121,3286,3287],{"class":1261},"remove",[121,3289,1386],{"class":608},[121,3291,1296],{"class":127},[121,3293,3294,3297,3299],{"class":123,"line":526},[121,3295,3296],{"class":127},"        }",[121,3298,1293],{"class":608},[121,3300,1296],{"class":127},[121,3302,3303],{"class":123,"line":531},[121,3304,1445],{"emptyLinePlaceholder":1444},[121,3306,3307,3309,3311,3314,3316,3319,3321],{"class":123,"line":536},[121,3308,2851],{"class":980},[121,3310,1308],{"class":127},[121,3312,3313],{"class":1261},"appendChild",[121,3315,1265],{"class":608},[121,3317,3318],{"class":980},"itemHeaderWrapper",[121,3320,1293],{"class":608},[121,3322,1296],{"class":127},[121,3324,3325,3327,3329,3331,3333,3336,3338],{"class":123,"line":556},[121,3326,2851],{"class":980},[121,3328,1308],{"class":127},[121,3330,3313],{"class":1261},[121,3332,1265],{"class":608},[121,3334,3335],{"class":980},"itemBodyWrapper",[121,3337,1293],{"class":608},[121,3339,1296],{"class":127},[121,3341,3342,3344,3346],{"class":123,"line":576},[121,3343,1394],{"class":1393},[121,3345,2809],{"class":980},[121,3347,1296],{"class":127},[121,3349,3350],{"class":123,"line":589},[121,3351,3352],{"class":1371},"        \u002F*\n",[121,3354,3355],{"class":123,"line":603},[121,3356,3357],{"class":1371},"        生成イメージ\n",[121,3359,3360],{"class":123,"line":623},[121,3361,3362],{"class":1371},"        \u003Cdiv class=\"accordion-item\">\n",[121,3364,3365],{"class":123,"line":629},[121,3366,3367],{"class":1371},"            \u003Ch2 class=\"accordion-header\" id=\"headingOne\">\n",[121,3369,3370],{"class":123,"line":646},[121,3371,3372],{"class":1371},"                \u003Cbutton class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" >\n",[121,3374,3375],{"class":123,"line":661},[121,3376,3377],{"class":1371},"                    \u003Cdiv class=\"accordion-button-wrapper\">${title}\u003C\u002Fdiv>\n",[121,3379,3380],{"class":123,"line":675},[121,3381,3382],{"class":1371},"                \u003C\u002Fbutton>\n",[121,3384,3385],{"class":123,"line":690},[121,3386,3387],{"class":1371},"            \u003C\u002Fh2>\n",[121,3389,3390],{"class":123,"line":695},[121,3391,3392],{"class":1371},"            \u003Cdiv id=\"${wrapperId}-collaps\" class=\"accordion-collapse collapse show\">\n",[121,3394,3395],{"class":123,"line":701},[121,3396,3397],{"class":1371},"                \u003Cdiv class=\"accordion-body\">\n",[121,3399,3400],{"class":123,"line":707},[121,3401,3402],{"class":1371},"                    \u003Cp class=\"accordion-body-input\">${content}\u003C\u002Fp>\n",[121,3404,3406],{"class":123,"line":3405},47,[121,3407,3408],{"class":1371},"                    \u003Cbutton class=\"accordion-delete btn btn-danger mt-2 btn-sm\">\n",[121,3410,3412],{"class":123,"line":3411},48,[121,3413,3414],{"class":1371},"                    削除\n",[121,3416,3418],{"class":123,"line":3417},49,[121,3419,3420],{"class":1371},"                    \u003C\u002Fbutton>\n",[121,3422,3424],{"class":123,"line":3423},50,[121,3425,3426],{"class":1371},"                \u003C\u002Fdiv>\n",[121,3428,3430],{"class":123,"line":3429},51,[121,3431,3175],{"class":1371},[121,3433,3435],{"class":123,"line":3434},52,[121,3436,3180],{"class":1371},[121,3438,3440],{"class":123,"line":3439},53,[121,3441,3442],{"class":1371},"        *\u002F\n",[121,3444,3446],{"class":123,"line":3445},54,[121,3447,1475],{"class":127},[10,3449,3450],{},"そしてアイテムのHTMLを返すようにし、wrapperに挿入します。ここまで実装し、ボタンをクリックした時に以下のようにアコーディオンが表示されます。",[24,3452],{":src":3453,":width":27},"'editorjs-repeatable\u002Fset3.png'",[10,3455,3456,3457,3459],{},"また",[118,3458,3034],{},"をtrueにすることで、",[111,3461,3465],{"className":3462,"code":3464,"language":242},[3463],"language-text","itemHeaderWrapper.querySelector('.accordion-button-wrapper').contentEditable = true;\nitemBodyWrapper.querySelector('.accordion-body-input').contentEditable = true;\n",[118,3466,3464],{"__ignoreMap":116},[10,3468,3469],{},"以下の図のように文字の入力がinputなしでできるようになります。",[24,3471],{":src":3472,":width":27},"'editorjs-repeatable\u002Fset4.png'",[10,3474,3475],{},"そして以下のように削除ボタンにイベントリスナーを実装することで要素の削除ができるようになります。",[111,3477,3479],{"className":1241,"code":3478,"language":1243,"meta":116,"style":116},"itemBodyWrapper.querySelector('.accordion-delete').addEventListener('click',()=>{\n    if(window.confirm(\"削除してもよろしいですか？\")) itemWrapper.remove();\n});\n",[118,3480,3481,3517,3550],{"__ignoreMap":116},[121,3482,3483,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515],{"class":123,"line":124},[121,3484,3335],{"class":980},[121,3486,1308],{"class":127},[121,3488,2580],{"class":1261},[121,3490,1265],{"class":980},[121,3492,1283],{"class":127},[121,3494,3230],{"class":192},[121,3496,1283],{"class":127},[121,3498,1293],{"class":980},[121,3500,1308],{"class":127},[121,3502,2596],{"class":1261},[121,3504,1265],{"class":980},[121,3506,1283],{"class":127},[121,3508,2603],{"class":192},[121,3510,1283],{"class":127},[121,3512,2608],{"class":127},[121,3514,2611],{"class":137},[121,3516,128],{"class":127},[121,3518,3519,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548],{"class":123,"line":131},[121,3520,3521],{"class":1393},"    if",[121,3523,1265],{"class":608},[121,3525,3262],{"class":980},[121,3527,1308],{"class":127},[121,3529,3267],{"class":1261},[121,3531,1265],{"class":608},[121,3533,141],{"class":127},[121,3535,3274],{"class":192},[121,3537,141],{"class":127},[121,3539,3279],{"class":608},[121,3541,3282],{"class":980},[121,3543,1308],{"class":127},[121,3545,3287],{"class":1261},[121,3547,1386],{"class":608},[121,3549,1296],{"class":127},[121,3551,3552,3554,3556],{"class":123,"line":154},[121,3553,1290],{"class":127},[121,3555,1293],{"class":980},[121,3557,1296],{"class":127},[720,3559,3560],{"id":3560},"保存処理",[10,3562,3563],{},"保存ボタンをクリックした時に入力した内容を出力できるようにします。",[111,3565,3567],{"className":776,"code":3566,"language":778,"meta":116,"style":116},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"ja\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fcss\u002Fbootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\u002FazprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n    \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.2.2\u002Fdist\u002Fjs\u002Fbootstrap.bundle.min.js\" integrity=\"sha384-OERcA2EqjJCMA+\u002F3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo\u002F\u002Ff6V8Qbsw3\" crossorigin=\"anonymous\">\u003C\u002Fscript>\n    \u003Ctitle>editorjs\u003C\u002Ftitle>\n    \u003Clink rel=\"stylesheet\" href=\".\u002Fstyle.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"mt-5 border bg-light\">\n            \u003Cdiv id=\"editorjs\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003C!-- 追加 -->\n        \u003Cdiv class=\"mt-2\">　\n            \u003Cbutton id=\"save\" class=\"btn btn-primary\">保存＆出力\u003C\u002Fbutton>\n            \u003Cpre id=\"data\">\u003C\u002Fpre>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@editorjs\u002Feditorjs@latest\">\u003C\u002Fscript>\n\u003Cscript src=\".\u002Fapp.js\">\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[118,3568,3569,3579,3597,3605,3623,3651,3679,3727,3771,3787,3815,3823,3831,3849,3867,3889,3897,3902,3923,3963,3985,3993,4001,4009,4031,4053],{"__ignoreMap":116},[121,3570,3571,3573,3575,3577],{"class":123,"line":124},[121,3572,785],{"class":127},[121,3574,788],{"class":608},[121,3576,791],{"class":137},[121,3578,794],{"class":127},[121,3580,3581,3583,3585,3587,3589,3591,3593,3595],{"class":123,"line":131},[121,3582,799],{"class":127},[121,3584,778],{"class":608},[121,3586,804],{"class":137},[121,3588,807],{"class":127},[121,3590,141],{"class":127},[121,3592,812],{"class":192},[121,3594,141],{"class":127},[121,3596,794],{"class":127},[121,3598,3599,3601,3603],{"class":123,"line":154},[121,3600,799],{"class":127},[121,3602,823],{"class":608},[121,3604,794],{"class":127},[121,3606,3607,3609,3611,3613,3615,3617,3619,3621],{"class":123,"line":169},[121,3608,830],{"class":127},[121,3610,833],{"class":608},[121,3612,836],{"class":137},[121,3614,807],{"class":127},[121,3616,141],{"class":127},[121,3618,843],{"class":192},[121,3620,141],{"class":127},[121,3622,794],{"class":127},[121,3624,3625,3627,3629,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649],{"class":123,"line":175},[121,3626,830],{"class":127},[121,3628,833],{"class":608},[121,3630,856],{"class":137},[121,3632,807],{"class":127},[121,3634,141],{"class":127},[121,3636,863],{"class":192},[121,3638,141],{"class":127},[121,3640,868],{"class":137},[121,3642,807],{"class":127},[121,3644,141],{"class":127},[121,3646,875],{"class":192},[121,3648,141],{"class":127},[121,3650,794],{"class":127},[121,3652,3653,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673,3675,3677],{"class":123,"line":200},[121,3654,830],{"class":127},[121,3656,833],{"class":608},[121,3658,888],{"class":137},[121,3660,807],{"class":127},[121,3662,141],{"class":127},[121,3664,895],{"class":192},[121,3666,141],{"class":127},[121,3668,868],{"class":137},[121,3670,807],{"class":127},[121,3672,141],{"class":127},[121,3674,906],{"class":192},[121,3676,141],{"class":127},[121,3678,794],{"class":127},[121,3680,3681,3683,3685,3687,3689,3691,3693,3695,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717,3719,3721,3723,3725],{"class":123,"line":221},[121,3682,830],{"class":127},[121,3684,917],{"class":608},[121,3686,920],{"class":137},[121,3688,807],{"class":127},[121,3690,141],{"class":127},[121,3692,927],{"class":192},[121,3694,141],{"class":127},[121,3696,932],{"class":137},[121,3698,807],{"class":127},[121,3700,141],{"class":127},[121,3702,939],{"class":192},[121,3704,141],{"class":127},[121,3706,944],{"class":137},[121,3708,807],{"class":127},[121,3710,141],{"class":127},[121,3712,951],{"class":192},[121,3714,141],{"class":127},[121,3716,956],{"class":137},[121,3718,807],{"class":127},[121,3720,141],{"class":127},[121,3722,963],{"class":192},[121,3724,141],{"class":127},[121,3726,794],{"class":127},[121,3728,3729,3731,3733,3735,3737,3739,3742,3744,3746,3748,3750,3753,3755,3757,3759,3761,3763,3765,3767,3769],{"class":123,"line":236},[121,3730,830],{"class":127},[121,3732,1182],{"class":608},[121,3734,1185],{"class":137},[121,3736,807],{"class":127},[121,3738,141],{"class":127},[121,3740,3741],{"class":192},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.2.2\u002Fdist\u002Fjs\u002Fbootstrap.bundle.min.js",[121,3743,141],{"class":127},[121,3745,944],{"class":137},[121,3747,807],{"class":127},[121,3749,141],{"class":127},[121,3751,3752],{"class":192},"sha384-OERcA2EqjJCMA+\u002F3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo\u002F\u002Ff6V8Qbsw3",[121,3754,141],{"class":127},[121,3756,956],{"class":137},[121,3758,807],{"class":127},[121,3760,141],{"class":127},[121,3762,963],{"class":192},[121,3764,141],{"class":127},[121,3766,1096],{"class":127},[121,3768,1182],{"class":608},[121,3770,794],{"class":127},[121,3772,3773,3775,3777,3779,3781,3783,3785],{"class":123,"line":258},[121,3774,830],{"class":127},[121,3776,974],{"class":608},[121,3778,977],{"class":127},[121,3780,981],{"class":980},[121,3782,984],{"class":127},[121,3784,974],{"class":608},[121,3786,794],{"class":127},[121,3788,3789,3791,3793,3795,3797,3799,3801,3803,3805,3807,3809,3811,3813],{"class":123,"line":273},[121,3790,830],{"class":127},[121,3792,917],{"class":608},[121,3794,932],{"class":137},[121,3796,807],{"class":127},[121,3798,141],{"class":127},[121,3800,939],{"class":192},[121,3802,141],{"class":127},[121,3804,920],{"class":137},[121,3806,807],{"class":127},[121,3808,141],{"class":127},[121,3810,1013],{"class":192},[121,3812,141],{"class":127},[121,3814,794],{"class":127},[121,3816,3817,3819,3821],{"class":123,"line":279},[121,3818,984],{"class":127},[121,3820,823],{"class":608},[121,3822,794],{"class":127},[121,3824,3825,3827,3829],{"class":123,"line":285},[121,3826,799],{"class":127},[121,3828,1032],{"class":608},[121,3830,794],{"class":127},[121,3832,3833,3835,3837,3839,3841,3843,3845,3847],{"class":123,"line":290},[121,3834,830],{"class":127},[121,3836,1041],{"class":608},[121,3838,1044],{"class":137},[121,3840,807],{"class":127},[121,3842,141],{"class":127},[121,3844,1051],{"class":192},[121,3846,141],{"class":127},[121,3848,794],{"class":127},[121,3850,3851,3853,3855,3857,3859,3861,3863,3865],{"class":123,"line":310},[121,3852,1060],{"class":127},[121,3854,1041],{"class":608},[121,3856,1044],{"class":137},[121,3858,807],{"class":127},[121,3860,141],{"class":127},[121,3862,1071],{"class":192},[121,3864,141],{"class":127},[121,3866,794],{"class":127},[121,3868,3869,3871,3873,3875,3877,3879,3881,3883,3885,3887],{"class":123,"line":330},[121,3870,1080],{"class":127},[121,3872,1041],{"class":608},[121,3874,1085],{"class":137},[121,3876,807],{"class":127},[121,3878,141],{"class":127},[121,3880,981],{"class":192},[121,3882,141],{"class":127},[121,3884,1096],{"class":127},[121,3886,1041],{"class":608},[121,3888,794],{"class":127},[121,3890,3891,3893,3895],{"class":123,"line":343},[121,3892,1105],{"class":127},[121,3894,1041],{"class":608},[121,3896,794],{"class":127},[121,3898,3899],{"class":123,"line":364},[121,3900,3901],{"class":1371},"        \u003C!-- 追加 -->\n",[121,3903,3904,3906,3908,3910,3912,3914,3916,3918,3920],{"class":123,"line":378},[121,3905,1060],{"class":127},[121,3907,1041],{"class":608},[121,3909,1044],{"class":137},[121,3911,807],{"class":127},[121,3913,141],{"class":127},[121,3915,1124],{"class":192},[121,3917,141],{"class":127},[121,3919,977],{"class":127},[121,3921,3922],{"class":980},"　\n",[121,3924,3925,3927,3930,3932,3934,3936,3939,3941,3943,3945,3947,3950,3952,3954,3957,3959,3961],{"class":123,"line":391},[121,3926,1080],{"class":127},[121,3928,3929],{"class":608},"button",[121,3931,1085],{"class":137},[121,3933,807],{"class":127},[121,3935,141],{"class":127},[121,3937,3938],{"class":192},"save",[121,3940,141],{"class":127},[121,3942,1044],{"class":137},[121,3944,807],{"class":127},[121,3946,141],{"class":127},[121,3948,3949],{"class":192},"btn btn-primary",[121,3951,141],{"class":127},[121,3953,977],{"class":127},[121,3955,3956],{"class":980},"保存＆出力",[121,3958,984],{"class":127},[121,3960,3929],{"class":608},[121,3962,794],{"class":127},[121,3964,3965,3967,3969,3971,3973,3975,3977,3979,3981,3983],{"class":123,"line":403},[121,3966,1080],{"class":127},[121,3968,111],{"class":608},[121,3970,1085],{"class":137},[121,3972,807],{"class":127},[121,3974,141],{"class":127},[121,3976,226],{"class":192},[121,3978,141],{"class":127},[121,3980,1096],{"class":127},[121,3982,111],{"class":608},[121,3984,794],{"class":127},[121,3986,3987,3989,3991],{"class":123,"line":414},[121,3988,1105],{"class":127},[121,3990,1041],{"class":608},[121,3992,794],{"class":127},[121,3994,3995,3997,3999],{"class":123,"line":420},[121,3996,1163],{"class":127},[121,3998,1041],{"class":608},[121,4000,794],{"class":127},[121,4002,4003,4005,4007],{"class":123,"line":425},[121,4004,984],{"class":127},[121,4006,1032],{"class":608},[121,4008,794],{"class":127},[121,4010,4011,4013,4015,4017,4019,4021,4023,4025,4027,4029],{"class":123,"line":430},[121,4012,799],{"class":127},[121,4014,1182],{"class":608},[121,4016,1185],{"class":137},[121,4018,807],{"class":127},[121,4020,141],{"class":127},[121,4022,1192],{"class":192},[121,4024,141],{"class":127},[121,4026,1096],{"class":127},[121,4028,1182],{"class":608},[121,4030,794],{"class":127},[121,4032,4033,4035,4037,4039,4041,4043,4045,4047,4049,4051],{"class":123,"line":435},[121,4034,799],{"class":127},[121,4036,1182],{"class":608},[121,4038,1185],{"class":137},[121,4040,807],{"class":127},[121,4042,141],{"class":127},[121,4044,1215],{"class":192},[121,4046,141],{"class":127},[121,4048,1096],{"class":127},[121,4050,1182],{"class":608},[121,4052,794],{"class":127},[121,4054,4055,4057,4059],{"class":123,"line":455},[121,4056,984],{"class":127},[121,4058,778],{"class":608},[121,4060,794],{"class":127},[111,4062,4064],{"className":1241,"code":4063,"language":1243,"meta":116,"style":116},"const pre = document.getElementById(\"data\");\ndocument.getElementById(\"save\").addEventListener(\"click\",()=>{\n    editor.save().then((outputData) => {\n        pre.textContent = JSON.stringify(outputData, null , \"\\t\");\n    }).catch((error) => {\n        console.log('Saving failed: ', error)\n    });\n})\n",[118,4065,4066,4094,4131,4161,4204,4228,4255,4263],{"__ignoreMap":116},[121,4067,4068,4070,4073,4075,4077,4079,4082,4084,4086,4088,4090,4092],{"class":123,"line":124},[121,4069,1250],{"class":137},[121,4071,4072],{"class":980}," pre ",[121,4074,807],{"class":127},[121,4076,2109],{"class":980},[121,4078,1308],{"class":127},[121,4080,4081],{"class":1261},"getElementById",[121,4083,1265],{"class":980},[121,4085,141],{"class":127},[121,4087,226],{"class":192},[121,4089,141],{"class":127},[121,4091,1293],{"class":980},[121,4093,1296],{"class":127},[121,4095,4096,4099,4101,4103,4105,4107,4109,4111,4113,4115,4117,4119,4121,4123,4125,4127,4129],{"class":123,"line":131},[121,4097,4098],{"class":980},"document",[121,4100,1308],{"class":127},[121,4102,4081],{"class":1261},[121,4104,1265],{"class":980},[121,4106,141],{"class":127},[121,4108,3938],{"class":192},[121,4110,141],{"class":127},[121,4112,1293],{"class":980},[121,4114,1308],{"class":127},[121,4116,2596],{"class":1261},[121,4118,1265],{"class":980},[121,4120,141],{"class":127},[121,4122,2603],{"class":192},[121,4124,141],{"class":127},[121,4126,2608],{"class":127},[121,4128,2611],{"class":137},[121,4130,128],{"class":127},[121,4132,4133,4136,4138,4140,4142,4144,4147,4149,4151,4154,4156,4159],{"class":123,"line":154},[121,4134,4135],{"class":980},"    editor",[121,4137,1308],{"class":127},[121,4139,3938],{"class":1261},[121,4141,1386],{"class":608},[121,4143,1308],{"class":127},[121,4145,4146],{"class":1261},"then",[121,4148,1265],{"class":608},[121,4150,1265],{"class":127},[121,4152,4153],{"class":1456},"outputData",[121,4155,1293],{"class":127},[121,4157,4158],{"class":137}," =>",[121,4160,233],{"class":127},[121,4162,4163,4166,4168,4171,4173,4176,4178,4181,4183,4185,4187,4190,4193,4195,4198,4200,4202],{"class":123,"line":169},[121,4164,4165],{"class":980},"        pre",[121,4167,1308],{"class":127},[121,4169,4170],{"class":980},"textContent",[121,4172,2021],{"class":127},[121,4174,4175],{"class":980}," JSON",[121,4177,1308],{"class":127},[121,4179,4180],{"class":1261},"stringify",[121,4182,1265],{"class":608},[121,4184,4153],{"class":980},[121,4186,766],{"class":127},[121,4188,4189],{"class":127}," null",[121,4191,4192],{"class":127}," ,",[121,4194,189],{"class":127},[121,4196,4197],{"class":980},"\\t",[121,4199,141],{"class":127},[121,4201,1293],{"class":608},[121,4203,1296],{"class":127},[121,4205,4206,4208,4210,4212,4215,4217,4219,4222,4224,4226],{"class":123,"line":175},[121,4207,1436],{"class":127},[121,4209,1293],{"class":608},[121,4211,1308],{"class":127},[121,4213,4214],{"class":1261},"catch",[121,4216,1265],{"class":608},[121,4218,1265],{"class":127},[121,4220,4221],{"class":1456},"error",[121,4223,1293],{"class":127},[121,4225,4158],{"class":137},[121,4227,233],{"class":127},[121,4229,4230,4233,4235,4238,4240,4242,4245,4247,4249,4252],{"class":123,"line":200},[121,4231,4232],{"class":980},"        console",[121,4234,1308],{"class":127},[121,4236,4237],{"class":1261},"log",[121,4239,1265],{"class":608},[121,4241,1283],{"class":127},[121,4243,4244],{"class":192},"Saving failed: ",[121,4246,1283],{"class":127},[121,4248,766],{"class":127},[121,4250,4251],{"class":980}," error",[121,4253,4254],{"class":608},")\n",[121,4256,4257,4259,4261],{"class":123,"line":221},[121,4258,1436],{"class":127},[121,4260,1293],{"class":608},[121,4262,1296],{"class":127},[121,4264,4265,4267],{"class":123,"line":236},[121,4266,1290],{"class":127},[121,4268,4254],{"class":980},[10,4270,4271,4272,4275,4276,4281,4282,4284,4285,4288,4289,4291,4292,4294],{},"editor.jsでブロックのデータを出力したい時は",[118,4273,4274],{},"editor.save()","を使用します。Promiseなので非同期でデータが出力されます。今回はJSONで出力するようにしました。",[85,4277,4280],{"href":4278,"rel":4279},"https:\u002F\u002Fapps.jun-app.com\u002Feditorjs-sample\u002F",[89],"デモサイト","で確認できます。",[118,4283,4274],{},"では全ブロッククラスの",[118,4286,4287],{},"save()","が呼ばれるため、",[118,4290,1849],{},"クラスでも",[118,4293,4287],{},"メソッドを実装します。",[111,4296,4298],{"className":1241,"code":4297,"language":1243,"meta":116,"style":116},"save(blockContent){\n    const contents = blockContent.querySelectorAll(\".accordion-item\");\n    const itmes = Array.prototype.map.call(contents, (item)=>{\n        const title = item.querySelector(\".accordion-button-wrapper\");\n        const content = item.querySelector(\".accordion-body-input\");\n\n        return {\n            title:title.innerHTML || \"\",\n            content:content.innerHTML || \"\",\n        };\n    })\n    return {\n        itmes\n    }\n}\n",[118,4299,4300,4309,4339,4385,4413,4439,4443,4449,4467,4486,4490,4496,4502,4507,4511],{"__ignoreMap":116},[121,4301,4302,4304,4307],{"class":123,"line":124},[121,4303,3938],{"class":1261},[121,4305,4306],{"class":980},"(blockContent)",[121,4308,128],{"class":127},[121,4310,4311,4313,4316,4318,4321,4323,4326,4328,4330,4333,4335,4337],{"class":123,"line":131},[121,4312,2101],{"class":137},[121,4314,4315],{"class":980}," contents",[121,4317,2021],{"class":127},[121,4319,4320],{"class":980}," blockContent",[121,4322,1308],{"class":127},[121,4324,4325],{"class":1261},"querySelectorAll",[121,4327,1265],{"class":608},[121,4329,141],{"class":127},[121,4331,4332],{"class":192},".accordion-item",[121,4334,141],{"class":127},[121,4336,1293],{"class":608},[121,4338,1296],{"class":127},[121,4340,4341,4343,4346,4348,4351,4353,4356,4358,4361,4363,4366,4368,4371,4373,4376,4379,4381,4383],{"class":123,"line":154},[121,4342,2101],{"class":137},[121,4344,4345],{"class":980}," itmes",[121,4347,2021],{"class":127},[121,4349,4350],{"class":181}," Array",[121,4352,1308],{"class":127},[121,4354,4355],{"class":980},"prototype",[121,4357,1308],{"class":127},[121,4359,4360],{"class":980},"map",[121,4362,1308],{"class":127},[121,4364,4365],{"class":1261},"call",[121,4367,1265],{"class":608},[121,4369,4370],{"class":980},"contents",[121,4372,766],{"class":127},[121,4374,4375],{"class":127}," (",[121,4377,4378],{"class":1456},"item",[121,4380,1293],{"class":127},[121,4382,2611],{"class":137},[121,4384,128],{"class":127},[121,4386,4387,4389,4392,4394,4397,4399,4401,4403,4405,4407,4409,4411],{"class":123,"line":169},[121,4388,2015],{"class":137},[121,4390,4391],{"class":980}," title",[121,4393,2021],{"class":127},[121,4395,4396],{"class":980}," item",[121,4398,1308],{"class":127},[121,4400,2580],{"class":1261},[121,4402,1265],{"class":608},[121,4404,141],{"class":127},[121,4406,3025],{"class":192},[121,4408,141],{"class":127},[121,4410,1293],{"class":608},[121,4412,1296],{"class":127},[121,4414,4415,4417,4419,4421,4423,4425,4427,4429,4431,4433,4435,4437],{"class":123,"line":175},[121,4416,2015],{"class":137},[121,4418,868],{"class":980},[121,4420,2021],{"class":127},[121,4422,4396],{"class":980},[121,4424,1308],{"class":127},[121,4426,2580],{"class":1261},[121,4428,1265],{"class":608},[121,4430,141],{"class":127},[121,4432,3201],{"class":192},[121,4434,141],{"class":127},[121,4436,1293],{"class":608},[121,4438,1296],{"class":127},[121,4440,4441],{"class":123,"line":200},[121,4442,1445],{"emptyLinePlaceholder":1444},[121,4444,4445,4447],{"class":123,"line":221},[121,4446,1394],{"class":1393},[121,4448,233],{"class":127},[121,4450,4451,4453,4455,4457,4459,4461,4463,4465],{"class":123,"line":236},[121,4452,1401],{"class":608},[121,4454,1275],{"class":127},[121,4456,974],{"class":980},[121,4458,1308],{"class":127},[121,4460,2206],{"class":980},[121,4462,2031],{"class":127},[121,4464,641],{"class":127},[121,4466,151],{"class":127},[121,4468,4469,4472,4474,4476,4478,4480,4482,4484],{"class":123,"line":258},[121,4470,4471],{"class":608},"            content",[121,4473,1275],{"class":127},[121,4475,2669],{"class":980},[121,4477,1308],{"class":127},[121,4479,2206],{"class":980},[121,4481,2031],{"class":127},[121,4483,641],{"class":127},[121,4485,151],{"class":127},[121,4487,4488],{"class":123,"line":273},[121,4489,1983],{"class":127},[121,4491,4492,4494],{"class":123,"line":279},[121,4493,1436],{"class":127},[121,4495,4254],{"class":608},[121,4497,4498,4500],{"class":123,"line":285},[121,4499,2429],{"class":1393},[121,4501,233],{"class":127},[121,4503,4504],{"class":123,"line":290},[121,4505,4506],{"class":980},"        itmes\n",[121,4508,4509],{"class":123,"line":310},[121,4510,1475],{"class":127},[121,4512,4513],{"class":123,"line":330},[121,4514,710],{"class":127},[10,4516,4517,1539,4519,4521,4522,4525,4526,4529,4530,2779,4532,4534,4535,4538,4539,4541],{},[118,4518,1501],{},[118,4520,1529],{},"で表示しているwrapperのDOMが渡されます。今回のクラスの場合、",[118,4523,4524],{},"this.wrapper","とほぼ同じです。save()で行うことはブロックのDOMからアコーディオンのタイトルと内容を取得します。複数個のアコーディオン要素があるので",[118,4527,4528],{},"blockContent.querySelectorAll(\".accordion-item\")","でNodeListを取得し、",[118,4531,3025],{},[118,4533,3201],{},"の",[118,4536,4537],{},"innnerHtml","を取得して、",[118,4540,4287],{},"で返したいオブジェクトに当てはめます。",[111,4543,4545],{"className":1241,"code":4544,"language":1243,"meta":116,"style":116},"return {\n    items\n};\n\u002F\u002F ↓\n\u002F\u002F return {\n\u002F\u002F     items:[\n\u002F\u002F         {\n\u002F\u002F             title:\"...\",\n\u002F\u002F             content:\"...\",\n\u002F\u002F         },\n\u002F\u002F         {\n\u002F\u002F             title:\"...\",\n\u002F\u002F             content:\"...\",\n\u002F\u002F         },\n\u002F\u002F         {\n\u002F\u002F             title:\"...\",\n\u002F\u002F             content:\"...\",\n\u002F\u002F         },\n\u002F\u002F         ...\n\u002F\u002F     ]\n\u002F\u002F };\n",[118,4546,4547,4554,4559,4564,4569,4574,4579,4584,4589,4594,4599,4603,4607,4611,4615,4619,4623,4627,4631,4636,4641],{"__ignoreMap":116},[121,4548,4549,4552],{"class":123,"line":124},[121,4550,4551],{"class":1393},"return",[121,4553,233],{"class":127},[121,4555,4556],{"class":123,"line":131},[121,4557,4558],{"class":980},"    items\n",[121,4560,4561],{"class":123,"line":154},[121,4562,4563],{"class":127},"};\n",[121,4565,4566],{"class":123,"line":169},[121,4567,4568],{"class":1371},"\u002F\u002F ↓\n",[121,4570,4571],{"class":123,"line":175},[121,4572,4573],{"class":1371},"\u002F\u002F return {\n",[121,4575,4576],{"class":123,"line":200},[121,4577,4578],{"class":1371},"\u002F\u002F     items:[\n",[121,4580,4581],{"class":123,"line":221},[121,4582,4583],{"class":1371},"\u002F\u002F         {\n",[121,4585,4586],{"class":123,"line":236},[121,4587,4588],{"class":1371},"\u002F\u002F             title:\"...\",\n",[121,4590,4591],{"class":123,"line":258},[121,4592,4593],{"class":1371},"\u002F\u002F             content:\"...\",\n",[121,4595,4596],{"class":123,"line":273},[121,4597,4598],{"class":1371},"\u002F\u002F         },\n",[121,4600,4601],{"class":123,"line":279},[121,4602,4583],{"class":1371},[121,4604,4605],{"class":123,"line":285},[121,4606,4588],{"class":1371},[121,4608,4609],{"class":123,"line":290},[121,4610,4593],{"class":1371},[121,4612,4613],{"class":123,"line":310},[121,4614,4598],{"class":1371},[121,4616,4617],{"class":123,"line":330},[121,4618,4583],{"class":1371},[121,4620,4621],{"class":123,"line":343},[121,4622,4588],{"class":1371},[121,4624,4625],{"class":123,"line":364},[121,4626,4593],{"class":1371},[121,4628,4629],{"class":123,"line":378},[121,4630,4598],{"class":1371},[121,4632,4633],{"class":123,"line":391},[121,4634,4635],{"class":1371},"\u002F\u002F         ...\n",[121,4637,4638],{"class":123,"line":403},[121,4639,4640],{"class":1371},"\u002F\u002F     ]\n",[121,4642,4643],{"class":123,"line":414},[121,4644,4645],{"class":1371},"\u002F\u002F };\n",[10,4647,4648,4651],{},[85,4649,4280],{"href":4278,"rel":4650},[89],"でアコーディオンを作成し、文字を入力して「保存・出力」をクリックすると上記のオブジェクトをJSON化したものが表示されると思います。",[24,4653],{":src":4654,":width":27},"'editorjs-repeatable\u002Fset5.png'",[720,4656,4657],{"id":4657},"インラインツールをサポートする",[10,4659,4660,4661,4664],{},"冒頭で",[118,4662,4663],{},"inlineToolbar: true","を指定するとリッチテキストを使用できるようになり、文章に対して太字、斜体、リンクを付与するツールが出現するようになります。",[24,4666],{":src":4667,":width":27},"'editorjs-repeatable\u002Fset6.png'",[10,4669,4670],{},"リッチテキストを保存、再現する場合はinnetHtmlをget、setする必要があります。",[720,4672,4673],{"id":4673},"データを渡された時の処理",[10,4675,4676],{},"上記まではフォームを表示し、エディタ上で文章を入力して、保存・出力しました。しかし実際の用途では保存したデータから再度エディタ上に表示できるようにしましょう。",[10,4678,4679,4680,4683,4684,4686],{},"エディタにデータを渡す時は",[118,4681,4682],{},"Editor","クラスに",[118,4685,226],{},"プロパティーに出力したデータを設定すれば大丈夫です。",[111,4688,4690],{"className":1241,"code":4689,"language":1243,"meta":116,"style":116},"const editor = new EditorJS({\n    holder: 'editorjs',\n    tools: { \n        accordion : {class:Accordion,inlineToolbar: true}\n    },\n\n    \u002F\u002F ここ\n    data:JSON.parse('出力したデータ')\n});\n",[118,4691,4692,4708,4722,4732,4756,4761,4765,4770,4796],{"__ignoreMap":116},[121,4693,4694,4696,4698,4700,4702,4704,4706],{"class":123,"line":124},[121,4695,1250],{"class":137},[121,4697,1253],{"class":980},[121,4699,807],{"class":127},[121,4701,1258],{"class":127},[121,4703,1262],{"class":1261},[121,4705,1265],{"class":980},[121,4707,128],{"class":127},[121,4709,4710,4712,4714,4716,4718,4720],{"class":123,"line":131},[121,4711,1272],{"class":608},[121,4713,1275],{"class":127},[121,4715,1278],{"class":127},[121,4717,981],{"class":192},[121,4719,1283],{"class":127},[121,4721,151],{"class":127},[121,4723,4724,4726,4728,4730],{"class":123,"line":154},[121,4725,1826],{"class":608},[121,4727,1275],{"class":127},[121,4729,1831],{"class":127},[121,4731,1439],{"class":980},[121,4733,4734,4736,4738,4740,4742,4744,4746,4748,4750,4752,4754],{"class":123,"line":169},[121,4735,1838],{"class":608},[121,4737,1275],{"class":127},[121,4739,1831],{"class":127},[121,4741,1361],{"class":608},[121,4743,1275],{"class":127},[121,4745,1849],{"class":980},[121,4747,766],{"class":127},[121,4749,1854],{"class":608},[121,4751,1275],{"class":127},[121,4753,1860],{"class":1859},[121,4755,710],{"class":127},[121,4757,4758],{"class":123,"line":175},[121,4759,4760],{"class":127},"    },\n",[121,4762,4763],{"class":123,"line":200},[121,4764,1445],{"emptyLinePlaceholder":1444},[121,4766,4767],{"class":123,"line":221},[121,4768,4769],{"class":1371},"    \u002F\u002F ここ\n",[121,4771,4772,4775,4777,4780,4782,4785,4787,4789,4792,4794],{"class":123,"line":236},[121,4773,4774],{"class":608},"    data",[121,4776,1275],{"class":127},[121,4778,4779],{"class":980},"JSON",[121,4781,1308],{"class":127},[121,4783,4784],{"class":1261},"parse",[121,4786,1265],{"class":980},[121,4788,1283],{"class":127},[121,4790,4791],{"class":192},"出力したデータ",[121,4793,1283],{"class":127},[121,4795,4254],{"class":980},[121,4797,4798,4800,4802],{"class":123,"line":258},[121,4799,1290],{"class":127},[121,4801,1293],{"class":980},[121,4803,1296],{"class":127},[10,4805,4806,4807,4809,4810,4812,4813,4815],{},"JSONで保存した時はパースでします。JSON内の",[118,4808,159],{},"内の各ブロックの",[118,4811,205],{},"から判別してブロッククラスを当てはめてくれます。そしてこのデータはブロッククラスのコンストラクタに",[118,4814,226],{},"という引数で渡されます。",[111,4817,4819],{"className":1241,"code":4818,"language":1243,"meta":116,"style":116},"class Accordion{\n    constructor({data,config,api}){\n        \u002F\u002F これ！\n        const accordionData = data.itmes || [];\n\n        this.createParentWrapper();\n\n        \u002F\u002F データ当てはめ\n        if(accordionData.length > 0){\n            accordionData.forEach(element => {\n                this.addItemEle(element.title,element.content);\n            });\n        }\n    }\n}\n",[118,4820,4821,4829,4847,4852,4872,4876,4886,4890,4895,4918,4937,4964,4973,4977,4981],{"__ignoreMap":116},[121,4822,4823,4825,4827],{"class":123,"line":124},[121,4824,1361],{"class":137},[121,4826,1364],{"class":181},[121,4828,128],{"class":127},[121,4830,4831,4833,4835,4837,4839,4841,4843,4845],{"class":123,"line":131},[121,4832,1450],{"class":137},[121,4834,1453],{"class":127},[121,4836,226],{"class":1456},[121,4838,766],{"class":127},[121,4840,1467],{"class":1456},[121,4842,766],{"class":127},[121,4844,1462],{"class":1456},[121,4846,2010],{"class":127},[121,4848,4849],{"class":123,"line":154},[121,4850,4851],{"class":1371},"        \u002F\u002F これ！\n",[121,4853,4854,4856,4858,4860,4862,4864,4866,4868,4870],{"class":123,"line":169},[121,4855,2015],{"class":137},[121,4857,2018],{"class":980},[121,4859,2021],{"class":127},[121,4861,1457],{"class":980},[121,4863,1308],{"class":127},[121,4865,2028],{"class":980},[121,4867,2031],{"class":127},[121,4869,2034],{"class":608},[121,4871,1296],{"class":127},[121,4873,4874],{"class":123,"line":175},[121,4875,1445],{"emptyLinePlaceholder":1444},[121,4877,4878,4880,4882,4884],{"class":123,"line":200},[121,4879,2041],{"class":127},[121,4881,2044],{"class":1261},[121,4883,1386],{"class":608},[121,4885,1296],{"class":127},[121,4887,4888],{"class":123,"line":221},[121,4889,1445],{"emptyLinePlaceholder":1444},[121,4891,4892],{"class":123,"line":236},[121,4893,4894],{"class":1371},"        \u002F\u002F データ当てはめ\n",[121,4896,4897,4900,4902,4905,4907,4909,4912,4914,4916],{"class":123,"line":258},[121,4898,4899],{"class":1393},"        if",[121,4901,1265],{"class":608},[121,4903,4904],{"class":980},"accordionData",[121,4906,1308],{"class":127},[121,4908,2324],{"class":980},[121,4910,4911],{"class":127}," >",[121,4913,2345],{"class":147},[121,4915,1293],{"class":608},[121,4917,128],{"class":127},[121,4919,4920,4923,4925,4928,4930,4933,4935],{"class":123,"line":273},[121,4921,4922],{"class":980},"            accordionData",[121,4924,1308],{"class":127},[121,4926,4927],{"class":1261},"forEach",[121,4929,1265],{"class":608},[121,4931,4932],{"class":1456},"element",[121,4934,4158],{"class":137},[121,4936,233],{"class":127},[121,4938,4939,4942,4944,4946,4948,4950,4952,4954,4956,4958,4960,4962],{"class":123,"line":279},[121,4940,4941],{"class":127},"                this.",[121,4943,2620],{"class":1261},[121,4945,1265],{"class":608},[121,4947,4932],{"class":980},[121,4949,1308],{"class":127},[121,4951,974],{"class":980},[121,4953,766],{"class":127},[121,4955,4932],{"class":980},[121,4957,1308],{"class":127},[121,4959,2669],{"class":980},[121,4961,1293],{"class":608},[121,4963,1296],{"class":127},[121,4965,4966,4969,4971],{"class":123,"line":285},[121,4967,4968],{"class":127},"            }",[121,4970,1293],{"class":608},[121,4972,1296],{"class":127},[121,4974,4975],{"class":123,"line":290},[121,4976,698],{"class":127},[121,4978,4979],{"class":123,"line":310},[121,4980,1475],{"class":127},[121,4982,4983],{"class":123,"line":330},[121,4984,710],{"class":127},[10,4986,4987,4988,4991,4992,4995,4996,4999],{},"そしてデータが存在する場合、",[118,4989,4990],{},"data.itmes","を",[118,4993,4994],{},"foreach","で",[118,4997,4998],{},"this.addItemEle()","を通じてフォームのDOMを生成します。",[17,5001,5002],{"id":5002},"まとめ",[10,5004,5005],{},"Editor.jsにおける反復入力できるブロックの作成方法は以上となります。editor.jsでのブロック作成の基本は",[93,5007,5008,5013,5019],{},[35,5009,5010,5012],{},[118,5011,1529],{},"でブロックのDOMを返す。",[35,5014,5015,5018],{},[118,5016,5017],{},"constructor()","で初期処理を行う。",[35,5020,5021,5023],{},[118,5022,4287],{},"でブロックのDOMから値を取得してオブジェクトで返す。",[10,5025,5026,5027,5029,5030,5032],{},"以上となります。簡単のブロックの場合、",[118,5028,1529],{},"に",[118,5031,2757],{},"で作成したようなDOM生成のコードを書いてもいいですが、今回は要素の追加・削除が必要なためメソッドを分けました。",[10,5034,5035,5036,5038],{},"ただし",[118,5037,2757],{},"の中を見ると結構ごちゃごちゃしています。vue.jsやreact.jsに慣れた人にとってみると、saveでの値の取得が面倒に感じるかもしれません。DOMの生成部分は正直undersocre.jsのtemplateなどを使用してデータバインディングを使用した方がより複雑なブロックを作成できると思います。今度はundersocre.jsと組み合わせて複雑な入力形態をとれるようにしてみます。",[10,5040,5041,5042,5045],{},"今回作成したコードは",[85,5043,4280],{"href":4278,"rel":5044},[89],"からご確認ください。",[348,5047,5048],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}",{"title":116,"searchDepth":154,"depth":154,"links":5050},[5051,5052,5056,5057,5058,5059,5066],{"id":19,"depth":131,"text":19},{"id":79,"depth":131,"text":80,"children":5053},[5054,5055],{"id":722,"depth":154,"text":722},{"id":728,"depth":154,"text":728},{"id":749,"depth":131,"text":749},{"id":758,"depth":131,"text":759},{"id":1339,"depth":131,"text":1339},{"id":1654,"depth":131,"text":1654,"children":5060},[5061,5062,5063,5064,5065],{"id":1904,"depth":154,"text":1904},{"id":2767,"depth":154,"text":2767},{"id":3560,"depth":154,"text":3560},{"id":4657,"depth":154,"text":4657},{"id":4673,"depth":154,"text":4673},{"id":5002,"depth":131,"text":5002},[5068],"devstack","2025-10-21","md",null,{},"\u002Farticles\u002Feditorjs-repeatable",{"title":5,"description":5},"articles\u002Feditorjs-repeatable",[1243],"fqFXMzrX-J2WaHaq3V6xcHNSXu0M84XC2Fj6Q3A2fvY",1780987140646]