i am using ckeditor inline , i want to customize ckeditor toolbar top and left position once toolbar is loaded at certain position. and also i want to update ckeditor.js and use in my website but when i edit ckeditor.js using beautifier , it gives error after i update and use in website.
i have tried to set custom top and left position for ckeditor toolbar but as it comes out from instanceReady event , it again reset position .
ck = CKEDITOR.inline(editableDivElement[0], {
removePlugins: 'resize, elementspath',
extraPlugins: 'ckeditor_wiris, smiley',
height: 60,
toolbar: toolbars,
toolbarLocation: 'top',
startupFocus: true,
});
ck.on("instanceReady", function (event) {
var ckeditorToolBar: any =
document.getElementsByClassName("cke");
if (ckeditorToolBar) {
ckeditorToolBar[0].style.top ="100px";
ckeditorToolBar[0].style.left="100px";
});
if there is way i can edit ckeditor.js and use in my website and also if i can set custom ckeditor toolbar position using top and left.
Related
I have an editable custom widget that can be placed in CKEditor 4 by
clicking a button in the toolbar - works fine = does not allow nesting
drag & drop from outside of the editor - allows nesting
I do not want to let user to have nested content of the widget. On the other hand I do want users to able to edit the content of the widget.
NOTE
click the button to insert widget's content. Click inserted text and the button becomes not available for clicking. Click some other text and you would be able to insert again. This is desired behavior.
the widget button will not be present in the final version of the CKEditor application / widget. Only drag&drop way of inserting text will be available
Insert two widgets in the editor and try to drag&drop one inside the other one. It will not work. This is desired behavior.
Now try to insert a widget and then insert another one by drag&drop of the text "master or editable" into existing widget. It will be possible.
Could someone help me to set CKEditor a way so nesting is NOT possible?
Working jsfiddle.
init: function( editor ) {
editor.widgets.add( 'simplebox', {
button: 'Create a simple box',
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content<br>.<br>.<br>.</p></div>' +
'</div>',
editables: {
title: {
selector: '.simplebox-title',
allowedContent: 'br strong'
},
content: {
selector: '.simplebox-content',
allowedContent: 'p br ul ol li strong em'
}
},
allowedContent:
'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',
requiredContent: 'div(simplebox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'simplebox' );
}
} );
}
} );
I am using Datatable ver 1.10, I enable the vertical scrolling. now datatable showing window default scroll style.
Is it possible to change/implement some other scrollBar on datatable scrollbar? to make it more beautiful and fancy.
I tried this solution at stackoverflow but it squeez the header.
also I want header and footer fixed position.
here is my working code
// when initialization is completed then apply scroll plugin
"fnInitComplete":function(){
$('.dataTables_scrollBody').perfectScrollbar();
},
//apply scroll on this height
"scrollY": 450,
//on paginition page 2,3.. often scroll shown, so reset it and assign it again
"fnDrawCallback": function( oSettings ) {
$('.dataTables_scrollBody').perfectScrollbar('destroy').perfectScrollbar();
},
I have a Kendo window created using kendoWindow, which is called on a div. This correctly shows this div in a Kendo Window. If at some later point I then try to simply show the div using the show function, to make it appear on the page instead of in a window,
which worked perfectly fine before creating the Kendo
Window, the show doesn't work. How do I get it to show the div?
if (GC.ViewModels.Dashboard.IsSubscriberLoaded()) { // ***CREATES MY KENDO WINDOW
var $kwin = $('#complaint-dashboard-container').kendoWindow({
width: "1400px",
title: "", // ??
modal: true,
actions: ["Close"]
});
$($kwin).data("kendoWindow").center().open();
} else { // *** WON'T SHOW THE div if above has been executed at some point
$('#complaint-dashboard-container').show();
}
Answer : once you bind the div and make a widget it does not act as a normal div , if you need show the content i suggest you to get the html of the content and show in a different div
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;
} );
}
}
} );