Just updated Ckeditor to 4.6 and implemented it with inline-editor.
Most config works fine.
But in my toolbar, I have Format. But instead of showing 'Normal (DIV)' and 'Normal', I want to show 'Normal 1' and 'Normal 2'.
I did this before by writing this in my config:
config.enterMode = CKEDITOR.ENTER_DIV;
config.format_tags = "div;p;h1;h2;h3;h4;h5;h6;pre;address";
config.format_div = { element: 'div', name: 'Normal 1.0' };
config.format_p = { element: 'p', name: 'Normal 2.0' };
For some reason, this does not work after the update. The dropdown in the toolbar does not show 'Normal 1.0' and 'Normal 2.0'
Looks like it stopped working after I changed the editor to inline.
Fixed it directly by changing the name in the language file. Worked for me since the words are the same in all languages.
Related
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 am not able to find a way to change the Ace-Editor that is built into the AllouUI widget. The example below is what I would like to achieve with the theme attribute.
YUI().use(
'aui-ace-autocomplete-base',
function(Y) {
var editor = new Y.AceEditor(
{
boundingBox: '#myEditor',
height: '200',
mode: 'python',
value: 'print("Hello there!!!")',
width: '700',
theme: 'chaos'
}
).render();
Sadly, there in the code there are no predefined ways I saw to change the theme.
Is there a way change the theme to ace editor for alloyui's widget?
Not sure if Y.AceEditor component exposes the required api, but you can try to get the real ace editor object, which allows to change the theme dynamically
document.getElementById('#myEditor').env.editor.setTheme("ace/theme/chtome")
You should be able to call AceEditor.getEditor().setTheme():
editor.getEditor().setTheme('ace/theme/twilight');
I Want to use Underline in custom toolbar inline but it doesn't work while bold , link and Italic work as well.
var cfg1 = {
toolbar: [
['Source', '-', 'Bold','Italic', 'Underline']
]
};
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('inputGozine1',cfg1);
How can i use Underline in inline toolbar?
Did you check what you have in the config.js file? In standard and basic presets there is:
config.removeButtons = 'Underline,Subscript,Superscript';
And this setting has higher priority than config.toolbar, so make sure to remove this line.
I've been playing with this for a couple days now to no avail. I've googled just about every descriptive phrase I can think of and nothing useful has turned up.
I have installed Epiceditor in Codeigniter and I have gotten it to the point that the preview button and full screen buttons 'work' and the css is properly working. The issue is that the preview text(in both the preview button and the full screen side-by-side) does not show the proper formatting (bold, italic, etc.). There are no console errors and I'm out of ideas at this point.
Code:
require(['epiceditor'], function() {
var opts = {
textarea: 'page_text',
basePath: '/css/epiceditor',
autogrow: true
}
var editor = new EpicEditor(opts).load();
});
I had the same issue as you when using EpicEditor with requirejs. It seems that the epiceditor script includes marked at the bottom and it is this that is being injected when require the script. Try this:
require(['epiceditor'], function(marked) {
var opts = {
textarea: 'page_text',
basePath: '/css/epiceditor',
autogrow: true,
parser: marked
}
var editor = new EpicEditor(opts).load();
});
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