I am able to remove other tabs like Advanced in images and and another tab in links but, I the same method is not working for link tab.
I edited config.js file like this and it worked for advanced tab:
config.removeDialogTabs = 'image:advanced';
But when I edited config.js file for link tab then it didn't work:
config.removeDialogTabs = 'image:advanced';'image:link';!
enter image description here
Please take a look at config.removeDialogTabs docs. This config is case sensitive as described there, so the proper form should be:
config.removeDialogTabs = 'image:advanced;image:Link';
IF you are using ckeditor.js file you can change the distribution version below is the example
<script src="https://cdn.ckeditor.com/[version.number]/[distribution]/ckeditor.js"></script>
The following distributions (see comparison table) are available:
basic - the Basic preset
standard - the Standard preset
standard-all - the Standard preset together with all other plugins created by CKSource*
full - the Full preset
full-all - the Full preset together with all other plugins created by CKSource*
Link copied from
https://cdn.ckeditor.com/
You could try this if you have a config file for ckeditor:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name,
dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
dialogDefinition.removeContents( 'Link' );
}
};
Related
How do I prevent a builtin dialog from showing up? For example, let's say I want to prevent the link dialog from showing up to limit what my users can do with links.
Hmm I think I found the answer to my question: just replace the existing with a new registration:
editor.addCommand('link', {
exec: function (editor) {
alert('Boo!');
}
});
Let me know if there's a better way to do this.
For example, let's say I want to prevent the link dialog from showing up to limit what my users can do with links.
CKEDITOR.editorConfig = function( config ) { config.removeDialogTabs = 'link:target;link:upload;link:advanced'; };
See also removeDialogTabs.
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
I am using Fontawesome in my website and have my own CMS to edit the website pages. What I would like to develop is a dialog for the user where he can pick an fontawesome icon but for now it is OK to add them in the codeview of ckeditor.
Icons added to the content are not shown in ckeditor designview. I have changed ckeditor config file so that the editor accepts i tags (*). I added the fontawesome CSS file as an #import rule to contents.css but still no fontawesome icon visible in the editor area.
(*)config.js
config.allowedContent = true;
config.ProtectedTags = 'i' ;
config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag
What can I do to make this work?
config.protectedSource.push( /<i class[\s\S]*?\>/g );
config.protectedSource.push( /<\/i>/g );
What you have will interfere with img tags.
AND OR, after all of config:
CKEDITOR.dtd.$removeEmpty['i'] = false;
Both work well. Just be sure you have cleared cache completely when making changes.
*EDIT
One works while messing something else up. A no go solution.
I stopped using this bulky editor. Created my own.
However, to solve the solution, use EM or SPAN instead of I tags for this.
When you add something to the protectedSource setting, you're hiding it from the editor, that content is converted into a HTML comment to protect it and avoid that it can be modified by the user, but being a comment it's obviously hidden.
I'm using 4.11.4 and this solution not working correctly
This solution correctly work on 4.11.4
config.protectedSource.push( /<i class[\s\S]*?\><\/i>/g ); // Font Awesome fix
Goodluck
Instead of:
config.protectedSource.push(/<i class[\s\S]*?\><\/i>/g );
use more stronger and best way:
config.protectedSource.push(/<i class="fa[s|r|l|b] [A-Za-z0-9\-]+"><\/i>/g);
Because when user pasting content from another source, CKEDITOR.dtd should remove empty < i >, or convert < i > to semantic < em >, but only fontawesome icons with class="fas/far/fal/fab *" should be preserved.
(Naming in fontawesome: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started)
Take a look at this: ckeditor fontawesome addon.
Basically, you should download the fontawesome addon in zip format, and extract to "ckeditor/plugins/", with the name "fontawesome".
Then, open "ckeditor/config.js" and signal the usage of the new addon:
config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;
The next thing is to edit your HTML's section:
<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
The final step is to use the toolbargroupname: "FontAwesome" in your toolbar:
config.toolbar = [
{ name: 'insert', items: [ 'FontAwesome', 'Source' ] }
];
Here is a demo.
This also applies for glyphicons, in the same way the fontawesome is used.
Cheers
var currentDialog = CKEDITOR.dialog.getCurrent();
currentDialog._.editor.insertHtml("<customTag myAttr='var'></customTag>");
Throws an error, TypeError: Cannot read property 'isBlock' of undefined
If I try .insertHtml("<span>hello</span>") it works just fine.
How can I change ckeditor to allow me to specify my own custom html tags via .insertHtml()? I'd love to just change it to be something like <span class='custom'... or something like that, but I'm having to deal with legacy CMS articles. Using latest ckeditor. Thanks.
You need to modify CKEDITOR.dtd object so editor will know this tag and correctly parse HTML and process DOM:
CKEDITOR.dtd.customtag = { em:1 }; // List of tag names it can contain.
CKEDITOR.dtd.$block.customtag = 1; // Choose $block or $inline.
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.
You need to allow for this tag and its styles/attrs/classes in Advanced Content Filter:
editor.filter.allow( 'customtag[myattr]', 'myfeature' );
Unfortunately, due to some caching, in certain situations you cannot modify DTD object after CKEditor is loaded - you need to modify it when it is created. So to do that:
Clone the CKEditor repository or CKEditor presets repository.
Modify core/dtd.js code.
And build your minified package following instructions in README.md - the only requirements are Java (sorry - Google Closure Compiler :P) and Bash.
PS. That error should not be thrown when unknown element is inserted, so I reported http://dev.ckeditor.com/ticket/10339 and to solve this inconvenience http://dev.ckeditor.com/ticket/10340.
I worked around this issue with a combination of createFromHtml() and insertElement()
CKEDITOR.replace('summary', { ... });
var editor = CKEDITOR.instances.summary;
editor.on('key', function(ev) {
if (ev.data.keyCode == 9) { // TAB
var tabHtml = '<span style="white-space:pre"> </span>';
var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document);
editor.insertElement(tabElement);
}
}
I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.