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);
});
Related
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();
}
});
I cannot disable a tabstrip button. Ive tried the following running within the Tabstrips Activate event
tabButton.data("kendoButton").enable(false)
-- fails because the button isnt a kendo button
tabButton.addClass("disabled")
-- fails, disabled is added, but button is still usable
where tabButton was derived along the following lines, I know I gottten it.
var tabButton = $(".k-button")
I resolved the issue by adding a css & class as in
.disable_a_href { pointer-events: none; }
tabButton.addClass("disable_a_href")
TabStrip has explicit enable and disable functions.
If you want them to start disabled, use the class k-state-disabled on the <li> element.
Here's a fiddle showing both of these methods. Tab 2 will start disabled, and tab 3 can be toggled.
To disable all tabstrip except the active you can use this code:
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.enable(tabStrip.tabGroup.children().not(".k-state-active"), false);
I use a very simple approach ...
var tabstrip = $("#yourtabstripID").data("kendoTabStrip");
var tabContentID = $("content_div_of_that_tab").parent().attr('id');
//Enable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], true);
//Disable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], false);
I feel the code above is pretty self explanatory ...
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
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
How can I get Aloha Editor to recognize and edit the dynamically created dom/content?
I usually use jquery and use '.live' or '.on' to get this to work but not sure how to using Aloha.
Thanks
To create a dynamic aloha instance:
$(document).ready(function(){
// Add an editable upon clicking on some button Button
$("#Button").click(function () {
var $ = Aloha.jQuery;
$('#somewhere').append('<div class="editable" id="ed" ></div>');
Aloha.jQuery('.editable').mahalo();
Aloha.jQuery('.editable').aloha();
});
Now you can simply get the content:
var e = Aloha.getEditableById('ed');
getContents();
I haven't tested it but it should work.