TinyMCE v4 adding custom items to the contextmenu - javascript

I'm upgrading TinyMCE on one of my websites and am trying to add a custom item to the contextmenu plugin. I can't seem to be able to find any documentation for it since all I can find is for v3.
I was easily able to add a custom link to the contextmenu in the last version but because TinyMCE has changed so much I'm having a hard time adding the new one. Can anyone point me to the correct documentation?
I used to use the following in the last version:
ed.addCommand('fileMan', function(e) {
fileman();
hide(ed, e);
});
m.add({title : 'Filemanager', icon : 'image', cmd : 'fileMan'});

I was able to figure this out. Here is what I did:
Created a new folder in the plugin directory called fileman
Created a file named plugin.js and added the code at the end of this post to it
Minifed the code and put the minified code in plugin.min.js
Edited plugin.min.js in the contextmenu plugin folder and added fileman to the list of loaded plugins
Added fileman to the list of loaded plugins when initializing the editor
Code:
tinymce.PluginManager.add('fileman', function(editor) {
editor.addMenuItem('fileman', {
icon: 'image',
text: 'Filemanager',
shortcut: 'Ctrl+J',
onclick: function() {
fileman.launch('editor');
},
context: 'insert',
prependToContext: true
});
});

This is somewhat tricky solution but the perfect one, worked for me after trying lot of things.
editor.on('contextmenu', function(editor) {
this.settings.contextmenu = 'fileman | link openlink image inserttable | cell row column deletetable';
var exampleMenuItem = this.menuItems['italic'];
this.menuItems['fileman'] = exampleMenuItem;
this.menuItems['fileman'].cmd = 'mceFileMan';
this.menuItems['fileman'].icon = '../../file-icon.png';
this.menuItems['fileman'].text = 'File Manager';
});

Related

Wordpress Detect Click on Gallery Shortcode Preview in TinyMCE

Working on customizing the wordpress gallery with some different settings for different gallery types.
Short of the long is I'm using multiple wp_editors on page and I'm having a focus problem when jumping between editors.
I'm making use of wp.media.view.Settings.Gallery.extend to switch between gallery types and display different js templates.
The functionality is actually all good and gallery shortcodes are going where they need to and being updated as needed.
For certain gallery types I am extending the attachment details with
an extend that looks something like this slimed down version:
var $gal_media = wp.media;
$gal_media.view.Attachment.Details = $gal_media.view.Attachment.Details.extend({
initialize: function(){
this.model.on('change', this.render, this);
},
render: function(){
var check_active_editor = window.wpActiveEditor;
return this;
}
});
The problem lies here when I'm attempting to detect the current editor during the render part of the function with window.wpActiveEditor;
It's working correctly providing you get focus on the current editor but if you just click the gallery preview or edit gallery pencil window.wpActiveEditor; will return the last focused editor.
Tried several different attempts to change focus on the editor in the wp_editor call using on click events during init like so:
'tinymce' => array(
'init_instance_callback' => 'function(gallery_editor) {
gallery_editor.on("click", function(){
tinyMCE.get(gallery_editor.id).focus();
});
}'
)
but they are not called when clicking on the gallery preview or edit.
Any suggestion on either:
1) Getting the proper id?
Obviously the Gallery knows it as it's returning the shortcode to the proper editor.
or
2) Toggling Focus/Blur on Multiple Editors when Gallery Preview or Edit button is pressed.
Much appreciated!
If anyone finds themselves in a similar situation I was able to resolve this issue with an on click callback on my editors that cycles through all the editors and removes the data-mce-selected attribute from any other gallery nodes that were selected.
Then it sets focus on the editor that was just clicked.
Not the prettiest but it's behaving as expected.
The key for me was using tinyMCE.dom.DomQuery
'tinymce' => array(
'init_instance_callback' => 'function(ed) {
ed.on("click", function(){
for (edId in tinyMCE.editors){
if(edId !== ed.id){
var this_editor = tinyMCE.get(edId);
var $ = tinyMCE.dom.DomQuery;
$("div[data-wpview-type]", this_editor.dom.doc).removeAttr("data-mce-selected");
}
}
tinyMCE.get(ed.id).focus();
});
}'
)

jquery file tree highlight selected

