I'm searching for a possibility to edit the code of both sides - left and right - in monaco diff editor.
I've tried already this:
var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");
var diffEditor = monaco.editor.createDiffEditor(
document.getElementById("container"),
{ readOnly: false }
);
diffEditor.setModel({
original: originalModel,
modified: modifiedModel
});
But that (readOnly) option effects just the right side, which is by default editable.
Here is a demo link:
creating-the-diffeditor-hello-diff-world
Set originalEditable: true in IDiffEditorOptions:
var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
originalEditable: true, // for left pane
readOnly: true, // for right pane
});
diffEditor.setModel({
original: originalModel,
modified: modifiedModel
});
Related
I am currently having an error while using sap.m.Input, with the suggestion items
when I click on the list of suggestion:
controller
ch: function() {
var filters = [];
var TBLot = sap.ui.getCore().byId("idTableLot");
var item = sap.ui.getCore().byId("prd").getSelectedKey();
var filterL = new Filter("DCI", FilterOperator.EQ, item.toUpperCase());
var filterWhs = new Filter("Magasin", FilterOperator.EQ, GlobalWarehouse);
filters.push(filterL);
filters.push(filterWhs);
// ...
},
view
var oItemTemplateP = new sap.ui.core.ListItem({
key: "{ItemName}",
additionalText: "{U_CMC_RP_CDC}",
text: "{ItemName}"
});
new sap.m.Input({
id: "prd",
autocomplete: true,
showSuggestion: true,
enableSuggestionsHighlighting: true,
suggestionItems: {
path: "/itm",
template: oItemTemplateP
},
change: [oController.ch, oController]
});
You must be using an old version of UI5. The method getSelectedKey was introduced in 1.44. To see which UI5 version the app is running with, press Ctrl+Shift+Left Alt+P.
Good day all.
I wanna create direct upload of images via tiny.
https://codepen.io/Cere6ellum/pen/qBdRGmx
tinymce.init({
selector: '#editor',
// images_dataimg_filter: function(img) {
// return img.hasAttribute('internal-blob');
// },
plugins: 'image code',
toolbar: 'undo redo | link image | code',
/* enable title field in the Image dialog*/
image_title: false,
image_dimensions: false,
image_description: false,
automatic_uploads: false,
/*here we add custom filepicker only to Image dialog*/
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (callback, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
callback(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
});
How i can hide shown address of added image in the input field (source)?
Or if it's impossible, how i can change this shown (blob:https://) address to something like /images/75bcd4b4-217c-4d8b-91e4-425736223cd1
Or, if it's impossible too, how i can remove input field of source? Can i place only "add image" button in the form?
I am using TinyMCE plugin. Currently, my font-size option comes with list dropdown but I want slider for font size.
Is this possible with the TinyMCE. Anyone know how can I achieve this with TinyMCE editor?
TinyMCE does not have a built in way to select font size via a "slider". As TinyMCE is open source you can always modify the editor's code to meet your needs.
If you look in the main tinymce.js file you will find code like this:
editor.addButton('fontsizeselect', function() {
var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
each(fontsize_formats.split(' '), function(item) {
var text = item, value = item;
// Allow text=value font sizes.
var values = item.split('=');
if (values.length > 1) {
text = values[0];
value = values[1];
}
items.push({text: text, value: value});
});
return {
type: 'listbox',
text: 'Font Sizes',
tooltip: 'Font Sizes',
values: items,
fixedWidth: true,
onPostRender: createListBoxChangeHandler(items, 'fontsize'),
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('FontSize', false, e.control.settings.value);
}
}
};
});
This is how the current select list is implemented - you can always replace this with logic to implement font selection in a different manner.
Currently trying to remove jScrollPane when the width is a certain size. It appears to be working, I can trigger alert with
if (Modernizr.mq("screen and (max-width:715px)")) {
alert('hello world');
}
And I can remove jScrollPane with click functionality
$('.st-accordion a').click(function() {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
});
But for whatever reason I can't trigger destroy(); with the modernizr conditional
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
Any ideas?
Never mind, I got it by enclosing it all in the same function. A moment of clarity.
//Scrollpane
$(function()
{
$('.hs-content').jScrollPane({ autoReinitialise: true, hideFocus: true });
$('.hs-menu nav').jScrollPane({ autoReinitialise: true, hideFocus: true });
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
});
I created a SplitButton in TinyMCE and I am using a for loop to add buttons, but for some reason the buttons' onclick is always calling the same one (the last from the for loop). It seems every time I add a menu option, the callback is being overwritten.
Let me describe what I mean.
var c = cm.createSplitButton('optionsList', {
title : 'Options',
});
c.onRenderMenu.add(function(c, m){
var Opts1 = options[0];
var Opts2 = options[1];
var Opts3 = options[2];
var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
sub1.add({title: Opts1[x], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts1[x]);
}});
}
var sub2 = m.addMenu({title: "Options 2"});
for(var y in Opts2){
sub2.add({title: Opts2[y], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts2[y]);
}});
}
var sub3 = m.addMenu({title: "Options 3"});
for(var z in Opts3){
sub3.add({title: Opts3[z], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts3[z]);
}});
}
});
The menus are created correctly, but for example if I select 'Options 1' and select any option, tinyMCE will print the last option from that subMenu. I don't know how to fix this.
I fixed it, so I'll answer my own question. I needed to use a closure. The solution was:
var insertVar = function(val){
return function(){tinyMCE.activeEditor.execCommand('mceInsertContent',false,val);}
};
var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
var variable = insertVar(Opts1[x]);
sub1.add({title: Opts1[x], onclick: variable});
}