How can I disable kendo editor or make it read only? I tried using HTML attribute but no luck ( or I still do it right)
#(Html.Kendo().Editor()
.Name("Text")
.Value(#detail.SRoomInformation)
.Tools(tools => tools.Clear())
)
If you are wondering why there is no such option such as Enable/Disable - because html could be simply shown as html or as text - all the tools the Editor provide are not needed and it is pointless to use such widget. Editor means it helps you edit ;)
If you really want to make it disabled you can use the following line of code after initializing the Editor
e.g.
#Html.Kendo().Editor().Name("test")
<script type="text/javascript">
$(function () {
$($('#test').data().kendoEditor.body).attr('contenteditable', false)
})
</script>
No Idea why the answered question didn't work for me. But anyway, it sparked something like:
#(Html.Kendo().EditorFor(model => model.Description) )
#Html.ValidationMessageFor(model => model.Description)
<script>
// this piece of code neeeeeeeds to be heeeeere! Don't move it
$(document).ready(function () {
var editor = $('#Description').data('kendoEditor');
editor.body.contentEditable=false;
});
</script>
And this worked!:) Have fun!
None of the above solutions worked for me when I tried to implement them. It seems that Telerik has provided an extremely simple solution to this involving an overlaid div as documented at: http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/enable-and-disable-editor
In practice this resulted in an extra div next to the control I wanted to disable:
<div ng-if="readonly/disabled_Condition == true">
<div id="overlay" style="width:100%;height:250px; top:100; position:absolute; background-color: black; opacity:0.1; z-index:2;"></div>
<textarea kendo-editor k-options="options.DutyEditor" ng-model="item.TasksHtml"></textarea>
</div>
The one issue is matching up the size of the overlaid div to the size of your kendo editor. In my case it's a simple 100% width and 250px height, so I lucked out here.
Thought this might help someone!
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 have multiple instances of CKEditor 5 and I want to add button which will change the height of texteditor. In order to do so I have to change height of a single instance, is that possible and if yes, how?
Side note:
I want to make maximize button like in CKEditor 4. Is there plugin for that or I have to make it myself?
Maximize Feature - From what I have checked it has not been implemented yet. CKEditor has a ticket ofr it: https://github.com/ckeditor/ckeditor5/issues/1235
Editor Height - This link explains How to set the height of CKEditor 5 (Classic Editor) explains how to do this permanently. If however you want to do change editor height dynamically with a button, you need to use a small trick where you assign a CSS class not directly to content area but to its container (notice .ck-small-editor .ck-content in css class and document.getElementsByClassName( 'ck-editor' )[ 0 ] in JavaScript ):
ClassicEditor
.create( document.querySelector( '#editor' ), {
} )
.then( editor => {
window.editor = editor;
// Assign small size to editor using CSS class in styles and button in HTML
const editable = editor.ui.getEditableElement();
document.getElementById( 'change-height' ).addEventListener( 'click', () => {
document.getElementsByClassName( 'ck-editor' )[ 0 ].classList.toggle( 'ck-small-editor' );
} );
} )
.catch( err => {
console.error( err.stack );
} );
.ck-small-editor .ck-content {
min-height: 50px !important;
height: 50px;
overflow: scroll !important;
}
<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>
<div id="editor">
<h2>The three greatest things you learn from traveling</h2>
<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
<h3>Appreciation of diversity</h3>
<p>Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
<h3>Confidence</h3>
<p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
</div>
<div>
<button type="button" id="change-height">Change Height</button>
</div>
How to make the editor toolbar located just above? I use inline editing, and the toolbar is transferred down if to scroll a site before the end of the page.
Using sharedspace can help you.
You can find a similar issue, and the solution, here:
How to make the inline ckeditor toolbar fixed at the top and not float
The implementation of the plugin would look like this:
<div id="toolbarLocation></div>
<div id="editor" contenteditable="true"></div>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor', {
sharedSpaces: {
top: 'toolbarLocation'
}
} );
</script>
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
Recently I successfully integrate vertical iScroll to my mobile web. It has pull to refresh feature. However, Im currently stack at the part which I need to implement the same feature into a horizontal iScroll. Does anyone knows where can I see any sample that uses the same feature? I really need the help. All I need is to know how to do it because as of now, i have no idea with it.
Regards,
Askhole :)
iScroll by default does not support Pull to Refresh from a horizontal standpoint. I'm sure it could be done with some CSS and code tweaks, but you might be better off asking in the iScroll forums: https://groups.google.com/forum/#!forum/iscroll
i guess you implement vertical refresh by using a non-official iscroll.js (i.e., a modified-for-refresh iscroll). If this is your situation, this answer may helps:
i implemented vertical refresh with the official iscroll.js, by adding a little trick:
1. keep sth very very tiny at the next-bottom, use its position().top to detect the actual height of ur page
keep you "onloading" ath the bottom, set it invisible
Math.abs(myScroll.y) + wrapper.height === $(yourTiny).position().top
when scroll starts, if scroll upwards, check the condition in 3.
for tolerance in 4, you may use, for example: if(Math.abs(myScroll.y - wrapper.height + $(yourTiny).position().top) < 11){ //your code to refresh}
Here are the sample codes:
1.html
<sapn id="theTinyThing"> </span>
<table id="bottomRefreshImg" style="display:none">
<tr><td><img src="refreshGreen.gif" /></td></tr>
<tr><td>loading...</td></tr>
</table>
</div> //close scroller
</div> //close wrapper
<div id="footer"></div>
<script src="./jquery-2.2.3.min.js"></script>
<script src="./iscroll.js"></script>
<script src="./mrPage.js"></script>
</body>
2.css
#theTinyThing{
height:1px; //it's ivisible
font-size:1px;
}
3.js
var myScroll;
var myScroolHasCausedAddNew=0;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollbars: true,
scrollbars: 'custom',
mouseWheel: true,
click:true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
snap:true,
snap:'table',
});
myScroll.on('scrollStart',function(){
if($("#theTinyThing").position().top + myScroll.y-myScroll.wrapperHeight<11){
if(myScroll.directionY==1){
$("#bottomRefreshImg").show();
myScroolHasCausedAddNew=1;
}
}
return false;
});
myScroll.on('scrollEnd',function(){
if(myScroolHasCausedAddNew==1){
myScroolHasCausedAddNew=0;
$("#bottomRefreshImg").hide();
loadMore();
}
return false;
});
}