diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js index ab3111ff0..2c212701e 100644 --- a/www/common/sframe-common-file.js +++ b/www/common/sframe-common-file.js @@ -333,6 +333,8 @@ define([ var editor = config.ckeditor; editor.document.on('drop', function (ev) { var dropped = ev.data.$.dataTransfer.files; + editor.document.focus(); + if (!dropped || !dropped.length) { return; } onFileDrop(dropped, ev); ev.data.preventDefault(true); }); diff --git a/www/pad/inner.js b/www/pad/inner.js index d77770ce9..22eb5975e 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -168,6 +168,30 @@ define([ return true; } } + + + + + // CkEditor drag&drop icon container + if (info.node && info.node.tagName === 'SPAN' && + info.node.getAttribute('class') && + info.node.getAttribute('class').split(' ').indexOf('cke_widget_drag_handler_container') !== -1) { + //console.log('Preventing removal of the drag&drop icon container of a macro', info.node); + return true; + } + // CkEditor drag&drop title (language fight) + if (info.node && info.node.getAttribute && + info.node.getAttribute('class') && + (info.node.getAttribute('class').split(' ').indexOf('cke_widget_drag_handler') !== -1 || + info.node.getAttribute('class').split(' ').indexOf('cke_image_resizer') !== -1 ) ) { + //console.log('Preventing removal of the drag&drop icon container of a macro', info.node); + return true; + } + + + + + /* Also reject any elements which would insert any one of our forbidden tag types: script, iframe, object, @@ -370,8 +394,11 @@ define([ framework.setMediaTagEmbedder(function ($mt) { $mt.attr('contenteditable', 'false'); - $mt.attr('tabindex', '1'); - editor.insertElement(new window.CKEDITOR.dom.element($mt[0])); + //$mt.attr('tabindex', '1'); + console.log($mt); + var element = new window.CKEDITOR.dom.element($mt[0]); + editor.insertElement(element); + editor.widgets.initOn( element, 'mediatag' ) }); framework.setTitleRecommender(function () { @@ -404,6 +431,8 @@ define([ var patch = (DD).diff(inner, userDocStateDom); (DD).apply(inner, patch); displayMediaTags(framework, inner, mediaTagMap); + editor.widgets.instances = {}; + editor.widgets.checkWidgets(); if (framework.isReadOnly()) { var $links = $(inner).find('a'); // off so that we don't end up with multiple identical handlers @@ -463,7 +492,11 @@ define([ var hexFileName = Util.base64ToHex(parsed.hashData.channel); var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; var mt = ''; - editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt)); + //editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt)); + //editor.insertHtml(mt); + var element = window.CKEDITOR.dom.element.createFromHtml(mt); + editor.insertElement(element); + editor.widgets.initOn( element, 'mediatag' ) } }; window.APP.FM = framework._.sfCommon.createFileManager(fmConfig); diff --git a/www/pad/mediatag-plugin-dialog.js b/www/pad/mediatag-plugin-dialog.js index a1a4c986b..45759bc9f 100644 --- a/www/pad/mediatag-plugin-dialog.js +++ b/www/pad/mediatag-plugin-dialog.js @@ -23,7 +23,13 @@ CKEDITOR.dialog.add('mediatag', function (editor) { }, ], onShow: function () { - var el = editor.plugins.mediatag.clicked; + var sel = editor.getSelection(); + element = sel.getSelectedElement(); + if (!element) { return; } + + var el = element.findOne('media-tag'); + if (!el) { return; } + var rect = el.getClientRect(); var dialog = this.parts.contents.$; var inputs = dialog.querySelectorAll('input'); @@ -34,7 +40,14 @@ CKEDITOR.dialog.add('mediatag', function (editor) { }, onOk: function() { var dialog = this; - var el = editor.plugins.mediatag.clicked; + + var sel = editor.getSelection(); + element = sel.getSelectedElement(); + if (!element) { return; } + + var el = element.findOne('media-tag'); + if (!el) { return; } + var dialog = this.parts.contents.$; var inputs = dialog.querySelectorAll('input'); var wInput = inputs[0]; diff --git a/www/pad/mediatag-plugin.js b/www/pad/mediatag-plugin.js index c20066937..994c05f6c 100644 --- a/www/pad/mediatag-plugin.js +++ b/www/pad/mediatag-plugin.js @@ -10,7 +10,7 @@ ( function() { CKEDITOR.plugins.add( 'mediatag', { - requires: 'dialog', + requires: 'dialog,widget', //icons: 'image', //hidpi: true, onLoad: function () { @@ -38,144 +38,16 @@ // Register the dialog. CKEDITOR.dialog.add( pluginName, this.path + 'mediatag-plugin-dialog.js' ); - var allowed = 'media-tag[!data-crypto-key,!src,contenteditable,width,height]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}', - required = 'media-tag[data-crypto-key,src]'; + editor.widgets.add( 'mediatag', { - // Register the command. - editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName, { - allowedContent: allowed, - requiredContent: required, - contentTransformations: [ - [ 'media-tag{width}: sizeToStyle', 'media-tag[width]: sizeToAttribute' ], - [ 'media-tag{float}: alignmentToStyle', 'media-tag[align]: alignmentToAttribute' ] - ] - } ) ); - - var isMediaTag = function (el) { - if (el.is('media-tag')) { return el; } - var mt = el.getParents().slice().filter(function (p) { - return p.is('media-tag'); - }); - if (mt.length !== 1) { return; } - return mt[0]; - }; - editor.on('doubleclick', function (evt) { - var element = evt.data.element; - var mt = isMediaTag(element); - if (mt && !element.data('cke-realelement')) { - editor.plugins.mediatag.clicked = mt; - evt.data.dialog = 'mediatag'; + dialog: pluginName, + inline: true, + upcast: function( element ) { + return element.name === 'media-tag'; } - }); - // If the "contextmenu" plugin is loaded, register the listeners. - if (editor.contextMenu) { - editor.contextMenu.addListener(function (element) { - if (getSelectedMediatag(editor, element)) { - return { mediatag: CKEDITOR.TRISTATE_OFF }; - } - }); - } + }); }, - afterInit: function( editor ) { - // Customize the behavior of the alignment commands. (http://dev.ckeditor.com/ticket/7430) - setupAlignCommand('left'); - setupAlignCommand('right'); - setupAlignCommand('center'); - setupAlignCommand('block'); - - function setupAlignCommand (value) { - var command = editor.getCommand('justify' + value); - if (command) { - if (value === 'left' || value === 'right') { - command.on('exec', function (evt) { - var img = getSelectedMediatag(editor), align; - if (img) { - align = getMediatagAlignment(img); - if (align === value) { - img.removeStyle('float'); - - // Remove "align" attribute when necessary. - if (value === getMediatagAlignment(img)) - img.removeAttribute( 'align' ); - } else { - img.setStyle( 'float', value ); - } - - evt.cancel(); - } - } ); - } - - command.on('refresh', function (evt) { - var img = getSelectedMediatag(editor), align; - if (img) { - align = getMediatagAlignment(img); - - this.setState( - (align === value) ? CKEDITOR.TRISTATE_ON : ( value === 'right' || value === 'left' ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED ); - - evt.cancel(); - } - } ); - } - } - } } ); - - function getSelectedMediatag (editor, element) { - if (!element) { - var sel = editor.getSelection(); - element = sel.getSelectedElement(); - } - - if (element && element.is('media-tag') && !element.data('cke-realelement') - && !element.isReadOnly()) { - return element; - } - } - - function getMediatagAlignment (element) { - var align = element.getStyle('float'); - - if (align === 'inherit' || align === 'none') { - align = 0; - } - - if (!align) { - align = element.getAttribute('align'); - } - - return align; - } } )(); -/** - * Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window. - * - * config.image_prefillDimensions = false; - * - * @since 4.5 - * @cfg {Boolean} [image_prefillDimensions=true] - * @member CKEDITOR.config - */ - -/** - * Whether to remove links when emptying the link URL field in the Image dialog window. - * - * config.image_removeLinkByEmptyURL = false; - * - * @cfg {Boolean} [image_removeLinkByEmptyURL=true] - * @member CKEDITOR.config - */ -CKEDITOR.config.mediatag_removeLinkByEmptyURL = true; - -/** - * Padding text to set off the image in the preview area. - * - * config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 ); - * - * @cfg {String} [image_previewText='Lorem ipsum dolor...' (placeholder text)] - * @member CKEDITOR.config - */ -