40 lines
25 KiB
JavaScript
40 lines
25 KiB
JavaScript
|
CKEDITOR.addTemplates( 'default',
|
||
|
{
|
||
|
// The name of the subfolder that contains the preview images of the templates.
|
||
|
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
|
||
|
|
||
|
// Template definitions.
|
||
|
templates :
|
||
|
[
|
||
|
{
|
||
|
title: 'Briefing Report',
|
||
|
image: 'template4.gif',
|
||
|
description: 'A report format with Images, title, and briefing.',
|
||
|
html: '<div class="template01" style="font-size: 15px; line-height: 2; color: #888;"><div style="width: 80%; margin: auto;"><h2 style="font-size: 24px; color: #1489e2;">perspiciatis unde omnis iste natus error</h2><img src="http://fakeimg.pl/400x300/eeeeee/ccc" alt="Intro image" style="margin: 0 0 20px 20px; float: right;"><h3 style="font-size: 19px; color: #15507e; text-transform: uppercase;">voluptas sit aspernatur</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br><h3 style="font-size: 19px; color: #15507e; text-transform: uppercase;">corporis suscipit</h3>dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br><img src="http://fakeimg.pl/300x150/eeeeee/ccc" alt="no" style="margin: 0 20px 20px 0; float: left;"><ul style="float: left; padding: 0 0 0 20px; margin: 0;"><li>consectetur, adipisci velit</li><li>minima veniam</li><li>laboriosam, nisi ut aliquid </li><li>reprehenderit qui</li><li>minima veniam</li><li>laboriosam, nisi ut aliquid </li><li>reprehenderit qui</li></ul><br style="clear:both;"><br><img src="http://fakeimg.pl/300x150/eeeeee/ccc" alt="no" style="margin: 0 20px 20px 0; float: left;"><ol style="float: left; padding: 0 0 0 20px; margin: 0;"><li>consectetur, adipisci velit</li><li>minima veniam</li><li>laboriosam, nisi ut aliquid </li><li>reprehenderit qui</li><li>minima veniam</li></ol><br style="clear:both;"><hr style="margin: 30px 0;"><br>quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non <br><br><div style="position: relative; overflow: hidden; margin: 0 0 30px;"><img src="http://fakeimg.pl/500x300/eeeeee/ccc" alt="no" style="margin: 0 0 20px 20px; float: right;"><div style="position: absolute; background: #fff; padding: 20px; width: 400px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: bold; font-style: italic; color: #666;">quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut </div></div>quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
|
||
|
},
|
||
|
{
|
||
|
title: 'Table Report',
|
||
|
image: 'template5.gif',
|
||
|
description : 'A report format with tables with text.',
|
||
|
html: '<div class="template02" style="font-size: 15px; line-height: 2; color: #888;"><div style="width:80%; margin: auto;"><h2 style="font-size: 24px; color: #1489e2;">perspiciatis unde omnis iste natus error</h2>quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat quasi architecto beatae vitae dicta sunt explicabo. <br><br><table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-collapse: collapse; border: 1px solid #ddd; color: #333; margin: 0 0 30px;"><tbody><tr><th style="background: #eee; padding: 10px; border: 1px solid #ddd; text-align: left;"> </th><th style="background: #eee; padding: 10px; border: 1px solid #ddd; text-align: left;">unde</th><th style="background: #eee; padding: 10px; border: 1px solid #ddd; text-align: left;">omnis</th><th style="background: #eee; padding: 10px; border: 1px solid #ddd; text-align: left;">iste natus</th><th style="background: #eee; padding: 10px; border: 1px solid #ddd; text-align: left;">totam</th></tr><tr><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px; background: #f7f7f7;">Ut enim ad minima veniam, quis rem aperiam, eaque ipsa</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">aspernatur aut</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">Ut enim ad minima veniam, quis</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">nisi ut aliquid ex ea</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">illum qui dolorem eum fugiat</td></tr><tr><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px; background: #f7f7f7;">illum qui dolorem eum fugiat</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">rem aperiam, eaque ipsa</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">Ut enim ad minima veniam, quis</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">nisi ut aliquid ex ea</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">aspernatur aut</td></tr><tr><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px; background: #f7f7f7;">nisi ut aliquid ex ea</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">Ut enim ad minima veniam, quis Ut enim ad minima veniam, quis rem aperiam, eaque ipsa</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">illum qui dolorem eum fugiat</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">aspernatur aut</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">Ut enim ad minima veniam, quis</td></tr><tr><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px; background: #f7f7f7;">rem aperiam, eaque ipsa</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">aspernatur aut</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">Ut enim ad minima veniam, quis</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">Ut enim ad minima veniam, quis nisi ut aliquid ex ea</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">illum qui dolorem eum fugiat</td></tr><tr><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px; background: #f7f7f7;">illum qui dolorem eum fugiat</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">rem aperiam, eaque ipsa</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">aspernatur aut spernatur aut Ut enim ad minima veniam, quis</td><td style=" vertical-align: top; border: 1px solid #ddd; padding: 10px;">nisi ut aliquid ex ea</td><td style=" vertical-align: top; bor
|
||
|
},
|
||
|
{
|
||
|
title: 'Newspaper',
|
||
|
image: 'template6.gif',
|
||
|
description : 'A newspaper format with title images, images, and description text of images.',
|
||
|
html: '<h2 style="text-align:center;">Course Description</h2><br><br><div class="container"><div class="row" style="max-width:80%;margin:0 auto;"><section class="col-sm-6" style="margin-bottom: 30px;"><div><img alt="foucs-img" src="http://fakeimg.pl/350x180/?text=350x180"></div><div><p style="margin-top: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></div></section><section class="col-sm-6" style="margin-bottom:30px;"><div><img alt="foucs-img" src="http://fakeimg.pl/350x180/?text=350x180"></div><div><p style="margin-top:15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></div></section></div></div><br><br><p style="margin-bottom: 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><div class="row"><section class="col-sm-4" style="margin-bottom: 30px;"><img alt="foucs-img" src="http://fakeimg.pl/350x180/?text=350x180"></section><section class="col-sm-8"><p style="margin-top: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></section></div><div class="row"><section class="col-sm-4" style="margin-bottom: 30px;"><img alt="foucs-img" src="http://fakeimg.pl/350x180/?text=350x180"></section><section class="col-sm-8"><p style="margin-top: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></section></div><div class="row"><section class="col-sm-4" style="margin-bottom: 30px;"><img alt="foucs-img" src="http://fakeimg.pl/350x180/?text=350x180"></section><section class="col-sm-8"><p style="margin-top: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></section></div><p style="margin-bottom:30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet repr
|
||
|
},
|
||
|
{
|
||
|
title: 'Headline News',
|
||
|
image: 'template7.gif',
|
||
|
description : 'A news format with cover image and images with description text.',
|
||
|
html: '<div class="container"><div class="row"><h3>About</h3><section class="col-sm-6"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></section><section class="col-sm-6"><img src="http://fakeimg.pl/440x320/?text=440x320" /></section></div></div><h3>Educational goals</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><h3>future development</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><div class="containter"><h3>Space</h3><div class="row"><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div></div></div>'
|
||
|
},
|
||
|
{
|
||
|
title: 'Flier',
|
||
|
image: 'template8.gif',
|
||
|
description : 'A flier format with rich images and text.',
|
||
|
html: '<h1>Teaching resources and equipments</h1><div class="containter"><h2>meeting room</h2><div class="row"><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><h3>room01</h3></div><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><h3>room02</h3></div><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><h3>room02</h3></div></div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></div><div class="containter"><h2>classrooms</h2><div class="row"><div class="col-sm-3"><img src="http://fakeimg.pl/250x120/?text=250x120" /><h3>classroom01</h3></div><div class="col-sm-3"><img src="http://fakeimg.pl/250x120/?text=250x120" /><h3>classroom02</h3></div><div class="col-sm-3"><img src="http://fakeimg.pl/250x120/?text=250x120" /><h3>classroom03</h3></div><div class="col-sm-3"><img src="http://fakeimg.pl/250x120/?text=250x120" /><h3>classroom04</h3></div></div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></div><div class="containter"><h2>computer classroom</h2><div class="row"><div class="col-sm-4"><img src="http://fakeimg.pl/350x200/?text=350x200" /><h3>room01</h3><img src="http://fakeimg.pl/350x200/?text=350x200" /><h3>room02</h3></div><div class="col-sm-8"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro magni minima sint ipsam nam, eum id, fugiat, tempore cumque eveniet reprehenderit expedita illum ex. Esse cumque alias, inventore minus ullam.</p></div></div></div>'
|
||
|
}
|
||
|
]
|
||
|
});
|