I am new to monaco editor and its' really good. I just noticed that it doesn't work on text box control.
it's working on div
<div id="ComponentTemplateHTML" style="width:1000px;height:600px;border:1px solid grey"></div>
but in text box or text area it's not working
<textarea asp-for="ComponentTemplateHTML" style="width:1000px;height:600px;border:1px solid grey"></textarea>
require.config({ paths: { 'vs': '../../lib/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
monaco.editor.create(document.getElementById("ComponentTemplateHTML"), {
language: "css",
scrollbar: {
vertical: 'auto',
horizontal: 'auto'
}
});
Just copy contents from div to textarea when form is submitted so it will be send out with form as an input. Remember to make that textarea hidden or make that textarea dynamically.
jQuery Example
$( "#your-form-id" ).submit(function( event ) {
$ ('#your-textarea-id').val( $('#your-monaco-div-id') );
});
Related
I'd like to add a hyperlink in a editor, like vscode does:
I'd like to add this formatted document and when you click into it, some operation happens, open a file dialog, for example.
I have no code to show yet because I didn't find anything like that yet, only for regular text that goes like this:
const line = editor.getPosition();
if(!line) {
throw new Error('line is null');
}
const range = new monaco.Range(line.lineNumber, 1,
line.lineNumber, 1);
const text = "empty tab";
const op: monaco.editor.IIdentifiedSingleEditOperation = {
range: range,
text: text,
forceMoveMarkers: true
};
editor.executeEdits('my-source', [op]);
but I didn't see how add a format it.
You can use an overlay element and define the placeholder content in HTML, with links that will perform actions (e.g. change the editor theme, change the language etc).
The HTML for the placeholder would look something like this:
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
Along with the following CSS:
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
You can then wire this up in JavaScript as follows:
Functions to hide and show the placeholder:
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
Create the editor and show the placeholder:
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
Add event handlers for any links in the placeholder that you want to perform actions when clicked:
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
Event handler to clear the placeholder and focus into the editor when the user clicks on any part of the placeholder apart from the links:
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
If you copy the HTML, CSS and JavaScript below into the Monaco Playground, you will see this working:
HTML
<div id="container" style="height: 100%"></div>
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
CSS
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
JavaScript
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
I'm new to jquery ui dialog box. I used dialog box in my MVC website.
I placed my dialog container in layout page inside body tag as follows-
<div id="dialogBox"></div>
And then on my view page, I have button with id aMyProfile and written jquery code for opening my dialog box.
html code for aMyProfile -
<input type="button" id="aMyProfile" data-url="#Url.Action("UserProfileContainer","User")" value="View Profile"/>
Jquery code for aMyProfile-
$('#aMyProfile').click(function () {
var currentURL = $(this).attr('data-url');
$('#dialogBox').load(currentURL, function () {
$('#dialogBox').dialog("open");
});
});
and dialog box initaialization as-
$('#dialogBox').dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
position: 'center',
resizable: false,
title: 'Profile',
width: 750
});
all above jquery code is inside $(document).ready(function () {});
when i execute my project it is giving me output as -
My dialog box is not coming at center of window. Even though i set position to center.
I don't understand that where I'm going wrong.
You're specifying the position value wrong. It should be like this:
position: { my: "center", at: "center", of: window }
In any case, the default value for position is center aligned, so just remove it.
http://api.jqueryui.com/dialog/#option-position
I've just had the very same issue. Things to check:
Make sure you have /Scripts/jquery.ui.position.js in your application, if not go here
http://jqueryui.com/download/ and download it, you'll find it in
\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\development-bundle\ui\jquery.ui.position.js
in App_Start/BundleConfig.cs change your jqueryui bundle config from this:
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"
));
to this:
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.ui.position.js"
));
That should sort it.
I am using jquery ui 1.9 in an ajax based website.
I have the following code:
This is a <span title="Some warning" class="warning">warning</span> message<br />
This is a <span title="Some info" class="info">info</span> message
Using jquery ui tooltip would work, even for dynamic content:
$(function() {
$( document ).tooltip();
});
But I want different tooltip styles for each of this message-types. For example red color for warning and blue for info and it should work for dynamic content too.
Any ideas?
You need to use the toolTipClass property to specify the css class
$(document).ready(function() {
$( ".warning" ).tooltip({
tooltipClass: "warning-tooltip"
});
$( ".info" ).tooltip({
tooltipClass: "info-tooltip"
});
});
First, here is the code that works:
$(function() {
$('#warning-binder-element').tooltip({
items: '.warning',
tooltipClass: 'warning-tooltip',
content: function () {
return $(this).prev('.warning-toast').html();
},
position: {
my: "right bottom",
at: "right top-10"
}
});
$('#info-binder-element').tooltip({
items: '.info',
tooltipClass: 'info-tooltip',
content: function () {
return $(this).closest('.doo-hicky').next('.info-toast').html();
},
position: {
my: "left bottom",
at: "left+10 top-10"
}
});
});
A few notes on the above:
The selector for .tooltip() is not the item you want to have a tooltip pop up on, it is an element on the page that the tooltip object and its associated events are bound to.
If you attempt to bind two tooltips to the same object, only the last one will persist so binding both to $(document) will not work (which is why I have bound the two different tooltip objects to two different elements on the page).
you can bind the tooltip object to the item that will get the tooltip, but if you use a class selector, this may lead to ill effects.
A screenshot : http://d.pr/i/A4Kv
This is my dialog code:
function popupbox(title,html,buttonTxt,buttonAction) {
var buttons = {};
if(buttonTxt != null) {
buttons[buttonTxt] = buttonAction;
}
buttons['Cancel'] = function() {
jQuery(this).dialog('destroy').remove();
};
var p = jQuery('<form class="dialoginnerbox">' + html + '</form>');
p.dialog({
autoOpen: false,
resizable: false,
modal: false,
width: 'auto',
height: 'auto',
maxHeight: 600,
maxWidth: 980,
title: title,
close: function(event, ui){
jQuery(this).dialog('destroy').remove();
},
buttons: buttons
});
p.dialog('open');
}
Any ideas?
---- UPDATE ----
I swapped out the returning html for some dummy text and that fixed it.. so something with the html that is being put into the popup is making it open twice...
Malformed html and inline script tags cause jquery ui dialog to open multiple dialogs.
With jQueryUI dialogs; jQuery may consider valid html as malformed html in some cases. The reason I say this is I ajax loaded the html for my dialog with valid html and valid html comments. I got double dialog boxes until I removed the html comments from the ajax loaded html. Example...
content.htm
<div id="myDialogContent">Alert!</div><!-- Here is an innocent looking comment -->
dialog.js
$.get( '/content.htm', function( html ){
$( html ).dialog();
});
This would produce a double dialog. If the html begins or ends with an html comment, the same dialog issue occurs. The only way around is to either remove the html comment or wrap the html text in another html tag like so...
dialog.js
$.get( '/content.htm', function( html ){
$( '<div>'+html+'</div>' ).dialog();
});
This would produce one dialog.
function display_dialog() { if($('.dialog_wrapper').length) {
return;
}
$('<div class="dialog_wrapper"</div>').dialog({
autoOpen: true,
modal: true,
A workaround for this problem is to use a counter:
var count = 0;
var $dialog = $('<div></div>') .dialog({ ...
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: pagetitle
...
});
if (count > 0) {
$dialog.dialog("destroy").remove();
count = 0;
}
$dialog.dialog('open');
count++;
worked for me... for the dialog issue, but i am getting multiple requests on the server ...
something like that: when i click for the first time on the link, it sends on information to the server. When i click for the second time (without refreshing the browser) it sends the same information twice. When i click for the third time, three requests are sent to the server, and so on...
If you wrap your html in a single tag, it may clean it up.
The inclusion of divs inside the html may cause a dialog for each one unless there's a layer above:
This didn't work for me:
<hr /> blah blah blah
<h3>blahblahtitle</h3>
<div id=somestufffirst>here's the stuff</div>
<div id=someotherstuff>here's some more stuff</div>
But this did:
<div>
<hr /> blah blah blah
<h3>blahblahtitle</h3>
<div id=somestufffirst>here's the stuff</div>
<div id=someotherstuff>here's some more stuff</div>
</div>
It is easy to use one of the icons available from the standard icon set:
$("#myButton").button({icons: {primary: "ui-icon-locked"}});
But what if I want to add one of my own icons that is not part of the framework icon set?
I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work:
.fw-button-edit {
background-image: url(edit.png);
}
Any suggestions?
I could also recommend:
.ui-button .ui-icon.your-own-custom-class {
background-image: url(your-path-to-normal-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
background-image: url(your-path-to-highlighted-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
then just type in the JS code:
jQuery('selector-to-your-button').button({
text: false,
icons: {
primary: "you-own-cusom-class" // Custom icon
}});
It worked for me and hope it works for you too!
I believe the reason why his won't work is because you're icon's background-image property is being overridden by the jQuery UI default sprite icon background image. The style in question is:
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");
}
This has higher specificity than your .fw-button-edit selector, thus overriding the background-image proerty. Since they use sprites, the .ui-icon-locked ruleset only contains the background-position needed to get the sprite image's position. I believe using this would work:
.ui-button .ui-icon.fw-button-edit {
background-image: url(edit.png);
}
Or something else with enough specificity. Find out more about CSS specificity here: http://reference.sitepoint.com/css/specificity
This is based on the info provided by Yi Jiang and Panayiotis above, and the jquery ui button sample code:
As I was migrating an earlier JSP application that had a toolbar with images per button, I wanted to have the image inside the button declaration itself rather than create a separate class for each toolbar button.
<div id="toolbarDocs" class="tableCaptionBox">
<strong>Checked Item Actions: </strong>
<button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
<button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>
Of course there were plenty more buttons than just the two above. The s tag above is a struts2 tag, but you could just replace it with any URL
<button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>
The below script looks for the attribute data-img from the button tag, and then sets that as the background image for the button.
It temporarily sets ui-icon-bullet (any arbitrary existing style) which then gets changed later.
This class defines the temporary style (better to add further selectors for the specific toolbar if you plan to use this, so that the rest of your page remains unaffected). The actual image will be replaced by the Javascript below:
button.ui-button .ui-icon {
background-image: url(blank.png);
width: 0;
height: 0;
}
and the following Javascript:
$(document).ready(function () {
$("#toolbarDocs button").each(
function() {
$(this).button(
{ text: $(this).attr('data-img').length === 0? true: false, // display label for no image
icons: { primary: "ui-icon-bullet" }
}).css('background-image', "url(" + $(this).attr('data-img') +")")
.css('background-repeat', 'no-repeat');
});
});
The solution at this link worked great for me:
http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html
$(document).ready(function() {
$("#btnClose")
.text("")
.append("<img height="100" src="logo.png" width="100" />")
.button();
});
My solution to add custom icons to JQuery UI (using sprites):
CSS:
.icon-example {
background-position: 0 0;
}
.ui-state-default .ui-icon.custom {
background-image: url(icons.png);
}
.icon-example defines position of icon in custom icons file. .ui-icon.custom defines the file with custom icons.
Note: You may need to define other JQuery UI classes (like .ui-state-hover) as well.
JavaScript:
$("selector").button({
icons: { primary: "custom icon-example" }
});
Building on msanjay answer I extended this to work for custom icons for both jquery ui buttons and radio buttons as well:
<div id="toolbar">
<button id="btn1" data-img="/images/bla1.png">X</button>
<span id="radioBtns">
<input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
<input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
</span>
</div>
$('#btn1').button();
$('#radioBtns').buttonset();
loadIconsOnButtons('toolbar');
function loadIconsOnButtons(divName) {
$("#" + divName + " input,#" + divName + " button").each(function() {
var iconUrl = $(this).attr('data-img');
if (iconUrl) {
$(this).button({
text: false,
icons: {
primary: "ui-icon-blank"
}
});
var imageElem, htmlType = $(this).prop('tagName');
if (htmlType==='BUTTON') imageElem=$(this);
if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
}
});
}
// HTML
<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
<input type="radio" id="apple" name="radioSet" value="1"><label for="apple">Apple</label>
<input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>
// JQUERY
// Function to remove the old default Jquery UI Span and add our custom image tag
function AddIconToJQueryUIButton(controlForId)
{
$("label[for='"+ controlForId + "'] > span:first").remove();
$("label[for='"+ controlForId + "']")
.prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");
}
// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place
// Set icons on buttons. pass ids of radio buttons
$(document).ready(function () {
AddIconToJQueryUIButton('apple');
AddIconToJQueryUIButton('mango');
});
// call Jquery UI api to set the default icon and later you can change it
$( "#apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
$( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
in css
.ui-button .ui-icon.custom-class {
background-image: url(your-path-to-normal-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class {
background-image: url(your-path-to-highlighted-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
in HTML
<button type="button" class="ui-button ui-widget ui-corner-all">
<span class="custom-class"></span> CAPTION TEXT
</button>
in JavaScript
$("selector").button({
icons: { primary: "custom-class" }
});