Here is the example of the code
(function()
{
tinymce.PluginManager.add( 'custom_class', function( editor, url )
{
// Add Button to Visual Editor Toolbar
editor.addButton('custom_class', {
type: 'menubutton',
text: 'Text Layout',
icon: false,
menu: [{
text: 'Testimonial',
onclick: function()
{
tinyMCE.activeEditor.setContent('');
editor.insertContent('<strong>Menu item 1 here!</strong> ');
}
},
{
text: 'Large Header Line',
onclick: function()
{
tinyMCE.activeEditor.setContent('');
editor.insertContent('<h4>Header</h4><em>Menu item 2 here!</em> ');
}
},
{
text: 'Normal',
onclick: function()
{
tinyMCE.activeEditor.setContent('');
editor.insertContent('Menu item 3 here! ');
}
}]
//image: url + '/icon.png',
});
});
})();
After Wordpress upgrade from 4.7.1 to 4.7.2, I could not add tinymce buttons anymore.
I checked that javascript was definitely running. and it was working fine with wp 4.7.1
Anyone have ideas?
solution that worked in my case
run phpmyadmin (or any other database managment solution)
in table wp_options find can_compress_scripts and change value to 0
Related
I have the following code that I need to be able to edit the template of the ckeditor widget. I have learned that templates are immutable. What I want to achieve is to be able to insert a variable in the template. Is it achievable?
( function($, Drupal, drupalSettings, CKEDITOR) {
CKEDITOR.plugins.add('tabslinks',{
requires: 'widget',
lang: 'en',
icons: 'tabslinks',
hidpi: true, // %REMOVE_LINE_CORE%
init: function(editor) {
editor.ui.addButton('tabslinks', {
label: 'Create tabs links',
command: 'tabslinks',
icon: this.path + 'icons/tabslinks.png'
});
editor.addContentsCss(this.path + 'assets/contents.css');
editor.widgets.add('tabslinks',{
allowedContent: 'a(!tabslinks), a[!href];',
requiredContent: 'a',
editables: {
title: {
selector: '.tabslinks'
}
},
template: '<a class="tabslinks" href="" >' +
'Link should be a variable such as the result of var tabtitle ' +
'</a>',
button: 'Create tab title and link',
init: function () {
var tabtitle = this.element.getAttribute('data-cke-saved-href');
if(tabtitle){
this.setData('tabtitle',tabtitle);
}
},
upcast: function(element) {
return element.name == 'a' && element.hasClass('.tabslinks');
},
dialog: 'tabslinks',
data: function() {
/* Note I can edit the attributes in the following without a problem. The problem is that I cannot manipulate the dom, I have used methhods such as editor CKEDITOR.dom.element.createFromHtml(html) but that also breaks the widget, I have also tried to use jquery with no luck */
if(this.data.tabtitle){
this.element.setAttribute('data-cke-saved-href','#' + this.data.tabtitle);
this.element.setAttribute('data-toggle','tab');
}
}
} );
CKEDITOR.dialog.add( 'tabslinks', this.path + 'dialogs/tabslinks.js' );
}
} );
} )(jQuery, Drupal, drupalSettings, CKEDITOR);
I have tried to use many methods trying to manipulating the dom but this breaks the widget. Any suggestions?
Some of my Fullcalendar events have links. The links point to either public webpages, pdf documents or webpages which are restricted access.
I would like to add a class to format the links to add an icon, based on url string.
If the url contains:
"pdf" addclass "fc-pdf"
"restricted" addclass "fc-lock"
I assume it should be with and eventRender... but I'm having trouble find the right syntax. Can someone help me with this?
http://jsfiddle.net/lbriquet/oez9Ltym/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
views: {
listDay: {
buttonText: 'list day'
},
listWeek: {
buttonText: 'list week'
}
},
defaultView: 'listDay',
defaultDate: '2016-09-12',
navLinks: true, // can click day/week names to navigate views
events: [{
title: 'Conference (website)',
start: '2016-09-11',
end: '2016-09-13',
url: "https://www.ted.com/talks"
}, {
title: 'Meeting (download document)',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00',
url: "http://storage.ted.com/tedx/manuals/tedx_speaker_guide.pdf"
}, {
title: 'Lunch',
start: '2016-09-12T12:00:00'
}, {
title: 'Meeting (members only)',
start: '2016-09-12T14:30:00',
url: "http://www.dictionary.com/browse/restricted"
}, {
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
}, {
title: 'Dinner',
start: '2016-09-12T20:00:00'
}],
eventRender: function eventRender(event, element, view) {
}
});
The way I got this to work was by adding a type to the events simply because I think it would be easier than dealing with regex that might not always work. So events don't need a type but they can have a type pdf, restricted or whatever else you need. In eventRender I added the following:
eventRender: function eventRender(event, element, view) {
if(typeof event.type !== 'undefined') {
if(event.type === 'pdf') {
element.addClass('fc-pdf');
} else if(event.type === 'restricted') {
element.addClass('fc-lock');
}
}
}
A check to see if the type is provided or not and then if statements for adding the class based on the type. I also had to make a small change to the css selector, changing a.fc-lock to .fc-lock a to allow it to display properly. Here is the JS Fiddle showing this.
I wonder how I can add a file picker (the default wordpress librairy would be perfect) into my tinymce visual editor's popup.
at the moment I have a field where I have to past the url of the picture, if I could add a button to pick a picture from my library instead, it would be great !
Here is what I have so far
editor.addButton('thumbnail', {
title: 'Thumbnail',
image: url+'/../images/icon-thumbnail.png',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Thumbnail',
width: 940,
height: 150,
body: [
//I have to change this line---------> {type: 'textbox', name: 'url', label: 'Media URL'},<----- Is there an option to put a filepicker here ?
{type: 'textbox', name: 'caption', label: 'Caption'},
{type: 'checkbox', name: 'lightbox', value: '1', label: 'Lightbox'}
],
onsubmit: function(e) {
if(e.data.url==''){
alert('you have to provide the media\'s URL');
e.stopPropagation();
e.preventDefault();
}else{
// Insert content when the window form is submitted
var shortCode = '[thumbnail url="'+e.data.url+'"';
if(e.data.caption != ''){
shortCode = shortCode+' caption="'+e.data.caption+'"';
}
if(e.data.lightbox){
shortCode = shortCode+' lightbox=true';
}
shortCode = shortCode+' ]';
editor.insertContent(shortCode);
}
}
});
}
});
You can read this useful article, this also may help.
I dont't want to copy-paste the text from articles, but basically you have to create custom PHP function in your theme's functions.php file which will handle media dialog display, and then include it with add_action() on event admin_print_scripts.
The last part is usage of some JavaScript and the uploader inside, like this:
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});
I want to create Grid that has 3 columns. One column is 'textfield' and the other two columns are image which I set editor as 'filefield'. On image column I can display image by using renderer but when it comes to edit or add new image I can't press the browse button to browse image. Here is my code.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Author',
store: Ext.data.StoreManager.lookup('authorStore'),
renderTo: 'authorGrid',
columns: [{
header: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
}
}, {
header: 'Icon',
dataIndex: 'iconImage',
renderer: function(val) {
return '<img src="' + val + '">';
},
editor: {
xtype: 'filefield',
allowBlank: false,
}
}, {
header: 'Background',
dataIndex: 'background',
renderer: function(val) {
return '<img src="' + val + '">';
},
editor: {
xtype: 'filefield',
allowBlank: false,
}
}],
selModel: Ext.create('Ext.selection.CheckboxModel'),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
],
tbar: [{
iconCls: 'icon-add',
text: 'Add',
handler: function() {
// add record
}
}, {
iconCls: 'icon-delete',
text: 'Remove',
handler: function() {
// remove selected records...
}
}, {
iconCls: 'icon-save',
text: 'Save',
handler: function() {
store.save();
}
}]
});
What does it wrong? Can I put 'filefield' editor like this? Is it possible to click save button on grid for save grid data and upload images?
After quick investigation I didn't realized any easy solutions for this issue. In my view EditorGrid isn't supposed to support such type of operations.
And moreover - editor in grid is intended to modify value in corresponding row of the store. With fileupload you operate with files, but as I see in you code you are waiting for a string data in these cells.
What I suggest is replace the fileupload in cells with a popup. When user clicks a cell, you will open popup with fileupload. When they select a file and upload it - you close the popup and reload record in grid's store. Just an idea!
I am building an application and I am trying to keep it object oriented. The issue is that the alert box doesn't appear when the button is clicked. I believe it is an issue with the scope of the button. It could also be related to the way i am building my app. It is based off of an example provided by Sencha. I have searched, and tried many things, but I haven't come up with a solution. Here is my code:
Ext.require([
'Ext.grid.*',
'Ext.panel.*',
'Ext.msg.*'
]);
Ext.Loader.onReady(function() {
Ext.define('App.SimplePanel', {
extend: 'Ext.Panel',
alias: 'widget.SimplePanel',
width: 100,
height: 50,
initComponent: function() {
this.buttons = [{
text: 'Trigger Alert',
scope: this,
hander: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
this.callParent();
}
});
}, false);
Ext.onReady(function() {
// create an instance of the app
var simplePanel = new App.SimplePanel({
renderTo: document.body,
});
});
The issue is property should be called handler not hander
this.buttons = [{
text: 'Trigger Alert',
scope: this,
handler: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];