In my code I created an editor like so:
this.monacoEditor = monaco.editor
.create(
document.getElementById('ide'), {
model: null,
readOnly: true,
contextmenu: false,
}
);
So now that editor is readonly. How would I change this.monacoEditor to be writable/editable?
I figured it out. In the context of the code above:
this.monacoEditor.updateOptions({readOnly: false});
Related
I am using react jodit as rich text editor in an application. This is how my current config looks like:
const richTextEditorConfig = {
readonly: false,
toolbarAdaptive: false,
toolbarSticky: false,
showCharsCounter: false,
showWordsCounter: false,
height: '200',
showXPathInStatusbar: false,
askBeforePasteHTML: false,
askBeforePasteFromWord: false,
disablePlugins: 'add-new-line',
buttons: 'bold,italic,underline,strikethrough,|,ol,ul,|,link,brush',
};
I want to have default value of "Open in new tab" checkbox under link option of the editor to be set to true. Currently its set to false on open.
Cannot find anything related to this in documentation(https://xdsoft.net/jodit/docs/classes/config.Config.html#link). The only config I could see is conditional render of whether to show or disable this checkbox using such config:
link: { openInNewTabCheckbox: false },
How should I go about this?
Trying to use ng-smart-table to shows delete confirm modal when user try to delete row, but the modal does not appear.
I added delete related settings following documents and other examples but still modal does not show.
<ng2-smart-table [settings]="settings" [source]="data" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>
settings = {
mode: 'external',
pager: {perPage: 10},
hideSubHeader: true,
sort: false,
actions: {
position: 'right',
edit: false,
delete: true,
add: false,
},
delete: {confirmDelete: true},
columns: {
id: {title: 'ID'},
},
}
onDeleteConfirm($event: any) {
if (window.confirm('Are you sure you want to delete?')) {
$event.confirm.resolve();
} else {
$event.confirm.reject();
}
}
Nothing shows on Chrome Console log.
Remove mode: 'external' from the settings.
Please refer the demo for better understanding. DEMO https://stackblitz.com/edit/example-ng2-smart-table
As you can see in the ng2-smart-table documentation:
Triggered only if table confirmDelete = true and mode = inline.
So please change the mode in settings to inline instead of external.
Hello stackoverflow community,
i just built a Codemirror Editor into an ExtJSProject like so:
addCodeMirrorPanel: function() {
this.getAixmFormarea().add(Ext.widget({
xtype: 'textarea',
fieldLabel: 'AIXM',
autoScroll: true,
name: 'aixm',
id: 'codearea',
width: 800,
height: 300,
resizable: true,
resizeHandles: 's se e',
listeners: {
afterrender: function () {
var textarea = Ext.getCmp('codearea');
var codemirror = CodeMirror.fromTextArea(textarea.inputEl.dom,{
lineNumbers: true,
content: '',
matchBrackets: true,
electricChars:true,
autoClearEmptyLines: true,
extraKeys: {"Enter": "newlineAndIndentContinueComment"}
});
}
}
}));
}
Now what i want to do is access the codemirror editor from a different Controller function
and im not quite sure about how to do that.
no getinstance() , geteditorbyID() or similar methods are specified in the codemirror manual and i cant seem to access it from the now hidden textfield either.
Well why are you discarding the instance after you are creating it? Perhaps you could simply store it on the widget?
this.codeMirror = CodeMirror.fromTextArea(...);
I ran into a similar issue and was originally using the answer provided by plalx. However, if you are in need of creating instances of codemirror's dynamically this can get tricky.
I used the following code and created a method on the parent component to getValue(), setValue(), and getCodeMirror()
So in use you can get the codemirror instance similar to this:
var codeMirror = Ext.ComponentQuery.query('#parentFld')[0].getCodeMirror();
Here is the component code:
{
fieldLabel: 'Code Instance',
itemId: 'parentFld',
border: 1,
html: '<textarea></textarea>',
/* Overriding getValue function of the field to pull value from the codemirror text area*/
getValue: function (value) {
return this.getCodeMirror().getValue();
},
/*Overriding setValue function of the field to put the value in the code mirror window*/
setValue: function (value) {
this.getCodeMirror().setValue(value);
},
getCodeMirror: function () {
return this.getEl().query('.CodeMirror')[0].CodeMirror;
},
listeners: {
//on render of the component convert the textarea into a codemirror.
render: function () {
var codeMirror = CodeMirror.fromTextArea(this.getEl().down('textarea').dom, {
mode: {
name: "text/x-sql", globalVars: true
},
//theme: theme,
lineNumbers: true,
readOnly: false,
extraKeys: {"Ctrl-Space":"autocomplete"}
});
codeMirror.setSize(700, 370);
}
}
}
I am using an inline editor ipweditor tool which internally use tinyMCE editor. On their demo page it is using old version of tinyMCE which is not working in my IE. So I updated tinyMCE with latest version.
In old version of TinyMCE it was returning me defined content with all the HTML tags, while in new version it is returning me only text without HTML tags.
Here is the link of jsFiddle demo. Anyone know how do I configure tinyMCE so it return me HTML tags also.
HTML
<div style="display:none">
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</div>
<div style="border: solid thin gray; padding:5px;">
<div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b>
</div>
Javascript
$(document).ready(function () {
var ed = new tinymce.Editor('content', {
mode: "exact",
theme: "advanced",
plugins: "emotions,table",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
table_default_cellspacing: 0,
table_default_border: 1,
remove_linebreaks: false
});
$('.my_text').editable({
type: 'wysiwyg',
editor: ed,
onSubmit: function submitData(content) {
alert(content.current);
},
submit: 'save',
cancel: 'cancel'
});
});
It's always not preferable to make any modification in plugin library, but this really need some modification. The problem was with 'ipweditor.js' tool. It's creating new tinyMCE editor object internally and getting response in "text" format from tinyMCE.
var r =options.editor.getContent({format : 'text'});
We need to replace 'text' with 'html'
var r =options.editor.getContent({format : 'html'});
It's more preferable to make this format setting also dynamic so append a setting variable in inital settings and fetch value from there.
var defaults = {
onEdit: null,
onSubmit: null,
onCancel: null,
editClass: null,
submit: null,
cancel: null,
type: 'text', //text, textarea or select
submitBy: 'blur', //blur,change,dblclick,click
editBy: 'click',
editor: 'non',
options: null,
format:'text'
}
var options = $.extend(defaults, options);
and now retrieve using the format defined in setting.
var r =options.editor.getContent({format : options.format});
You can use content.previous. Here is a modified fiddle.
I am using slickgrid to display certain data. How can i add custom method to slickgrid rows ?
For eg: I want to open modal box with current row data whenever enter key is pressed.
You can subscribe to the onKeyDown event in the grid to check this. Something like:
grid.onKeyDown.subscribe(function(e) {
if (e.which == 13) {
// open modal window
}
});
Let me know if this helps!
If i got your requirement well, then try out this code,
createInvoiceDetailsTable : function () {
var gridOptions, gridColumns;
gridColumns = [
{id:'ean_code', name:'EAN', field:'ean_code', width:125, cssClass: 'grid-cell'},
{id:'description', name:'Product Description', field:'description', width:250, formatter:opr.invoice.productGridDescriptionFormatter, cssClass: 'grid-cell'},
{id:'qty', name:'Qty', field:'qty', width:40, , formatter:UpdateQtyBtnFormatter},
];
gridOptions = {
editable: true,
autoEdit: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableColumnReorder: false,
rowHeight: 35
};
dataView = new Slick.Data.DataView();
invoiceProductGrid = new Slick.Grid($('#invoice_details_grid_div'), dataView , gridColumns, gridOptions);
function UpdateQtyBtnFormatter (row, cell, value, columnDef, dataContext) {
return '<input type="button" style="width:30px; height:30px;" class="update_invoice_product_qty" id="' + value + '" value="Q"/>';
}
}
Using this update_invoice_product_qty class name you can write event.
If this is not your requirement then please share with some code or procedure which you tried earlier.