I am trying to update the text direction dynamically in the ace editor to "LTR" or "RTL" depending on what is entered by the user.
I am listening to change event on the ace editor and writing the following code after going through the ace.js
scope.editor.session.$bidiHandler.setTextDir(_isNewValueRTL);
scope.editor.session.$bidiHandler.updateBidiMap();
_isNewValueRTL is a boolean. I don't see it working.
Any help will be appreciated
Try adding this CSS to your ace_line class
.ace_line {
direction: ltr;
unicode-bidi: bidi-override;
}
This sould change the direction of the text
Ace currently doesn't have setTextDir method, it has support for line based direction
https://github.com/ajaxorg/ace/pull/3400 that works by adding 'RIGHT-TO-LEFT EMBEDDING' (U+202B) to the line
to use that include ext-rtl.js
editor.setOption("rtlText", true)
then to change the direction of cursor line call
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js ></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ext-rtl.js ></script>
<script>
debugger
editor = ace.edit(null, {
value: " left\n\u202B right\n\n try press ctrl-alt-shift-r or ctrl-alt-shift-l ",
rtlText: true,
})
document.body.appendChild(editor.container)
editor.container.style.cssText = "height: 150px; width: 400px; outline: solid"
</script>
editor.session.$bidiHandler.setRtlDirection(editor, true)
If you need some other functionality then open a feature request to ace https://github.com/ajaxorg/ace/issues/new
editor.setOption("rtlText", true)
if rtlText doesn't work, just use rtl
editor.setOption("rtl", true)
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 written some javascript under a text item html and it is working perfectly when in eclipse birt designer. When I deploy the report to Birt viewer in apache, it does not seem to work. I am not sure if the click is not working or the javascript behind it is not working but something is wrong the I am not getting the desired result on clicking the text item
Basically, I am hiding few charts when I click on the text item (I wrote an html script to make it a button and then called a javascript function to hide a chart). It is working in birt designer but not working in birt viewer on apache
below is the button html script
<button type="button"
style="width: 120px; height: 30px; color: #5a698b; font: bold 12px Arial;
padding-top: 1px; padding-bottom: 1px; background: #ddddff; text-align: center;"
onclick=" showhidetab(1,'Population','2.5in')";">Overview
</button>
here is the javascript function that the button is calling
<script>
function showhidetab(showflag,bookmark, heightval)
{
if (showflag == 1)
{
document.getElementById(bookmark).style.visibility="visible";
document.getElementById(bookmark).style.display = "block"
document.getElementById(bookmark).style.height= heightval;
}
else
{
document.getElementById(bookmark).style.visibility="hidden";
document.getElementById(bookmark).setAttribute("style","display:inline;height:1px");
document.getElementById(bookmark).style.height='1px';
}
}
</script>
Can someone please suggest what could be wrong here
Regards
Syed
Some quick fixes:
Your line document.getElementById(bookmark).style.display = "block" is missing a semicolon.
I think the id should be js3_Population... check in your browser.
The brackets closing the else statement is missing a semicolon.
When I made those changes it worked for me. Your code is only resizing the item and not hiding it since the state of the bookmarked object is already visible. You might consider using style.display="none" to avoid holding space for hidden items.
I want JQuery UI Spinner to display a plus and a minus sign instead of up and down arrows.
I've extended the JQuery UI Spinner as such:
$.widget("ui.spinner", $.ui.spinner, {
options: {
icons: {
down: "icon custom-down-icon",
up: "icon custom-up-icon"
}
}
});
With these classes I can then style the up and down spinner "buttons" as I prefer.
This DOES change the class of the s containing the spinner icon as I want, but it doesn't change the actual HTML character inside the s.
HTML being generated:
<span class="ui-icon icon icon-plus">▼</span>
Any idea where this character comes from? And how I can change it by extending the Spinner widget.
PS. Just setting options when initialising the widget is not really a viable option here.
I ran into something very similar. I'm not sure how to change it by just extending the widget itself and had to come up with something quick so I just had jQuery look for the class and replace the HTML inside the span:
$(document).ready(function() {
$('span > .icon-plus').html('*new plus button*');
});
The HTML character that is loaded depends on the class of the span, I think the "custom-icon" ones are just for the example.
There is a full list of the icons available here:
http://api.jqueryui.com/theming/icons/
Just pick the one you want (there are a couple of +s and -s) and follow the instructions here:
http://api.jqueryui.com/spinner/#option-icons
This is my code if it helps:
$('input[class="itemLevel"]').spinner({ min: 0, max: 5, icons: { down: "ui-icon-carat-1-w", up: "ui-icon-carat-1-e"} });
You can extend default buttons by calling a widget constructor
$.widget( "ui.spinner", $.ui.spinner, {
_buttonHtml: function() {
return "" +
"<input class='ui-spinner-button ui-spinner-up' id='buttonadd' type='button' value='+' />" +
"<input class='ui-spinner-button ui-spinner-down' id='buttonremove' type='button' value='−' />";
}
});
And then attach spinner to element:
$('#spinner').spinner()
Include this link in your head:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
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!
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.