Is there some way to replace the default toolbar images (e.g. Bold, Italic, etc.) with Font Awesome icons?
I know this is an old issue, but on a plugin by plugin basis I've been able to add font-awesome icons to ckeditor buttons with the following code inside the plugin's init function. In my case my plugin was called trim:
//Set the button name and fontawesome icon
var button_name = 'trim';
var icon = 'fa-scissors';
//When a ckeditor with this plugin in it is created, find the button
//in the current instance and add the fontawesome icon
CKEDITOR.on("instanceReady", function(event) {
var this_instance = document.getElementById(event.editor.id + '_toolbox');
var this_button = this_instance.querySelector('.cke_button__' + button_name + '_icon');
if(typeof this_button != 'undefined') {
this_button.innerHTML = '<i class="fa ' + icon + '" style="font: normal normal normal 14px/1 FontAwesome !important;"></i>';
}
});
It hinges on knowing the class of the span inside the button, so it might not be the most convenient but it works.
The best thing is you can use Bootstrap theme on CKEditor or you can use Froala editor,It has inbuilt image uploader
Related
I would like my CKEditor text area to be styled based on the UIkit framework in order to have a direct overview of the display without having to click on proview.
I have already added the css in the config.js using
/* uikit.css */
config.contentsCss = '/css/uikit.min.css';
However, UIkit also need its JS file to properly dynamic content such as tab or accordion for example.
How can I add the uikit.js into CKEditor?
By adding the following in the config.js, it works as expect:
CKEDITOR.on('instanceReady', function(ev) {
var uikitScript = document.createElement('script');
uikitScript.src = 'https://cdn.jsdelivr.net/npm/uikit#3.3.7/dist/js/uikit.min.js';
var editorHead = ev.editor.document.$.head;
editorHead.appendChild(uikitScript);
});
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
There is one problem when I work with ckeditor. I press on icon for adding images, then modal window appears and I put direct image link in the special field, in this moment width and height detected automatically and it writes to style for ex:
<img src='#some images direct link' style='width:SOME WIDTH;height:SOME HEIGHT'>
Can I disable this automatic function? Or I have to delete this style by myself every time?
You could write a rule for your config that would remove the style tag on elements.
var editorRulesObject = {
elements: {
img: function( el ) {
if(el.attributes.style) {
el.attributes.style = '';
}
}
}
};
CKEDITOR.on('instanceReady', function( e ) {
// Ensures that any non-styled text, or text input without any tags will be correctly styled.
CKEDITOR.instances[e.editor.name].dataProcessor.dataFilter.addRules( editorRulesObject );
CKEDITOR.instances[e.editor.name].dataProcessor.htmlFilter.addRules( editorRulesObject );
});
In 2020, since version 4.5.0, it is much easier to switch off the annoying automatic filling in of height and readiness.
New there is the config option "image_prefillDimensions".
config.image_prefillDimensions = false;
Documentation: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
The user still has the possibility to fill in the height and width automatically by clicking on the button [Reset size (circle arrow)].
Just to get you up to speed, I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.
So for example in the HTML source view, you see this:
<img src="[image:abc123]" />
But when you view the WYSIWYG (live) mode, it shows this:
<img src="/file/image/abc123" />
This is all working great. An issue I am now having is when you edit the image in Image properties. As the image does not exist, it show's the red x.
http://img405.imageshack.us/img405/104/jzny.png
My question is, is there a way to customise the Image Properties dialog so that if it matches [image:abc123], it loads a different image URL in the Preview window?
This code doesn't work but might make it a little clearer what I'm trying to achieve here.
CKEDITOR.on('dialogDefinition', function(evt) {
if (evt.data.name == 'image') {
var image_url = ???;
var preview_image = ???;
var file_id = image_url.value.match(/\[image:([a-zA-Z0-9-]+)\]/);
if (file_id)
preview_image.src = '/file/image/' + file_id[1];
}
});
Thanks in advance!
I'm working on a Firefox extension that creates a menu of bookmarks from data fetched from a server. I'd like to add icons to each menuitem, but I can't seem to get them to display. I'm creating each menuitem using:
Bookmarks.createMenuItem = function(item) {
var menuItem = document.createElementNS(Bookmarks.XUL_NS, "menuitem");
menuItem.setAttribute("label", item.url_title);
menuItem.setAttribute("oncommand", "Bookmarks.openUrl('" + item.url + "');");
menuItem.setAttribute("class", "bookmark-menu-item");
if ( item.favicon ) {
menuItem.setAttribute("class", menuItem.getAttribute("class") +
" menuitem-iconic");
menuItem.setAttribute("image", item.favicon);
}
return menuItem;
};
The menuitem works just fine except that it doesn't display the image. I've verified the URLs that I'm getting for each image (from item.favicon in the code below) are accessible.
Any idea what's wrong here? I'm using Firefox 6.0.2.
I've picked random extension that has icons in menu items - HttpFox - and there you have something like this:
in XUL file:
<menupopup id="toolsPopup">
<menu id="hf_menu_HttpFox"
class="menu-iconic"
label="&browseroverlay.menutools.httpfox.label;" />
</menupopup>
in CSS file:
#hf_appmenu_HttpFox, #hf_menu_HttpFox, #hf_menu_webDeveloper_HttpFox {
list-style-image: url(chrome://httpfox/skin/globe16.png);
}
In FoxSplitter it's the same way.
So basically, if style attribute is allowed for menus, you may change
menuItem.setAttribute("image", item.favicon);
to
menuItem.setAttribute("style", "list-style-image: url(" + item.favicon + ")");
(if item.favicon is the URL), or if style doesn't work, then create classes for each item.
Hope this helps.