I have a form which contains many inputs. The last input is textarea tag linked to summernote editor.
the problem is, when the page load, it takes me to the bottom of the page, to the textarea tag.
I set sunnmernote focus to false. but nothing change.
how can load the page normally without moving to the textarea tag at the bottom of the page?
here is the js I'm using :
$(document).ready(function() {
$('.summernote').summernote({
tabsize: 2,
height: 100,
focus: false,
bold:false,
fontNames: ['Tajawal', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
fontNamesIgnoreCheck: ['Tajawal']
});
$('.summernote').summernote('fontName', 'Tajawal');
});
remove the class called summernote in html <textarea> tag
Related
I applied kendo editor on a div element rather using textarea as it's giving some issues in iPad. Now, I don't want the editor to have toolbar to format text.
I tried applying styles as none & set tools to an empty array but still the toolbar appears with a draggable button in it.
<div id="targetdiv" contenteditable="true" style = "resize: none;width:
100%
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>
<script>
$("#targetdiv").kendoEditor({
tools: []});
</script>
The toolbar appears though the editor it initialized with no tools, as in image below.
Approach 1: (Not working)
<style>
.k-editor-toolbar
{
display:none;
}
</style>
Approach 2: (Not working)
$('.k-editor-toolbar').hide();
Approach 3: (partially works)
Added a select event but still the toolbar appears for an instant and then disappears.
$("#targetdiv").kendoEditor({
tools: [],
//Fires when the Editor selection has changed.
select: function (e) {
let editor = $("#targetdiv").data("kendoEditor");
editor.toolbar.hide();
});
If you don't want to show the toolbar define an empty tools in the KendoUI editor initialization:
$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});
If you want to disable the edition, you should use:
$(editor.body).attr('contenteditable',false);
you can try this one as well
.k-editor-toolbar
{display:none !important;}
Finally,
I have to subscribe for the open event of the editor toolbar and prevent its execution. This resolved my issue.
let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
e.preventDefault();
});
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.
I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?
Thanks in advance.
The reason for this is the setting in the bootstrap css
.EditTable td input,
.EditTable td select,
.EditTable td textarea {
width: 98%;
display: inline-block;
}
i.e this is caused from width:98%
To correct this there are a lot of ways.
The first one is to use editoptions to set a manual auto width with style options.
edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},
The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:
<style>
.EditTable td input[type="checkbox"]
{
width :auto;
}
</style>
after loading the jqgrid bootstrap css file.
I am using ckeditor and I have set the textarea size correctly via code:
CKEDITOR.replace( 'editor1', {
width: 468,
height: 132
} );
I have also deactivated the resizing correctly with code:
config.resize_enabled = false;
My problem is that the textarea's height still allows for text to be typed and the textarea expands vertically. I want the textarea to be set via a certain height and not move past that. So no more text can be entered once the height has been met.
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>