How to dynamically switch modes with CodeMirror?
I have the default set, but need to switch it.
Something like this would help you.
First, set CodeMirror:
this.editor = CodeMirror.fromTextArea(document.getElementById("textAreaCodeMirror"), {
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
theme:"eclipse",
mode:language
});
Then, to change the mode
this.editor.setOption("mode", language);
If this is CodeMirror 2 or 3, use setOption("mode", <new mode>) (docs for setOption, "mode").
For CodeMirror 1, use the setParser method.
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I've been trying to use the invalid_elements property inside the window.tinymce.init object but to no avail, invalid elements and valid_elements (i.e. , , etc) keeps apearing if i paste something or if i select the bold option for instance. I also tried the paste_word_valid_elements: 'b,strong,i,em,h1,h2', property, without any positive results.
Also, in this site https://www.tiny.cloud/docs/demo/valid-elements/ you can try the properties i mentioned above and they still not work... why is that??
is this ment to be this way, is it a bug or am i missing something while coding it.
this is the object i'm passing to the init method:
selector: `#${(target as HTMLDivElement).id}`,
plugins: "paste",
inline: true, // does not work in mobile
forced_root_block: true,
force_br_newlines: false,
force_p_newlines: false,
invalid_elements : 'strong,em',
paste_merge_formats: true,
paste_preprocess: (plugin: any, args: any) => {
console.log("que trae",args.content);
console.log(">>>>>>>>", args.content.split('</p>'));
},
paste_word_valid_elements: 'b,strong,i,em,h1,h2',
}```
In vscode, I have the following setttings:
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
I am debugging this issue for plugin Markdown Notes.
I believe at some point the settings value for editor.quickSuggestions changed from a boolean to the new mapping. In any case, in a document I have the text:
#draft
#d
And this used to autocomplete the tag text immediately, respecting the quickSuggestions preference.
Now, I don't get an automatic autocomplete, BUT I DO get the correct autocomplete values when I triggerSuggest (⌃Space by default).
So vscode DOES know the correct completion values, but it just will not respect the quickSuggestions settting.
Is there some other new setting I need to toggle to get quickSuggestions working correctly?
Maybe you have
{
"editor.suggestOnTriggerCharacters": true
}
set to false?
I am using ag-grid to display and modify data.How Can I switch between editable and non editable for the hole ag-grid. Can I do this with the grid api.
this is my default config:
this.defaultDefs = {
suppressMovable: true,
enableColResize: true,
editable: true,
};
Can I change editable dynamically?
editable can be either a boolean as you have it, or a function
If you use the function form you can determine on a cell by cell basis if you want the given cell to be editable
editable: function(params) {
return true; // true/false based on params (or some other criteria) value
}
you can set editable property by your way just create another function isEditable(columnName) which will give you boolean result.
this.defaultDefs = {
suppressMovable: true,
enableColResize: true,
editable: isEditable(column),
};
Do a logic check in the cellEditingStarted callback, calling the stop() when the check fails. You may need to write some css to style it or add a toast/notification to give the user feedback on why they're not able to edit.
You can use it like this:
editable: (params) => your logic
update your date
call api.redrawRows({ rowNodes: [node] })
You can also use suppressClickEdit in the grid options for a quick disabling:
gridOptions: {
suppressClickEdit: true | false,
...
}
See: https://www.ag-grid.com/angular-data-grid/cell-editing-start-stop/#no-click-editing
A simpler approach
editable: (params:any)=> params.data.isEdit === 'edit' ? true : false
add it to the columndefinitions
*
Note: isEdit === 'edit' is your custom logic
*
I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On & 2) Off.
When the user selects the Off radio button, my tinymce editor should be readonly/disabled & when the user selects the On radio button, my tinymce editor should be enabled.
How can I achieve that?
EDITED:- (As it is not working in IE8)
tinyMCE.init({
force_p_newlines : false,
force_br_newlines : false,
forced_root_block : false,
convert_newlines_to_brs: false,
// Not to add br elements.
remove_linebreaks : true,
mode : "textareas",
theme : "advanced",
plugins : "safari",
convert_urls : false,
width : "560",
height : "15",
theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
This code is used to disable:
function tinymce_state(id, disable){
var state = (disable==true)? 'Off' : 'On'
tinymce.get(id).getDoc().designMode = state;
tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
tinymce.get(id).controlManager.get('bold').setDisabled(disable);
tinymce.get(id).controlManager.get('italic').setDisabled(disable);
tinymce.get(id).controlManager.get('underline').setDisabled(disable);
tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}
You may use the following to block input in the editor:
// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off
// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on
You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them
// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);
// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);
EDIT:
You could change the contenteditable property of your rtes iframe body.
Downside will be that you will have to disable the tinymce UI (buttons) seperatly
// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');
For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx)
the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"
I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:
for (editor_id in tinyMCE.editors) {
if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
}
}
This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
To disable the editor use:
tinymce.activeEditor.mode.set('readonly');
To enable the editor use:
tinymce.activeEditor.mode.set('design');
Tested on version 5.x
You can cover with a white div opacity .7 and higher z-index.
You can use in 3.x the option
editor_deselector : "no_mce",
to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.
In 4.x you can use the option
selector:'textarea.not(.no_mce)'
Hope that helps.
(Oviously you can change the CSS Class to whatever you want)
For old 3 ver you can use:
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");