new ckeditor
New ckeditor
This commit is contained in:
Francesco Malagrino
84
ckeditor/plugins/templates/dialogs/templates.css
Normal file
84
ckeditor/plugins/templates/dialogs/templates.css
Normal file
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
.cke_tpl_list
|
||||
{
|
||||
border: #dcdcdc 2px solid;
|
||||
background-color: #ffffff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.cke_tpl_item
|
||||
{
|
||||
margin: 5px;
|
||||
padding: 7px;
|
||||
border: #eeeeee 1px solid;
|
||||
*width: 88%;
|
||||
}
|
||||
|
||||
.cke_tpl_preview
|
||||
{
|
||||
border-collapse: separate;
|
||||
text-indent:0;
|
||||
width: 100%;
|
||||
}
|
||||
.cke_tpl_preview td
|
||||
{
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cke_tpl_preview .cke_tpl_preview_img
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
.cke_tpl_preview span
|
||||
{
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.cke_tpl_title
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cke_tpl_list a:hover .cke_tpl_item,
|
||||
.cke_tpl_list a:focus .cke_tpl_item,
|
||||
.cke_tpl_list a:active .cke_tpl_item
|
||||
{
|
||||
border: #ff9933 1px solid;
|
||||
background-color: #fffacd;
|
||||
}
|
||||
|
||||
.cke_tpl_list a:hover *,
|
||||
.cke_tpl_list a:focus *,
|
||||
.cke_tpl_list a:active *
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* IE Quirks contextual selectors children will not get :hover transition until
|
||||
the hover style of the link itself contains certain CSS declarations. */
|
||||
.cke_browser_quirks .cke_tpl_list a:active,
|
||||
.cke_browser_quirks .cke_tpl_list a:hover,
|
||||
.cke_browser_quirks .cke_tpl_list a:focus
|
||||
{
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.cke_hc .cke_tpl_list a:hover .cke_tpl_item,
|
||||
.cke_hc .cke_tpl_list a:focus .cke_tpl_item,
|
||||
.cke_hc .cke_tpl_list a:active .cke_tpl_item
|
||||
{
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.cke_tpl_empty, .cke_tpl_loading
|
||||
{
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
199
ckeditor/plugins/templates/dialogs/templates.js
Normal file
199
ckeditor/plugins/templates/dialogs/templates.js
Normal file
@@ -0,0 +1,199 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
|
||||
* For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
( function() {
|
||||
|
||||
CKEDITOR.dialog.add( 'templates', function( editor ) {
|
||||
// Constructs the HTML view of the specified templates data.
|
||||
function renderTemplatesList( container, templatesDefinitions ) {
|
||||
// clear loading wait text.
|
||||
container.setHtml( '' );
|
||||
|
||||
for ( var i = 0, totalDefs = templatesDefinitions.length; i < totalDefs; i++ ) {
|
||||
var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
|
||||
imagesPath = definition.imagesPath,
|
||||
templates = definition.templates,
|
||||
count = templates.length;
|
||||
|
||||
for ( var j = 0; j < count; j++ ) {
|
||||
var template = templates[ j ],
|
||||
item = createTemplateItem( template, imagesPath );
|
||||
item.setAttribute( 'aria-posinset', j + 1 );
|
||||
item.setAttribute( 'aria-setsize', count );
|
||||
container.append( item );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createTemplateItem( template, imagesPath ) {
|
||||
var item = CKEDITOR.dom.element.createFromHtml( '<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
|
||||
'<div class="cke_tpl_item"></div>' +
|
||||
'</a>' );
|
||||
|
||||
// Build the inner HTML of our new item DIV.
|
||||
var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';
|
||||
|
||||
if ( template.image && imagesPath ) {
|
||||
html += '<td class="cke_tpl_preview_img"><img src="' +
|
||||
CKEDITOR.getUrl( imagesPath + template.image ) + '"' +
|
||||
( CKEDITOR.env.ie6Compat ? ' onload="this.width=this.width"' : '' ) + ' alt="" title=""></td>';
|
||||
}
|
||||
|
||||
html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
|
||||
|
||||
if ( template.description )
|
||||
html += '<span>' + template.description + '</span>';
|
||||
|
||||
html += '</td></tr></table>';
|
||||
|
||||
item.getFirst().setHtml( html );
|
||||
|
||||
item.on( 'click', function() {
|
||||
insertTemplate( template.html );
|
||||
} );
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
// Insert the specified template content into editor.
|
||||
// @param {Number} index
|
||||
function insertTemplate( html ) {
|
||||
var dialog = CKEDITOR.dialog.getCurrent(),
|
||||
isReplace = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
|
||||
|
||||
if ( isReplace ) {
|
||||
editor.fire( 'saveSnapshot' );
|
||||
// Everything should happen after the document is loaded (#4073).
|
||||
editor.setData( html, function() {
|
||||
dialog.hide();
|
||||
|
||||
// Place the cursor at the first editable place.
|
||||
var range = editor.createRange();
|
||||
range.moveToElementEditStart( editor.editable() );
|
||||
range.select();
|
||||
setTimeout( function() {
|
||||
editor.fire( 'saveSnapshot' );
|
||||
}, 0 );
|
||||
|
||||
} );
|
||||
} else {
|
||||
editor.insertHtml( html );
|
||||
dialog.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function keyNavigation( evt ) {
|
||||
var target = evt.data.getTarget(),
|
||||
onList = listContainer.equals( target );
|
||||
|
||||
// Keyboard navigation for template list.
|
||||
if ( onList || listContainer.contains( target ) ) {
|
||||
var keystroke = evt.data.getKeystroke(),
|
||||
items = listContainer.getElementsByTag( 'a' ),
|
||||
focusItem;
|
||||
|
||||
if ( items ) {
|
||||
// Focus not yet onto list items?
|
||||
if ( onList )
|
||||
focusItem = items.getItem( 0 );
|
||||
else {
|
||||
switch ( keystroke ) {
|
||||
case 40: // ARROW-DOWN
|
||||
focusItem = target.getNext();
|
||||
break;
|
||||
|
||||
case 38: // ARROW-UP
|
||||
focusItem = target.getPrevious();
|
||||
break;
|
||||
|
||||
case 13: // ENTER
|
||||
case 32: // SPACE
|
||||
target.fire( 'click' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( focusItem ) {
|
||||
focusItem.focus();
|
||||
evt.data.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Load skin at first.
|
||||
var plugin = CKEDITOR.plugins.get( 'templates' );
|
||||
CKEDITOR.document.appendStyleSheet( CKEDITOR.getUrl( plugin.path + 'dialogs/templates.css' ) );
|
||||
|
||||
|
||||
var listContainer;
|
||||
|
||||
var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
|
||||
lang = editor.lang.templates,
|
||||
config = editor.config;
|
||||
return {
|
||||
title: editor.lang.templates.title,
|
||||
|
||||
minWidth: CKEDITOR.env.ie ? 440 : 400,
|
||||
minHeight: 340,
|
||||
|
||||
contents: [ {
|
||||
id: 'selectTpl',
|
||||
label: lang.title,
|
||||
elements: [ {
|
||||
type: 'vbox',
|
||||
padding: 5,
|
||||
children: [ {
|
||||
id: 'selectTplText',
|
||||
type: 'html',
|
||||
html: '<span>' +
|
||||
lang.selectPromptMsg +
|
||||
'</span>'
|
||||
},
|
||||
{
|
||||
id: 'templatesList',
|
||||
type: 'html',
|
||||
focus: true,
|
||||
html: '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId + '">' +
|
||||
'<div class="cke_tpl_loading"><span></span></div>' +
|
||||
'</div>' +
|
||||
'<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options + '</span>'
|
||||
},
|
||||
{
|
||||
id: 'chkInsertOpt',
|
||||
type: 'checkbox',
|
||||
label: lang.insertOption,
|
||||
'default': config.templates_replaceContent
|
||||
} ]
|
||||
} ]
|
||||
} ],
|
||||
|
||||
buttons: [ CKEDITOR.dialog.cancelButton ],
|
||||
|
||||
onShow: function() {
|
||||
var templatesListField = this.getContentElement( 'selectTpl', 'templatesList' );
|
||||
listContainer = templatesListField.getElement();
|
||||
|
||||
CKEDITOR.loadTemplates( config.templates_files, function() {
|
||||
var templates = ( config.templates || 'default' ).split( ',' );
|
||||
|
||||
if ( templates.length ) {
|
||||
renderTemplatesList( listContainer, templates );
|
||||
templatesListField.focus();
|
||||
} else {
|
||||
listContainer.setHtml( '<div class="cke_tpl_empty">' +
|
||||
'<span>' + lang.emptyListMsg + '</span>' +
|
||||
'</div>' );
|
||||
}
|
||||
} );
|
||||
|
||||
this._.element.on( 'keydown', keyNavigation );
|
||||
},
|
||||
|
||||
onHide: function() {
|
||||
this._.element.removeListener( 'keydown', keyNavigation );
|
||||
}
|
||||
};
|
||||
} );
|
||||
} )();
|
||||
Reference in New Issue
Block a user