I'm making a simple plugin to add a Richcombo to the toolbar that will insert a widget when one of the options in the dropdown menu is clicked.
Here's the code:
CKEDITOR.plugins.add( 'myPlugin', {
init : function( editor )
{
editor.widgets.add( 'widget1' );
editor.ui.addRichCombo( 'richcombo1', {...} );
}
});
Under chrome > inspect element> console,
it says: Uncaught TypeError: Cannot read property 'add' of undefined
I'm using version 4.4.5
Please help, nobody replies on CKEditor's forum.
You need the widget plugin. Otherwise the editor.widgets object does not exist, hence error.
CKEDITOR.plugins.add( 'myPlugin', {
// Load the widget plugin.
requires: 'widget',
init : function( editor )
{
editor.widgets.add( 'widget1', {
// Your widget definition...
} );
}
} );
For more, see the tutorial about creating simple widget.
Related
Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation.
I also have a custom "super" build (similar to this example) that I use in my web application.
Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.
If someone has an idea where I'm going wrong that'd be greatly appreciated!
Here is a skeleton example of my custom plugin class.
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import ckeditor5Icon from './icons/insertvariable.svg';
export default class HWInsertVariable extends Plugin {
static get pluginName() {
return 'HWInsertVariable';
}
init() {
const that = this;
const editor = this.editor;
const model = editor.model;
let labelTxt = 'Variable einfügen';
editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: labelTxt,
icon: ckeditor5Icon,
tooltip: true,
affectsData: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
that.buttonClicked();
} );
editor.editing.view.focus();
} );
return view;
} );
}
buttonClicked() {
//code
}
}
Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.
Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"
if/when I find a working way, I will try to come back here and post a better solution
Update:
I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where
const command = editor.commands.get('nameOfCommand');
// Execute the command when the button is clicked (executed).
buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
I have create a simple CKEditor widget that highlights the elements that have the class "pink".
I have also added a "Pinkify" button to the toolbar, which replaces the HTML of the selected element with some other elements that have the class "pink".
What I observe when I click the button is that widgets are not created for the freshly inserted elements. However, when I toggle between Source mode and WYSISYG mode, the widgets get created.
See the jsfiddle and its code:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'pink'
});
CKEDITOR.plugins.add('pink', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('pinkwidget', {
upcast: function(element) {
return element.hasClass('pink');
}
});
editor.addCommand('pinkify', {
editorFocus: 1,
exec: function(editor) {
var selection = editor.getSelection(),
selectedElement = selection.getStartElement();
if (selectedElement) {
selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
editor.widgets.checkWidgets(); // needed?
}
}
});
editor.ui.addButton('pinkify', {
label: 'Pinkify',
command: 'pinkify'
});
},
onLoad: function() {
CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
}
});
I am aware of this question on Stackoverflow, but I can't get it to work with setHtml called on an element. Can you suggest how to modify the code so that widgets get created as soon as the HTML is updated?
According to the CKEditor team, it is normal that CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).
So the workaround they gave me was to rewrite the code that insert HTML in place of the selected element to:
if (selectedElement) {
selectedElement.setHtml("");
editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}
For those like me who didn't know, editor.insertHTML inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
Updated jsFiddle here.
I have created my custom image plugin that insert only external images. But if I disable the default image plugin then the img tag doesn't appear in the form. Why ?
This is my plugin:
CKEDITOR.plugins.add( 'img',
{
init: function( editor )
{
editor.addCommand( 'insertImg',
{
exec : function( editor )
{
var imgurl=prompt("Insert url image");
editor.insertHtml('<img src="'+imgurl+'" />');
}
});
editor.ui.addButton( 'img',
{
label: 'Insert img',
command: 'insertImg',
icon: this.path + 'images/aaa.png'
} );
}
} );
You need to integrate your plugin with ACF - Advanced Content Filter which was introduced in CKEditor 4.1.
Here's a useful guide - Plugins integration with ACF.
Basically, you're introducing a feature to the editor. This feature needs to tell editor how it is represented in HTML, so what should be allowed when this feature is enabled.
In the simplest case, when you have a button, which executes a command you just need to define two properties of the CKEDITOR.feature interface: allowedContent and requiredContent.
E.g.:
editor.addCommand( 'insertImg', {
requiredContent: 'img[src]', // Minimal HTML which this feature requires to be enabled.
allowedContent: 'img[!src,alt,width,height]', // Maximum HTML which this feature may create.
exec: function( editor ) {
var imgurl=prompt("Insert url image");
editor.insertHtml('<img src="'+imgurl+'" />');
}
} );
And now, when this button will be added to the toolbar, feature will be automatically enabled and images will be allowed.
You set wrong command name in your addButton config. You need to set:
editor.addCommand( 'insertImg', {
...
}
);
as well as the name of command config in editor.ui.addButton()
UPD:
some fiddle: http://jsfiddle.net/kreeg/2Jzpr/522/
I'm using Tinymce (with jQuery) in a project I'm working at; we use a rich text editor for users to input information; however, sometimes when loading the page Firefox and Chrome will detect a 'tinymce is not defined' error (sometimes at different lines of the code), while other times the page will load just fine. What's weird is that it works perfectly with IE.
Here's a bit of the code I'm using:
view.find('textarea.rich-text').each(function () {
$(this).tinymce( /* ...rules... */);
});
And later on
_variable.find("#summary").tinymce().setContent(content);
This line is where the error (sometimes) gets caught. It seems to me that the problem is a loading issue, even though the tinyMCE plugin is initialized about 5000 lines prior this line.
Update: For now I have managed to 'solve' the problem with a setTimeout, but this seems like a really ugly way to do it.
A few points:
You don't mention whether or not the TinyMCE initialization is done within a jQuery ready event function. It should be of course.
You don't need the each loop. You can just say:
$('textarea.rich-text').tinymce({
script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js',
theme : "advanced",
...
});
You don't need the call to find since you are just selecting by id. Just do:
$("#summary").tinymce().setContent(content);
Your real issue is probably that tinymce has not finished initializing itself when you get the error. You see it has to load a script from the configured script_url. That may take a while. Therefore, you have to make use of a callback such as oninit.
If you do not have control over init method of TinyMCE then, you can follow this solution.
jQuery(document).ready(function($) {
function myCustomSetContent( id, content ) {
// Check if TinyMCE is defined or not.
if( typeof tinymce != "undefined" ) {
var editor = tinymce.get( id );
// Check if TinyMCE is initialized properly or not.
if( editor && editor instanceof tinymce.Editor ) {
editor.setContent( text );
editor.save( { no_events: true } );
} else {
// Fallback
// If TinyMCE is not initialized then directly set the value in textarea.
//TinyMCE will take up this value when it gets initialized.
jQuery( '#'+id ).val( text );
}
return true;
}
return false;
}
function myCustomGetContent( id ) {
// Check if TinyMCE is defined or not.
if( typeof tinymce != "undefined" ) {
var editor = tinymce.get( id );
// Check if TinyMCE is initialized properly or not.
if( editor && editor instanceof tinymce.Editor ) {
return editor.getContent();
} else {
// Fallback
// If TinyMCE is not initialized then directly set the value in textarea.
// TinyMCE will take up this value when it gets initialized.
return jQuery( '#'+id ).val();
}
}
return '';
}
$(".class-to-update-content").on("click", function(e) {
myCustomSetContent( "tinymce-editor-id", "New Content in Editor" );
});
$(".class-to-get-content").on("click", function(e) {
$("div.class-to-display-content").html( myCustomGetContent( "tinymce-editor-id" ) );
});
});
Ref : http://blog.incognitech.in/tinymce-undefined-issue/
EDIT: Solution included
I have page that creates a table: http://gupii.co.uk/rap/weekTable.php and I'm using a plugin to add a filter functionality: _http://gupii.co.uk/rap/js/mylibs/tablefilter.js
In weekTable.php:
var theTable = $('#weekTable')
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
This works fine when your directly on the weekTable page, but when I load the page into a JQueryUI tab and try and use the filter I get this error:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
} has no method 'uiTableFilter'
Whats going on here, why am I getting this error?
The page I'm trying to load into is _http://gupii.co.uk/rap/guilda.php (tab:This Week) if it helps
(apologies for posting more links than I should but I thought it would be helpful in diagnosing the problem)
Try this:
$("#filter").live("keyup", function() {
...
http://api.jquery.com/live/