TinyMCE 4 replicate clicking of a toolbar icon - javascript

I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.

I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.

Related

Fullscreen functionality on saperate html button for highchart in angular

Hello I have been looking for the a full screen functionality for chart in highchart. I have been referring the site and got this link.
Here in javascript you can achieve this by simply handling click event like
document.getElementById('button').addEventListener('click', function () {
chart.fullscreen.toggle();
});
I have tried the same thing for angular highcharts :
ngOnInit(){
this.progressChart = Highcharts.chart(this.donutContainer.nativeElement, this.donutOptions, () => {
/*
Do things here after chart is drawn
*/
})
}
onFullScreenClick(){
this.progressChart.fullscreen.toggle()
}
But seems like this code is not working. I somewhere read you can also use toggleFullScreen(). But that is also not feasible.
Fullscreen requires the fullscreen module, so if you did not imported and initialized that might be the reason.
import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);
I have prepared a simple demo for you to show you the possible solution. I am using the official highcharts-angular wrapper there (I am encouraging you to check it out, it might make your life easier while working with highcharts in angular), but the solution made without the wrapper should be similar.
Docs:
https://github.com/highcharts/highcharts-angular
Live demo:
(note - the fullscreen will not work inside the stack-blitz frame, but the following example will work in the real-life project)
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts

In CKEditor inline instances, how does one disable drag and dropping?

In CKEditor, how does one disable drag and dropping?
I do not want people to accidentally drag and drop other elements of the page into their respective editors.
I assume this requires intercepting browser specific events and blocking them but I am unsure how to do this in CKEditor.
Thanks for your help!
TAKEN FROM THIS STACKOVERFLOW ANSWER
At first I try disable with config.removePlugins = 'dragdrop,basket'; but it doesn't work at all.
Then I found this link, which help me to solved this problem and write a plugin to do the job.
Anyway I wrote here how to do the trick too.
With a Litle modification I wrote this plugin:
To use it you have to create a folder inside of ./plugins named "dropoff". Then create a file named plugin.js and put this content:
CKEDITOR.plugins.add('dropoff', {
init: function (editor) {
function regectDrop(event) {
event.data.preventDefault(true);
};
editor.on('contentDom', function() {
editor.document.on('drop',regectDrop);
});
}
});
After it, you have to registrate it on ckeditor config.js.
config.extraPlugins = 'dropoff';
If you already using an extra pluging just put a "," before like this:
config.extraPlugins = 'mypreviousplugin,dropoff';
And be Happy! \o/

Testing if jquery.dimensions.js is installed properly

hello can I get some tips on how i can test if I have implemented jquery.dimensions correctly?
http://archive.plugins.jquery.com/project/dimensions
sort of like when u test for jquery,
$(document).ready(function() {
alert('hi');
});
I am trying to implement a floating menu bar on a site. suspect that I have not installed dimensions correctly.
You can test if a plugin is loaded with:
if(jQuery().somePluginName) {
// plugin is loaded
}

Ember Collapsible Container

I'm using Ember.js with handlebars and I need to make a div within my page collapse/expand when clicked. I know how to do this in jQuery, but I can't use any jQuery. Does anyone know how to accomplish this? Also I don't want to just toggle a hide attribute, I need the full sliding up and down feature for collapsing. If anyone has any ideas, I'd really appreciate it.
Thanks
Clicking on your view will cause a click event to be triggered. You can code your animation in any manner you want inside a click event handler in your view:
CollapsableView = Ember.View.extend({
click : function(event) {
this.$().toggle('fast');
}
})
The proper way of doing this in Ember is via the awesome Liquid Fire addon.
The outline:
Install Liquid Fire into your project.
Define a transition like this:
this.transition(
this.hasClass('transition-spoiler'),
this.toValue(true),
this.use('toDown'),
this.reverse('toUp')
);
In your controller/component, create a property spoilerIsVisible and a toggleSpoiler property:
spoilerIsVisible: false,
actions: {
toggleSpoiler: function() {
this.toggleProperty('spoilerIsVisible');
}
}
In your page/component template, create a button and a spoiler wrapper like this:
<button {{action 'toggleSpoiler'}}>
{{if spoilerIsVisible 'Show spoiler' 'Hide spoiler'}}
</button>
{{#liquid-if spoilerIsVisible class="transition-spoiler"}}
<p>Dumbledore dies</p>
{{/liquid-if}}
Note that you can wrap steps 3-4 into an x-spoiler component or something.
I do something similar, but with a tree-structure. I have written a blog post about this previously here: http://haagen-software.no/blog/post/2012-05-05-Ember_tree
It has the features you need in it, in that it adds and removed elements from the DOM when the nodes are clicked on.
A working example can be seen in an app I am currently building here: https://github.com/joachimhs/EurekaJ/tree/netty-ember/EurekaJ.View/src/main/webapp

ExtJS: starting HtmlEditor defaulting to source

I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.

Categories

Resources