-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1322 lines (1130 loc) · 80.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#">
<head>
<!--
`.--::://///:-.
`-://++++++////++++//-:::-.
./++////////////////+++++++/:.
`.`-::://////////////////+o///////++.
-/+++//++///////////////////+++//////:. `
`+++/++/////////////////////////++/++/. `
/+///+/////////////////////////++o+-./: .:.
./////////////////////////++++++/:-+: /+:/+ooo:
-///+++///+//+////++++++++++++:/- -o+/+ooooooos`
`-//+//////+/+/+++++oooo+++++o+/+++oooysooooooooo+`
-/+///////oo/.:ooooo/:+ooosoooo+oossoo-+ysoooooooo-
`:+:+//+++oo/``.:/+oo/``./--:+shy/:oso-`sm+oooooooo/
-+/+++osoo//.` ``..` -` .oddmmy:/oo+`ym:.+oooooooo.
`o+oooosoo/..-.` `` .o/ddMMo:+ooosdho -oooooooo.
+osooooo+o...`` ``.::oyo-+ooodds.` /oooooo+`
-ssoosso-/o/odhs: ` ...--:oosdm/ :oooooo:
.sooooyo/::.:hdNm/ `.. .sosh- :osoooo
`ooooosss-```.-syo-` ``.oooo:` /soooo`
+oooooshd+. :.--. `` ``-:o:+--.` `ooooo`
:ooooooohho. `..`` ` `````.:`````` +oooo
-:+ooosss//`...``..` `-:+:. ``o `` :ooo/
-+oooooso+. `-:-:--://++oo// `+h- `` `` /ooo`
`:oooooo//o- ..--++ooosooo/ssyyys````. `ooo/
`+ooooo/ `:o. `..../s+oossooo/+/oyho.` `` /oso
.+ooooo` ./` `---/--:+yso/ .+h+ `. .o++`
-ooooo/ ` ohs :do.``. /+.
-soooo` ` :hy /md+``. +`
/+oo+ ` `` hm: `-sdm+ ```.
-`/o+ ` `` `odh` `-+ddy-```.-`
` -+. ` `` ``.ymo ``hdddyo//:`
` ` `-```` `./o` . smddmddy+`
`/h/` `````. .+hs+--.`
:/: ` `-.````...+- ` .-`
.hhhoy: .o+oyss
/ysyhh. yhhyhy`
+ysyho +ssyyy`
-syys. :yyhy/
`` .:-`
ちょっと、ソースコード覗かないでよ、このスケベ！
-->
<meta charset="utf-8" />
<title>電書ちゃんのでんでんエディター</title>
<script type="text/javascript" src="//denshoch.github.io/mojimate.js/mojimate.js"></script>
<script type="text/javascript" src="//www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="p5gmil9rggf9wo1"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/stylesheets/style.css" rel="stylesheet" />
<link href="assets/stylesheets/non-responsive.css" rel="stylesheet" />
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="canonical" href="https://edit.denshochan.com/">
<!-- OGP -->
<meta property="og:title" content="電書ちゃんのでんでんエディター" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://edit.denshochan.com/" />
<meta property="og:image" content="https://edit.denshochan.com/assets/images/editor_logo.png" />
<meta property="og:description" content="あなたの電子書籍づくりをお手伝い。Markdownを書いてプレビューできるちょっと気の利いたウェブエディター" />
<meta property="fb:admins" content="hiroshi.takase" />
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48129074-1', 'denshochan.com');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="logo"></i> でんでんエディター</a>
</div>
<p class="navbar-text navbar-right"><small style="color:crimson;">ver 0.9.6</small></p>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://conv.denshochan.com/" target="_blank">でんでんコンバーター</a></li>
<li><a href="https://conv.denshochan.com/markdown" target="_blank">でんでんマークダウン</a></li>
<li><a href="https://lp.denshochan.com/" target="_blank">でんでんランディングページ</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div id="wrap">
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a id="editor-link" href="#editor-tab" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
<li><a id="preview-link" href="#preview-tab" data-toggle="tab"><i class="glyphicon glyphicon-eye-open"></i> Preview</a></li>
<li><a id="code-link" href="#code-tab" data-toggle="tab"><i class="glyphicon glyphicon-list-alt"></i> Code</a></li>
<li><a id="css-editor-link" href="#css-tab" data-toggle="tab"><i class="glyphicon glyphicon-asterisk"></i> Custom CSS</a></li>
<li><a id="css-settings-link" href="#settings-tab" data-toggle="tab"><i class="glyphicon glyphicon-cog"></i> Settings</a></li>
<li><a id="css-settings-link" href="#help-tab" data-toggle="tab"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li>
<li><a id="css-settings-link" href="#credits-tab" data-toggle="tab"><i class="glyphicon glyphicon-star-empty"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="editor-tab">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<form class="form-inline" role="form">
<label class="sr-only" for="title_input">Document Title</label>
<input type="text" id="title_input" class="form-control input-sm" placeholder="Untitled Document" data-toggle="tooltip" title="保存するファイル名の指定" />
</form>
</div>
<div class="btn-group btn-group-sm" data-toggle="tooltip" title="ファイルに保存">
<button id="download_btn" type="button" class="btn btn-primary" title="save" data-toggle="modal" data-target="#download-modal"><i class="glyphicon glyphicon-floppy-save"></i></button>
</div>
<div class="btn-group btn-group-sm">
<!-- undo button -->
<button id="undo-btn" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="元にもどす"><i class="glyphicon glyphicon-step-backward"></i></button>
<!-- redo button -->
<button id="redo-btn" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="やり直す"><i class="glyphicon glyphicon-step-forward"></i></button>
</div>
<div class="btn-group btn-group-sm" data-toggle="tooltip" title="見出し">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-header"></i> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="h_btn" href="#" data-dd-hlank="1">h1</a></li>
<li><a class="h_btn" href="#" data-dd-hlank="2">h2</a></li>
<li><a class="h_btn" href="#" data-dd-hlank="3">h3</a></li>
<li><a class="h_btn" href="#" data-dd-hlank="4">h4</a></li>
<li><a class="h_btn" href="#" data-dd-hlank="5">h5</a></li>
<li><a class="h_btn" href="#" data-dd-hlank="6">h6</a></li>
</ul>
</div>
<div class="btn-group btn-group-sm">
<!-- bold button -->
<button id="bold_btn" type="button" class="btn btn-default" data-toggle="tooltip" title="太字・重要なテキスト"><i class="glyphicon glyphicon-bold"></i></button>
<!-- italic button -->
<button id="italic_btn" type="button" class="btn btn-default" data-toggle="tooltip" title="斜体・強調するテキスト"><i class="glyphicon glyphicon-italic"></i></button>
<!-- ruby button -->
<button id="ruby_btn" type="button" class="btn btn-default" data-toggle="tooltip" title="ルビをふる">ruby</button>
</div>
<div class="btn-group btn-group-sm">
<!-- link button -->
<button id="link_btn" type="button" class="btn btn-default" data-toggle="tooltip" title="リンクの挿入"><i class="glyphicon glyphicon-link"></i></button>
<!-- image button -->
<button id="image_btn" type="button" class="btn btn-default" data-toggle="tooltip" title="画像の挿入 （Dropboxアカウントが必要です）"><i class="glyphicon glyphicon-picture"></i></button>
</div>
<div class="btn-group btn-group-sm">
<!-- remove button -->
<button id="remove_btn" type="button" class="btn btn-warning" data-toggle="tooltip" title="編集中のテキストの消去"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="row">
<div class="col-md-9 col-xs-9">
<pre id="editor"><div class="page-header" markdown="1">
# でんでんエディター
</div>
でんでんマークダウンをリアルタイムでプレビューできるよっ！
## 段落
これは段落です。
これは別の段落です。
### 段落内の改行
これは段落です。
これは段落の続きです。
---
## 見出し
# 見出しレベル１ #
## 見出しレベル２ ##
### 見出しレベル３ ###
#### 見出しレベル４ ####
##### 見出しレベル５ #####
###### 見出しレベル６ ######
---
## 引用
> これは引用された段落です。
>
> これも引用された段落です。
---
## リスト
* りんご
* もも
* みかん
1. りんご
2. もも
3. みかん
---
## コードブロック
<body>
<p>Hello world.</p>
</body>
---
## ハイパーリンク
詳しくは[こちら](http://example.com/)をごらんください。
---
## 強調
これは*強調されたテキスト*です。
これは**重要なテキスト**です。
---
## ルビ
{電子出版|でんししゅっぱん}を手軽に
---
## 縦中横
昭和^53^年
---
## 脚注
これは脚注付き[^1]の段落です。
[^1]: そして、これが脚注です。
---
## 画像
</pre>
</div>
<div class="col-md-3 col-xs-3">
<!-- componet snippets -->
<div class="btn-group-vertical" data-toggle="tooltip" title="【将来機能】スニペット（コード片）の挿入。カーソルの位置にスニペットを挿入します。現在は利用できません">
<button type="button" class="btn btn-default btn-sm dd-snippet-btn" data-dd-snippet-name="page-header" disabled="disabled">ページヘッダ</button>
<!-- Text -->
<div class="btn-group btn-group-sm">
<button id="text_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
テキスト
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="text_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="lead">リード文</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-left">左寄せ</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-center">中央揃え</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-right">右寄せ</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-muted">色（ミュート・灰色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-primary">色（プライマリ・青）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-success">色（成功・緑）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-info">色（情報・水色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-warning">色（警告・黄色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="text-danger">色（危険・赤）</a></li>
</ul>
</div>
<div class="btn-group btn-group-sm">
<button id="bq_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
引用
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="bq_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="blockquote--source">出典付き</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="blockquote-reverse--source">出典付き 右寄せ</a></li>
</ul>
</div>
<!-- Lists -->
<div class="btn-group btn-group-sm">
<button id="list_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
リスト（箇条書き）
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="list_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="list-unstyled">マーカーなし</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="list-inline">インライン</a></li>
</ul>
</div>
<!-- Tables -->
<div class="btn-group btn-group-sm">
<button id="table_group_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
表
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="table_group_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="table">通常</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="table-condensed">狭め</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="table-striped">ストライプ</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="table-bordered">枠あり</a></li>
</ul>
</div>
<!-- Labels -->
<div class="btn-group btn-group-sm">
<button id="label_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
ラベル
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="label_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="label">通常</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="label-primary">色（プライマリ・青）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="label-success">色（成功・緑）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="label-info">色（情報・水色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="label-warning">色（警告・黄色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="label-danger">色（危険・赤）</a></li>
</ul>
</div>
<!-- Alerts -->
<div class="btn-group btn-group-sm">
<button id="alerts_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
注意書き
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="alerts_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="alert-success">色（成功・緑）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="alert-info">色（情報・水色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="alert-warning">色（警告・黄色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="alert-danger">色（危険・赤）</a></li>
</ul>
</div>
<!-- List Group -->
<div class="btn-group btn-group-sm">
<button id="list_group_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
リストグループ
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="list_group_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="list-group">通常</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="list-group--link">a タグ</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="list-group--link--content">見出し付き</a></li>
</ul>
</div>
<!-- Panels -->
<div class="btn-group btn-group-sm">
<button id="panel_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
パネル
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="panel_btn_drop" disabled="disabled">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel">通常</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel--title">ヘッダあり</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel--footer">ヘッダ・見出しあり</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel-primary">色（プライマリ・青）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel-success">色（成功・緑）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel-info">色（情報・水色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel-warning">色（警告・黄色）</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="panel-danger">色（危険・赤）</a></li>
</ul>
</div>
<!-- Wells -->
<div class="btn-group btn-group-sm">
<button id="well_btn_drop" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled">
囲み
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="well_btn_drop">
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="well">通常</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="well-lg">広め</a></li>
<li><a href="#" class="dd-snippet-btn" data-dd-snippet-name="well-sm">狭め</a></li>
</ul>
</div>
<!-- <p class="text-muted small"><strong>でんでんブックストラップ</strong> 用のスニペットを挿入します</p> -->
</div>
</div>
</div>
</div>
<div class="tab-pane" id="preview-tab">
<div class="btn-toolbar" role="toolbar">
<!--
<div class="btn-group btn-group-sm">
<button type="button" class="btn" disabled="disabled"><i class="glyphicon glyphicon-refresh"></i></button>
</div>
-->
<div class="btn-group btn-group-sm" data-toggle="tooltip" title="表示するレイアウトを選択します">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-hand-right"></i> テーマを選んでね <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a id="theme_default" class="theme_seletor" data-dd-theme="default" href="#">でんでんコンバーター横書きデフォルト</a></li>
<li><a id="theme_default_vertical" class="theme_seletor" data-dd-theme="default_vertical" href="#">でんでんコンバーター縦書きデフォルト</a></li>
<!--
<li class="divider"></li>
<li role="presentation" class="dropdown-header">でんでんブックストラップ（Bootstrap互換）</li>
<li><a id="theme_bookstrap" class="theme_seletor" data-dd-theme="bookstrap" href="#">通常</a></li>
<li><a id="theme_bookstrap" class="theme_seletor" data-dd-theme="bookstrap-pink" href="#">ピンク</a></li>
<li><a id="theme_bookstrap" class="theme_seletor" data-dd-theme="bookstrap-orange" href="#">オレンジ</a></li>
<li><a id="theme_bookstrap" class="theme_seletor" data-dd-theme="bookstrap-grass" href="#">緑</a></li>
<li><a id="theme_bookstrap" class="theme_seletor" data-dd-theme="bookstrap-coffee" href="#">茶色</a></li>
<li><a id="theme_bookstrap" class="theme_seletor" data-dd-theme="bookstrap-purple" href="#">紫</a></li>
-->
<li class="divider"></li>
<li><a id="theme_plain" class="theme_seletor" data-dd-theme="plain" href="#">プレーン</a></li>
</ul>
</div>
<div class="btn-group btn-group-sm">
<a id="fullscreen_btn" class="btn btn-default" href="#" data-toggle="tooltip" title="フルスクリーンで表示します"><i class="glyphicon glyphicon-fullscreen"></i></a>
</div>
<div class="btn-group btn-group-sm" data-toggle="tooltip" title="画面の幅を変更します">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-resize-horizontal"></i> 画面の幅 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="width_btn" data-dd-width="width-auto" href="#">auto</a></li>
<li><a class="width_btn" data-dd-width="width-xs" href="#">480px</a></li>
<li><a class="width_btn" data-dd-width="width-sm" href="#">768px</a></li>
<li><a class="width_btn" data-dd-width="width-md" href="#">992px</a></li>
<li><a class="width_btn" data-dd-width="width-lg" href="#">1200px</a></li>
</ul>
</div>
<div class="btn-group btn-group-sm" data-toggle="tooltip" title="文字の大きさを変更します">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-font"></i> 文字の大きさ <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="font_size_btn" data-dd-font-size="75" href="#">75%</a></li>
<li><a class="font_size_btn" data-dd-font-size="100" href="#">100%</a></li>
<li><a class="font_size_btn" data-dd-font-size="150" href="#">150%</a></li>
</ul>
</div>
<div class="btn-group btn-group-sm">
<a id="kanji_btn" class="btn btn-default" href="#" data-toggle="tooltip" title="常用漢字に含まれない漢字の背景を水色に、人名用漢字の背景をピンク色にハイライトします"><i class="glyphicon glyphicon-check"></i> 常用漢字のチェック</a>
</div>
</div>
<div id="loading_image_container">
<img src="assets/images/ajax-loader.gif" alt="" />
</div>
<div id="preview_container">
<iframe id="preview" seamless="seamless"></iframe>
</div>
</div>
<div class="tab-pane" id="code-tab">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<button id="select_all_btn" type="button" class="btn btn-default" data-toggle="tooltip" title="HTMLのコードを全て選択状態にします"><i class="glyphicon glyphicon-paperclip"></i> コードを全て選択</button>
</div>
</div>
<textarea id="code" readonly="readonly"></textarea>
</div>
<!-- CSS tab -->
<div class="tab-pane" id="css-tab">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<!-- remove button -->
<button id="css_remove_btn" type="button" class="btn btn-warning" data-toggle="tooltip" title="編集中のテキストの消去"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<pre id="css_editor">/* 独自に追加したいCSSがあればここに書いてください。プレビューに反映されます */
</pre>
</div>
<!-- Settings tab -->
<div class="tab-pane" id="settings-tab">
<div id="settings-tab__container">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<form role="form">
<h3>Markdown Mode</h3>
<div class="radio">
<label>
<input class="markdown_mode_btn" type="radio" name="optionsRadios" id="markdown_btn--denden" value="denden" checked />
でんでんマークダウン
</label>
</div>
<div class="radio">
<label>
<input class="markdown_mode_btn" type="radio" name="optionsRadios" id="markdown_btn--extra" value="extra" />
Markdown Extra
</label>
</div>
<div class="radio">
<label>
<input class="markdown_mode_btn" type="radio" name="optionsRadios" id="markdown_btn--plain" value="markdown" />
Markdown
</label>
</div>
<span class="help-block">Markdownの変換モードを選択します</span>
<h3>Options <small>でんでんマークダウンのみ有効</small></h3>
<div class="checkbox">
<label>
<input id="opt_btn--autotcy" type="checkbox" checked> 自動縦中横を有効にする
</label>
</div>
桁数 <select id="opt_tcydigit" class="form-control-sm" style="width:100px">
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div class="checkbox">
<label>
<input id="opt_btn--autotextorientation" type="checkbox" checked> 縦書きの文字の向きを補正する
</label>
</div>
<div class="checkbox">
<label>
<input id="opt_btn--aozoraruby" type="checkbox"> 青空文庫のルビ記法を使用する
</label>
</div>
</form>
</div>
</div>
<hr />
</div>
</div>
<!-- Help tab -->
<div class="tab-pane" id="help-tab">
<div id="help-tab__container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<section>
<div class="page-header">
<h2><i class="logo" style="font-size:1.25em;"></i> でんでんエディターの使い方</h2>
</div>
<ul>
<li><a href="#toc_abst">概要</a></li>
<li><a href="#toc_env">動作環境</a></li>
<li><a href="#toc_structure">画面構成</a></li>
<li><a href="#toc_edit">Edit タブ</a></li>
<li><a href="#toc_preview">Preview タブ</a></li>
<li><a href="#toc_code">Code タブ</a></li>
<li><a href="#toc_css">Custom CSS タブ</a></li>
<li><a href="#toc_settings">Settings タブ</a></li>
<li><a href="#toc_help">Help タブ</a></li>
<li><a href="#toc_snippets">便利なスニペット入力！</a></li>
</ul>
<hr />
<h3 id="toc_abst">概要</h3>
<p>でんでんエディターは<a href="http://conv.denshochan.com/markdown">でんでんマークダウン</a>による文書作成を支援するウェブアプリケーションです。でんでんマークダウンで書かれたテキストは、<a href="http://conv.denshochan.com">でんでんコンバーター</a>にアップロードしてEPUBファイルに変換することができます。</p>
<p>でんでんエディターでは次のことができます。</p>
<ul>
<li>テキストの作成</li>
<li>テキストの保存（ダウンロードまたは<a href="http://dropbox.com/">Dropbox</a>に保存）</li>
<li>HTML化されたテキストのプレビュー</li>
<li>HTML化されたテキストのコードビュー</li>
<li>HTMLに適用するレイアウトの変更</li>
<li>HTMLに適用するCSSの追記</li>
</ul>
<p>でんでんマークダウンの記法については、<a href="http://conv.denshochan.com/markdown">でんでんマークダウン</a>のページを参照してください。</p>
<div class="alert alert-danger">
<p>ただし、<a href="http://conv.denshochan.com/markdown#docbreak">改ページ（ファイル分割）</a>の記法は利用できませんので注意してください。</p>
</div>
<hr />
<h3 id="toc_env">動作環境</h3>
<p>Chrome、Safari、Opera (15以降)での利用を推奨します。それ以外のブラウザでは縦書きのレイアウトを適用した場合に表示に問題が発生したり、一部の機能が利用できなかったりする可能性があります。</p>
<hr />
<h3 id="toc_structure">画面構成</h3>
<p>画面の構成と役割を説明します。</p>
<dl>
<dt><strong>Edit タブ</strong></dt>
<dd>テキストの編集に利用します</dd>
<dt><strong>Preview タブ</strong></dt>
<dd>HTML化されたテキストの表示確認に利用します</dd>
<dt><strong>Code タブ</strong></dt>
<dd>HTML化されたテキストのコードを表示します</dd>
<dt><strong>Custom CSS タブ</strong></dt>
<dd>ユーザーが独自に適用したいCSSを記述します</dd>
<dt><strong>Settings タブ</strong></dt>
<dd>でんでんエディターの設定に使用します</dd>
<dt><strong>Help タブ</strong></dt>
<dd>使い方の解説です</dd>
</dl>
<hr />
<h3 id="toc_edit">Edit タブ</h3>
<p><strong>保存するファイル名の指定欄</strong> 保存する際のファイル名を指定します</p>
<p><button type="button" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-floppy-save"></i></button> ファイルを保存します。ダウンロードするかDropboxに保存するか選択できます。</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-step-backward"></i></button> 一つ前の操作に戻ります</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-step-forward"></i></button> 元に戻した操作を一つ先に進めます</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-header"></i></button> カーソルの位置に見出しを挿入します。テキストが選択されていれば、そのテキストを見出しにします。</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-bold"></i></button> カーソルの位置に重要なテキスト（太字）を挿入します。テキストが選択されていれば、そのテキストに対して適用します</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-italic"></i></button> カーソルの位置に強調されたテキスト（通常はイタリック体）を挿入します。テキストが選択されていれば、そのテキストに対して適用します</p>
<p><button type="button" class="btn btn-default btn-sm">ruby</button> カーソルの位置にルビ付きテキストを挿入します。テキストが選択されていれば、そのテキストに対してルビを振ります。</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-link"></i></button> カーソルの位置にハイパーリンクを挿入します。テキストが選択されていれば、そのテキストに対して対して適用します</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-picture"></i></button> カーソルの位置に画像を挿入します。テキストが選択されていれば、そのテキストを代替テキストにします。<span class="text-danger">画像の挿入にはDropboxのアカウントが必要です。また、選択した画像は一時的にウェブ上に公開されるURLを持つので注意してください。でんでんコンバーターで利用する場合には、アップロードするファイル名に別途置き換えてください。</span></p>
<p><button type="button" class="btn btn-warning btn-sm"><i class="glyphicon glyphicon-remove"></i></button> 編集中のテキストを消去します</p>
<!--
<p><strong>でんでんブックストラップ用スニペットボタン</strong> 画面右側のボタン群です。でんでんブックストラップで使うHTMLの部品を挿入します。Previewでテーマにでんでんブックストラップを指定すると、レイアウトが確認できます。<span class="text-danger">他のテーマを利用する場合には使わないでください</span></p>
-->
<hr />
<h3 id="toc_preview">Preview タブ</h3>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-hand-right"></i> テーマを選んでね </button> HTMLに適用するテーマ（レイアウト）を選択します</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-resize-horizontal"></i> 画面の幅</button> 画面の幅を変更できます</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-fullscreen"></i></button> プレビューをフルスクリーンで表示します。<kbd>esc</kbd> ボタンで元にもどります。</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-font"></i> 文字の大きさ</button> 文字の大きさを変更できます</p>
<p><button type="button" class="btn btn-default btn-sm"><i class="glyphicon glyphicon-check"></i> 常用漢字のチェック</button> テキストで使われている表外漢字（常用漢字表に含まれない漢字）と人名用漢字を確認することができます。仮名に直したりルビを振ったりする際の参考にしてください（あくまでも参考です。義務ではありません）。</p>
<ul>
<li><strong>人名用漢字</strong> ピンク色にハイライトされます。日本における戸籍に子の名として記載できる漢字のうち、常用漢字に含まれないものですが、常用漢字に準じたものとしてそのまま使うこともあります</li>
<li><strong>表外漢字</strong> 水色にハイライトされます。内閣告示「常用漢字表」で示された現代日本語の漢字に含まれない漢字です。仮名に直したりルビを振るなどの対処を検討してください</li>
<li><strong>表外漢字の例外</strong> 表外漢字であっても共同通信社記者ハンドブック(第12版)で使うとされた漢字は黄色にハイライトされます。対処の要否は各自検討してください</li>
</ul>
<p><span class="text-danger">現在の制限事項として、Unicodeのサロゲートペアに含まれる漢字の検出に対応していない点があります。ご了承ください</span></p>
<hr />
<h3 id="toc_code">Code タブ</h3>
<p>テキストから変換されたHTMLのコードを確認できます。編集はできません。</p>
<p><button type="button" class="btn btn-default btn-sm" ><i class="glyphicon glyphicon-paperclip"></i> コードを全て選択</button> 全てのコードを選択状態にします。コピーして再利用する際に使ってください。</p>
<hr />
<h3 id="toc_css">Custom CSS タブ</h3>
<p>ここに書かれたCSSも Preview 画面に反映されます。Preview タブでテーマに「プレーン」を選択した状態にすれば、Custom CSSの内容だけでレイアウトすることができます。</p>
<p><button type="button" class="btn btn-warning btn-sm"><i class="glyphicon glyphicon-remove"></i></button> 編集中のテキストを消去します</p>
<hr />
<h3 id="toc_settings">Settings タブ</h3>
<p>でんでんエディターの設定を行ないます。</p>
<h4>Markdown Mode</h4>
<p>でんでんマークダウン以外のMarkdown記法も選択できます。次の中から選んでください。</p>
<ul>
<li><strong>でんでんマークダウン</strong> このエディターがメインに採用するMarkdown記法です</li>
<li><strong>Markdown Extra</strong> でんでんマークダウンのベースになったMarkdown記法です。ルビや縦中横が使えない他、脚注の出力コードもでんでんマークダウンとは異なります。<a href="http://michelf.ca/projects/php-markdown/extra/">http://michelf.ca/projects/php-markdown/extra/</a></li>
<li><strong>Markdown</strong> 拡張のない純粋なMarkdown記法です。<a href="http://daringfireball.net/projects/markdown/">http://daringfireball.net/projects/markdown/</a></li>
</ul>
<h4>オプション</h4>
<p>でんでんマークダウンのオプション機能を選択します。Markdown Modeが<strong>でんでんマークダウン</strong>の時のみ有効です。</p>
<ul>
<li><strong>自動縦中横を有効にする</strong>
連続する数字と!?を自動的に縦中横にします。</li>
<li><strong>桁数</strong>
連続する数字を何桁まで縦中横にするか指定します。</li>
<li><strong>縦書きの文字の向きを補正する</strong>
縦書きにした時に一部の文字や記号などの向きを日本人にとって自然になるように補正します。</li>
</ul>
<hr />
<h3 id="toc_help">Help タブ</h3>
<p>このページを表示します。</p>
<hr />
<h3 id="toc_snippets">便利なスニペット入力！</h3>
<p>最後にヒントです。でんでんエディターのスニペット入力はとても便利なので、ちょっと体験してみてください。</p>
<p>Edit 画面の任意の位置にカーソルを置いて、<button type="button" class="btn btn-default btn-sm">ruby</button> ボタンを押してみてください。こんな文字が挿入されます。</p>
<pre><code>{<mark>親文字</mark>|ルビ文字}
</code></pre>
<p>そして、「親文字」が選択状態になっているので、そのまま文字を入力すると「親文字」の位置に入力した文字が反映されます。仮に「電子書籍」と入力したとしましょう。入力が終わったら<kbd>TAB</kbd>キーを押してみてください。</p>
<pre><code>{電子書籍|<mark>ルビ文字</mark>}
</code></pre>
<p>今度は「ルビ文字」が選択された状態になりました。そのまま「でんししょせき」と入力したら、もう一度<kbd>TAB</kbd>キーを押します。</p>
<pre><code>{電子書籍|でんししょせき}<mark>|</mark>
</code></pre>
<p>するとカーソルが最後尾に移動しましたね。これで続きの文章を書くことができます。このように、でんでんエディターのスニペットは<kbd>TAB</kbd>キーを使うことで楽に入力ができます。</p>
<hr />
<div class="panel panel-default" markdown="1">
<div class="panel-body">
<div class="media">
<span class="pull-left">
<img alt="" class="media-object" width="64" height="64" src="assets/images/small06.png" />
</span>
<div class="media-body">
<h4 class="media-heading">電書ちゃん</h4>
<p>だいたいわかった？ 全部の機能を使わなくちゃいけないわけじゃないのよ。できる範囲で頑張りなさい</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Credits tab -->
<div class="tab-pane" id="credits-tab">
<div id="credits-tab__container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<section>
<h2>DenDen Editor</h2>
<p>
<small>Copyright (c) 2014, Densho Channel</small>
</p>
<p>でんでんエディターが利用しているソフトウェアやサービスを紹介します。</p>
<h3>Softwares</h3>
<ul>
<li><strong><a href="http://ace.c9.io/">Ace (Ajax.org Cloud9 Editor)</a></strong> Copyright
(c) 2010, Ajax.org B.V.</li>
<li><strong>DenDen Markdown</strong> Copyright (c) 2013-2014 Densho Channel</li>
<li><strong><a href="http://michelf.ca">PHP Markdown Lib</a></strong> Copyright (c)
2004-2013 Michel Fortin</li>
<li><strong><a href="http://daringfireball.net/">Markdown</a></strong> Copyright (c)
2003-2006 John Gruber</li>
<li><strong><a href="http://getbootstrap.com/">Bootstrap</a></strong> Copyright (c)
2011-2014 Twitter, Inc</li>
<li><strong><a href="http://jquery.com/">jQuery</a></strong> Copyright 2014 jQuery
Foundation and other contributors</li>
</ul>
<h3>Services</h3>
<ul>
<li><strong><a href="https://github.com">Github</a></strong> by GitHub</li>
<li><strong><a href="https://www.heroku.com/">Heroku</a></strong> by Heroku</li>
</ul>
<h3>Contact</h3>
<p>お問い合せは以下までお願いします。</p>
<div class="container">
<dl>
<dt>twitter</dt>
<dd>
<a href="https://twitter.com/lost_and_found">@lost_and_found</a>
</dd>
<dt>mail</dt>
<dd>
<a
href="mailto:info@denshochan.com"
>info@denshochan.com</a>
</dd>
</dl>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="media">
<span class="pull-left">
<img alt="" class="media-object" width="64" height="64"
src="assets/images/small06.png"/>
</span>
<div class="media-body">
<h4 class="media-heading">電書ちゃん</h4>
<p><a href="https://www.facebook.com/groups/dendenconverter/"
>facebookコミュニティ</a>もあるよ。気軽に参加してね</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center"><small class="text-muted"> <a class="btn btn-sm" href="http://www.amazon.co.jp/registry/wishlist/CHV76NOX7UD" target="_blank"><i class="glyphicon glyphicon-gift"></i> 電書ちゃんのご機嫌を取る</a></small></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="download-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">ファイルのダウンロード</h4>
</div>
<div class="modal-body">
<dl>
<dt>ファイル名</dt>
<dd id="download_filename"></dd>
</dl>
<hr />
<ul class="list-inline">
<li><a id="download-link" class="btn btn-primary" href="#">Download</a></li>
<li><span id="dropbox-saver-container"></span><li>
</ul>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="list-inline" style="margin:14px 0;">
<li><div class="facebook_like" style="position:relative;top:6px;"></div></li>
<li><div class="hatena"></div></li>
<li><div class="tweet"></div></li>
<li><div class="google_plusone"></div></li>
</ul>
</div>
<div class="col-md-6">
<p class="text-muted"><small>Copyright © 2014 <a href="http://denshochan.com">電書ちゃんねる</a></small></p>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="assets/javascripts/jquery.socialbutton-1.9.1.js" type="text/javascript"></script>
<script src="ace/src-min-noconflict/ace.js" ></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$('.tweet').socialbutton('twitter',{
button: 'article-clipper-jp',
url: 'https://edit.denshochan.com/',
});
$('.facebook_like').socialbutton('facebook_like',{
button: 'button_count',
url: 'https://edit.denshochan.com/',
locale: 'ja_JP',
});
$('.google_plusone').socialbutton('google_plusone');
$('.hatena').socialbutton('hatena',{
title: '電書ちゃんのでんでんエディター',
url: 'https://edit.denshochan.com/',
});
});
</script>
<script type="text/javascript">
var ns = {} || ns;
$(function () {
ns.config = {}
ns.config.request_uri = "https://markdown-322qzzmyga-an.a.run.app";
ns.config.request_method = "POST";
ns.config.request_mode = "denden";
ns.config.request_autotcy = true;
ns.config.request_tcydigit = 2;
ns.config.request_autotextorientation = true;
ns.config.request_aozoraruby = false;
// editor setup
ns.editor = ace.edit("editor");
ns.editor.setTheme("ace/theme/github");
ns.editor.getSession().setMode("ace/mode/markdown");
ns.editor.getSession().setUseWrapMode(true);
ace.config.loadModule('ace/ext/language_tools', function () {
ns.editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true
})
ns.snippetManager = ace.require("ace/snippets").snippetManager;
var config = ace.require("ace/config");
ace.config.loadModule("ace/snippets/markdown", function (m) {
if (m) {
ns.snippetManager.files.javascript = m;
m.snippets = ns.snippetManager.parseSnippetFile(m.snippetText);
// or do this if you already have them parsed
m.snippets.push({
content: "{${1:親文字}|${2:ルビ文字}}",
name: "ruby",
tabTrigger: "{"
});
m.snippets.push({
content: "^${1:縦中横にする文字}^",
name: "tcy",
tabTrigger: "^"
});
ns.snippetManager.register(m.snippets, m.scope);
}
});
// Load bootstrap snippets
ace.config.loadModule("ace/snippets/bookstrap-ja", function (m) {
if (m) {
ns.snippetManager.files.markdown = m;
m.snippets = ns.snippetManager.parseSnippetFile(m.snippetText);
ns.snippetManager.register(m.snippets, m.scope);
}
});
});
// css editor setup
ns.css_editor = ace.edit("css_editor");
ns.css_editor.setTheme("ace/theme/github");
ns.css_editor.getSession().setMode("ace/mode/css");
ns.css_editor.getSession().setUseWrapMode(true);
ns.css_editor.gotoLine(2, 0, false);
ns.loadPreviousData = function() {
var previous_data = localStorage.getItem("previous_data");
if(previous_data) {
if (confirm("前回の編集データを読み込みますか？")) {
var p = JSON.parse(previous_data);
ns.editor.setValue(p.text);
ns.css_editor.setValue(p.custom_css);
}
}
}
ns.preview = document.getElementById('preview');
ns.target_doc = ns.preview.contentDocument;
ns.code = document.getElementById('code');
ns.initDoc = function() {
ns.target_doc.documentElement.innerHTML = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"><head id="head"><link id="css_link" rel="stylesheet" href="./default.css" /><link id="custom_css_link" rel="stylesheet" href="./plain.css" /><style type="text/css">html {margin: 0.5em;}</style></head><body></body></html>';
ns.target_doc_head = ns.target_doc.getElementById('head');
ns.target_doc_css_link = ns.target_doc.getElementById('css_link');
ns.target_doc_custom_css_link = ns.target_doc.getElementById('custom_css_link');
ns.target_doc_body = ns.target_doc.getElementsByTagName('body')[0];
};
ns.initDoc();