Is there a possibility to change the 'title' and/or 'button' property defined in the plugin's lang.js file via the config.js file for a specific plugin?
It is the text which is shown in the dialog title/tooltip and I would like to avoid changing it directly inside the lang.js file. Or would I have to write the devs for a more fitting translation?
Or would I have to write the devs for a more fitting translation?
If you want to change the translation in CKEditor, the recommended way is joining the Transifex translation team - https://www.transifex.com/ckeditor/ckeditor/
You can change the lang entry like it has been presented below (you can put this code inside config.js) but please note this will not be localized thus if your CKEditor supports multiple languages it is better to make this change in lang file directly.
CKEDITOR.on( 'instanceReady', function( ev ) {
console.log( editor.lang.button );
editor.lang.button.selectedLabel = 'xyz';
console.log( editor.lang.button );
});
Related
I'm using CKEditor v.4.11.3 and have added the font plugin https://ckeditor.com/cke4/addon/font by downloading the zip and putting it in my plugins folder, and adding 'font' to config.extraPlugins in config.js. Font selector now shows up in my editor. Problem is when clicking on text in the editor or selecting a different font, browser dev tools shows:
Uncaught TypeError: CKEDITOR.tools.array.find is not a function
at b.findMatchingStyleName (plugin.js?t=J1QB:78)
at Object.findMatchingStyleName (ckeditor.js:31)
at b.getMatchingValue (plugin.js?t=J1QB:65)
at $.<anonymous> (plugin.js?t=J1QB:221)
at a.p (ckeditor.js:10)
at a.<anonymous> (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at a.g (ckeditor.js:439)
at a.CKEDITOR.editor.selectionChange (ckeditor.js:457)
at $.<anonymous> (ckeditor.js:453)
I also note that my editor version doesn't match any of those shown in the Releases table at the bottom of the Font plugin page https://ckeditor.com/cke4/addon/font
What's the easiest way to solve this situation without making matters worse?
I note there could be dependency issues here with the font plugin needing stuff I haven't added but not sure how to find out what that might be?
Or do I need to upgrade the editor? Willing to do that but don't want to make things worse or cause other problems!
Thanks
To bypass this error, just "return null" at the findMatchingStyleName function
findMatchingStyleName: function( editor, element ) {
return null
/*
return CKEDITOR.tools.array.find( this._.names, function( name ) {
return this.getStyle( name ).checkElementMatch( element, true, editor );
}, this );
*/
}
I would like the ability to add a class to images which are added to the body field in Drupal.
I want to keep things as simple as possible for our users, whereby they don't have to add classes etc. Ideally they would just click on the image button in the toolbar, paste the URL or upload an image and set align either left or right:
Image properties for adding images in CKeditor
I've tried several options, including: CKEditor adding class to img tag but I cannot get anything to work.
The path to CKEditor is to the CDN //cdn.ckeditor.com/4.5.4/full-all
I'd like to us my own SCSS to make the images float left or right at desktop, and be centered for the small breakpoint.
The text format is 'filtered HTML'.
Is there any way I can get this to work?
Many Thanks
Update
Because I'm using the CKEditor CDN, I've added the following to my local 'ckeditor.config.js' file
config.extraPlugins = 'image, dialog, dialogui';
// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'image', '/plugins/image/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialog', '/plugins/dialog/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialogui', '/plugins/dialog/' 'plugin.js' );
// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'image, dialog, dialogui'
} );
The example I copied this from has 'news' as the CKEDITOR.replace, which I'm sure is wrong, what should this be? https://www.pluginsforckeditor.com/Tutorials/149/How-to-add-a-plugin-to-CKEditor/en/n149.aspx
You can modify the image plugin in order to have the class of the image already entered. So users just have to paste URL or upload an image.
Fill the default field with what you want.
I hope to help you.
I have a plugin which need to show a (Modal) dialog each time the user double click on a word.
Detecting double click is no problem, but the exact fields/values in the dialog depends on exactly which word the user clicked on, and some mutable global state. So I can't create the dialog until the moment before I need to show it. And here is the problem: How do I do that?
Right now I use this code:
var dialogName="uniqueDialog" + counter++;
CKEDITOR.dialog.add(dialogName,function(editor) {
// Creating dialog here.
});
CKEDITOR.instances.editor.openDialog(dialogName);
This works, but having to add a uniquely named dialog, just to show it once and then newer use it again seems really really wrong. Also I fear this will keep using resources since the dialogs are newer removed(I could not find any remove method).
So my question is: Is there a better way to dynamical create and show a "one use" dialog?
Update:
If bootstrap is not allowed then maybe an addFrame version of the dialog is acceptable. This could then refer to a html file that can load from parameters.
NB: The plunkr only works, if you fork and edit it, otherwise it will give you a 404 for the template.
Here is a quick plunkr:
plunky
And here is the plugin in question:
CKEDITOR.plugins.add( 'insertVariable', {
requires: ['iframedialog'],
icons: 'insertvariable',
init: function( editor ) {
editor.addCommand( 'varDialog', new CKEDITOR.dialogCommand( 'varDialog' ) );
CKEDITOR.dialog.addIframe('varDialog','varDialog','sample.html?var='+item,500,400);
editor.ui.addButton( 'insertVariable', {
label: 'Insert Variable',
command: 'varDialog',
icon: this.path + '<insert gif>'
});
}
});
Obviously you are not creating dialogs anymore with different content, but you are referring to another piece of html, that can change. I've kept the bootstrap thing in there as well for reference.
I made one final edit, that will show the current contents. So I think that is roughly what you want. Check it out.
Previous Answer
If you are prepared to use bootstrap, then you can do no worse than check out their modal dialog, which can be just be shown and hidden at will.
http://getbootstrap.com/javascript/#modals
It's simple and cuts down any need to keep creating your own dialog. The dialog won't be one use type, but you will set the defaults as necessary. The varying content link is here:
http://getbootstrap.com/javascript/#modals-related-target
That would be the quickest way to get this going. It all depends on whether you want to use this framework. As CKEDITOR is already using JQuery it is an option worth considering.
My software allows people to upload images to a "Files" section on my site. I want to allow users to insert those images into a CKEditor 4 instance but I want to control where those images are hosted.
Instead of inserting the following:
<img src="http://domain.com/image.jpg" />
I want it to insert:
<img src="[file:12345678]" />
I can then use PHP to control what URL will be displayed on the website.
The issue is, in the WYSIWYG view of CKEditor, it shows as the image could not be found. Is there anyway I can create a plugin that replaces the [file:12345678] with the image code when in WYSIWYG view but in source view it reverts back to [file:12345678]?
Kind of like how the BBCode plugin works. When you go to source view you see:
The [b]brown fox[/b] jumped over the log
But the editor view you see:
The brown fox jumped over the log
I tried to work out the code from the BBCode plugin but the BBCode parsers seems to be something built-in.
I found the following code but it only applies to the source view. I can't seem to find out if there is a similar function of the WYSIWYG view.
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
img : function( element )
{
// I can get the src of any image and then replace it.
element.attributes.src
}
}
});
Thanks for any advice you can give ;)
There are two type of filters in htmlDataProcessor (which is the default data processor) - htmlFilter which is used to filter HTML format, so the format used "inside" editor while editing; and dataFilter which is used to filter data format, so the format used "outside" editor - the one you see in source mode or when you call editor.getData(). Those names can be confusing, but it helps when you remember that "data" is outside (because editor.getData()).
So I guess that when loading data to editor (transforming data to HTML) you want to replace [file:\d+] URLs with addresses from some hash and when getting data back (transforming HTML to data) you want to make the opposite transformation.
Therefore you need to extend both filters - htmlFilter and dataFilter. This is how the dataFilter may look:
editor.dataProcessor.dataFilter.addRules( {
elements: {
img: function( el ) {
el.attributes.src = fileIdToUrlHash[ el.attributes.src ];
}
}
} );
Similar operation you have to do in the htmlFilter.
I am trying to edit an entire html using fck editor. So that should contain tags like html, body ,DOCTYPE etc. But my problem is when I submit the data, fckeditor forcefully remove the above tags from the content. I want to avoid this. Is there any configuration issue there.
-Arun
look at this config option. CKEDITOR.config.fullPage. I believe it will permit you to edit the full page (and will preserve the contents) (i haven't used it.)
'ckEditor' (as it's now known) shouldn't allow html/script tags directly within the content. However if you have the latest version there is a 'source' view which allows all the source to be edited directly and may give you what you want.
Arun User this one .This is best solution for you.
var CKcontent = false ;
$(document).ready(function(){
// setup ckeditor and its configurtion
CKEDITOR.replace( 'content1',
{
//fullPage : true,
customConfig : 'config.js' ,
toolbar : 'BasicToolbar' ,
height : "300"
});
});
Set only fullpage : false if not show HTML content otherwise set true
Note: it implemented by me in our development