I am implementing a jQueryFileTree (http://www.abeautifulsite.net/jquery-file-tree/) as a file browser and would like each file or directory the user clicks on to stay highlighted. I know this can be done using simple JavaScript or CSS, but I don't understand the source code well enough to know how or where to implement the highlighting. Can anyone point me in the right direction?
Well, you can capture a click using the click handler and add a class using addClass.
$('.thing-i-will-click-on').click(function() {
$(this).addClass('selected');
});
You can also remove a class using a similar method.
$('.selected').removeClass('selected');
Combining these two things should give you the desired result.
So after a little tinkering I got it to work!
First you have to go into the jqueryFileTree.js and modify line 80 from this:
h($(this).attr('rel'));
to:
h($(this));
This will return the object that is clicked on instead of the file name. To get the file name within the function(file) within the definition of the .fileTree you'll have to use:
file.attr('rel');
Now you have the object and you can use this in the function(file) to highlight you code. (selected is a CSS class I created that changes the background color)
$(".selected").removeClass('selected');
file.addClass('selected');
$('#your_filelist_id').fileTree({
root: '/',
script: '/connectors/jqueryFileTree.php'
}, function(file) {
var flist = $('#your_filelist_id a[rel="' + file + '"]');
if(flist.hasClass('selected')) {
flist.removeClass('selected');
}
else {
flist.addClass('selected');
}
});

ToolTip in bryntum scheduler

I am new to Extjs. I am using the Bryntum scheduler in my application.
In that I want to show tooltip over scheduled item. I checked the Bryntum API and found that I can use **tooltipTpl** to show tooltip and **tipCfg** to configure it. I added eventmouseenter listener and in respective function I tried to add tooltipTpl
My listener is
eventmouseenter: this.eventMouse
and eventMouse function is
function(e) {
e.apply(e.tipCfg,
{
trackMouse: false
});
var tooltipTpl = "My Tool Tip";
e.apply(e,
{
tooltipTpl: tooltipTpl
});
}
but the code doesn't seems to work. Please help me out for using tootipTpl.
You don't need a listener, just use the tooltipTpl configuration on your Scheduler:
tooltipTpl: new Ext.XTemplate('<span>My Tool Tip</span>'),
...
It can be a String as well:
http://www.bryntum.com/docs/scheduling/3.x/?#!/api/Sch.panel.SchedulerGrid-cfg-tooltipTpl
Edit: See the code of this example using tooltips: http://www.bryntum.com/examples/scheduler-latest/examples/performance/performance.html

filepicker-rails w/signup form: button to `remove` the file in Filepicker

In my Rails 3.2 app I am using Filepicker through the filepicker-rails gem to allow users to upload a profile photo on the signup form. In the f.filepicker_field I am using the onchange option to call an onImageUpload() function that gets information about the newly uploaded image from the automatically-generated event.fpfile and disables the Filepicker browse button:
function onImageUpload() {
file = event.fpfile
img = $("<img>").prop("src", file.url).css({
width: '160px',
height: '160px',
});
$("#profile_photo_preview").append(img);
$(".filepicker-button").toggleClass("disabled");
};
I read about the event.fpfile at the Filepicker docs section on Widgets. In the form I also have a link that, when clicked, removes the recently updated image from the DOM and re-enables the Filepicker button:
:javascript
$(document).ready(function() {
$("#picture-remover").click(function() {
$("#profile_photo_preview").html("");
if ( $(".filepicker-button").hasClass("disabled") ) {
$(".filepicker-button").toggleClass("disabled");
};
});
});
...
...
= link_to "Remove Picture", id: "picture-remover"
This all seems to work pretty well. The only problem is that if a user removes the first picture and then uses the Filepicker browser to upload another, the original picture is still being saved in my Filepicker account.
I'd like to have my "Remove Picture" link remove the picture not only from the DOM, but also from my Filepicker account altogether. The Filepicker docs have a section on removing/deleting files here but I don't really understand the example code or how to implement it for myself. I'm particularly confused about the relationship between the InkBlob that is mentioned for removing a file and the event.fpfile object that I'm using to display a thumbnail preview.
So far I've tried adding the following line to my "Remove Picture" link but nothing happens:
:javascript
$(document).ready(function() {
$("#picture-remover").click(function() {
$("#profile_photo_preview").html("");
if ( $(".filepicker-button").hasClass("disabled") ) {
$(".filepicker-button").toggleClass("disabled");
};
filepicker.remove(InkBlob); #added this line
});
});
Many thanks to anyone who can point me in the right direction!
InkBlob and event.fpfile objects have the same role and the same attributes.
In your example you can pass event.fpfile object to remove function.
var file = event.fpfile;
filepicker.remove(
file,
function(){
console.log("Removed");
}
);
Generally to remove filepicker file you only need it's url.
So this code also works fine:
var someObject = {url: 'https://www.filepicker.io/api/file/xaXphhT9R0GB1tPYUQAr'};
filepicker.remove(
someObject,
function(){
console.log("Removed");
}
);

dynamically change the image of toolbarbutton? -- using Erik Vold's toolbarbutton.js

var self = require("sdk/self");
var toolbarbutton = require("toolbarbutton");
var toolbarbutton = toolbarbutton.ToolbarButton({
id: "annotator_toolbar_button",
label: "Web Annotator 2013",
image: self.data.url("stop.png"),
});
toolbarbutton.moveTo({
toolbarID: "nav-bar",
insertbefore: "home-button",
forceMove: false // only move once
});
toolbarbutton.image = self.data.url("start.png");// this command
I cannot change the image property of Erik Vold's toolbarbutton library for the Firefox addon sdk.
Any help would be appreciated.
You could use the library Toolbar Button Complete, which is my fork of toolbarbutton.js.
Using the library
You can use this library the same way as the original toolbarbutton.js, but it also has more options and features.
In your main.js file:
var self = require("sdk/self");
var toolbarbutton = require("toolbarbutton");
var button = toolbarbutton.ToolbarButton({
id: "annotator_toolbar_button",
label: "Web Annotator 2013",
image: self.data.url("stop.png"),
});
/* Only move button if installing for first time */
var forceMove = (self.loadReason === "install");
button.moveTo({
toolbarID: "nav-bar",
insertbefore: "home-button",
forceMove: forceMove
});
button.button().setAttribute( "image", self.data.url("start.png") );
You can find a working example of the library here. (Currently it is a little out of date, though.)
Installing the Library
If you are using the add-on SDK on your computer:
Download Toolbar Button Complete.
add it to your packages directory. (Either under your SDK directory or under your add-on's directory.)
If you are using the Add-on Builder to create your add-on:
Click the plus button next to your library folder:
Type in Toolbar Button Complete.
Click on the Add Library button:
Updating the Library
The library is hosted on github here.
If you are using the Add-on Builder for your add-on, you can simply click the little refresh button when there is an update available.

Categories