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/
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');
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
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.
I have a standard installation (like samples):
<meta charset="utf-8"></meta>
<script src="../ckeditor.js"></script>
With HTML content with many <div contenteditable="true"> blocks. I need to configure each editor by local or an external configTypeX.js file,
<script>
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor, element = editor.element;
if ( element.is( 'h1', 'h2', 'h3' ) ) {
editor.on( 'configLoaded', function() {
editor.config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic' ]
]; // BUG: about "Source"?? NOT AT INTERFACE!
});
} else {
// WHERE PUT THIS ITEM?
customConfig: 'configType2.js';
}
});
</script>
So, my problem is
How to do a customConfig in this context?
Where the "best complete documentation", about config menus (editor.config.toolbar) without online configuration-tool, where I can understand how to put and remove menu itens with correct names? Here nothing about how to fix the bug of 'Source' in a full installation.
I do,
git clone git://github.com/ckeditor/ckeditor-releases.git
cd ckeditor-releases
cp samples/inlineall.html samples/myinline.html
and edit samples/myinline.html with the code above.
For inline editors the standard Source button is hidden, because it is not possible to have different modes other than wysiwyg. Therefore for those editors new plugin was created - sourcedialog, but it is not included in any of builds by default. You can build editor with this plugin using online CKBuilder or by using one of presets with all parameter. For example: ./build.sh full all. Remember also to load sourcedialog plugin (using config.extraPlugins = 'sourcedialog').
If you want to freely configure inline editors, then you should take a look at inlinebycode sample. First you need to disable automatic editors initialization on editable elements and then call CKEDITOR.inline() on elements you want to become editors:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable1', {
customConfig: 'editableConfig.js'
} );
CKEDITOR.inline( 'editable1', {
toolbar: [ ... ]
} );
I'm trying to implement my own Image plugin replacement for CKEditor. I bootstraped an implementation from the tutorial at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
Right now, the only attribute thing editable is the src
In the code below, $.imagebrowser.openPopup(callback) opens a popup once the user has made his selection, calls callback, with the new src attribute of the image.
This works fine, both for insertion and edition, but there is a glich in the undo / redo integration. A modification of the src attribute made by doubleclicking is not undoable until an othe modification occurs (like typing text). Then the modification of the src attribute seems to be properly integrated in the undo/redo stack, and I can undo and redo it.
Any idea of what I'm doing wrong ?
CKEDITOR.plugins.add( 'customimage', {
// Register the icons. They must match command names.
icons: 'customimage',
// The plugin initialization logic goes inside this method.
init: function( editor) {
editor.on( 'doubleclick', function( event ) {
if(event.data.element.getName() == "img") {
$.imagebrowser.openPopup(function(src) {
event.data.element.setAttribute("src", src);
});
}
});
editor.addCommand( 'insertCustomimage', {
allowedContent: ['img[!src,alt]{width,height,float,margin}'],
// Define the function that will be fired when the command is executed.
exec: function() {
$.imagebrowser.openPopup(function(src) {
editor.insertHtml('<img src="' + src + '" style="width: 400px; height: auto; float: left; margin: 10px 10px;">');
});
}
});
// Create the toolbar button that executes the above command.
editor.ui.addButton( 'Customimage', {
label: 'Image',
command: 'insertCustomimage',
toolbar: 'insert'
});
}
});
I'm not sure this is what your looking for but you can make snapshots:
editor.fire( 'saveSnapshot' );
This will add a state to the Undo/redo stack.
This command should be added before this line:
event.data.element.setAttribute("src", src);
The editor.insertHtml() function has this included in the function. But if you're editing tags you need to do this manually