Can I use a TYPO3 Mask checkbox field into my javascript code, in fact I have a slider item and I want to add a checkbox for autoplay (on/off) in the backend of TYPO3, then the editor can use it.
swipe: true,
swipeToSlide: true,
adaptiveHeight: true,
touchThreshold: 10,
autoplay: true, <-----------
autoplaySpeed: 3000,
});
In order to pass content element data to JavaScript, I suggest the data-pattern:
Fluid:
<... data-slider-autoplay="{data.tx_mask_autoplay}">
JavaScript:
document.querySelector['[data-slider-autoplay]'].dataset.sliderAutoplay
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',
}```
Is there a way to put images on an infobox in bing maps? Thanks everyone.
Yes, supply your own html via the htmlContent Property. You can make the infobox appear however you'd like.
You can add HTML through the htmlContent Property, which is added in the options hash. For example:
var infoboxOptions = {
width :200,
height :100,
showCloseButton: true,
zIndex: 0,
offset:new Microsoft.Maps.Point(10,0),
showPointer: true,
htmlContent:'<img src="source/of/image></img>"'
};
I am using inlineNav (successfully due to assistance here!).
Now using dataUrl in a select statement, I do not understand the behavior.
The select options are not loaded when the grid is loaded. The select HTML request is not made until either edit or add a record is pressed.
Can I get it to load as soon as the grid is loaded?
$("#navgrid").jqGrid({
sortable: true,
rownumbers: true,
url: 'cms.dbw?action=ajaxgrid&sessionid=3d70a780-d6ec-102f-bd56-0015171f0bcc&subaction=jq&tableid=carepln',
editurl: 'cms.dbw',
datatype: 'json',
mtype: 'GET',
pager: '#navgrid_bottompager',
rowNum: 10,
rowList: [10,50,100],
width: 750,
height: '100%',
shrinkToFit: false,
toolbar: [false,'top'],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
gridview: true,
altRows: false,
toppager: true,
caption: 'Care Plan Detail',
colNames: ['ID','Act','Resident Code','Care Code'],
colModel: [
{name:'id',index:'id',width:50,align:'center',search:false,key:true,hidden:true},
{name:'active',width:30,align:'center',editable:true,edittype:'checkbox',editoptions: {value:'Y:N'},formatoptions:{disabled:false,value:"Y:N"}},
{name:'resid',align:'left',editable:true,width:70},
{name:'classid',align:'left',editable:true,edittype: 'select',editoptions: { dataUrl: 'cms.dbw?action=ajaxgrid&sessionid=3d70a780-d6ec-102f-bd56-0015171f0bcc&subaction=jqsubtable&tableid=careserv&field1=classid&field2=description'} ,width:70}
]
});
{"page":1,"records":4024,"total":403,"rows":[{"id":"1","cell":["1","Y","100243","22020"]},{"id":"2","cell":["2","Y","100220","22020"]},{"id":"3","cell":["3","Y","100193","22020"]},{"id":"4","cell":["4","Y","100082","22020"]},{"id":"5","cell":["5","Y","100068","22020"]},{"id":"6","cell":["6","Y","100241","22020"]},{"id":"7","cell":["7","Y","100215","22020"]},{"id":"8","cell":["8","Y","100059","22020"]},{"id":"9","cell":["9","Y","100240","22020"]},{"id":"10","cell":["10","Y","100009","22020"]}]}
The dataUrl does not resolve until the edit is started. And does not display after the edit.
I see no disadvantage from the loaded of dataUrl at the start of editing. On the contrary I see such behavior as the advantage. First of all one should not load optional data. It's better to load the data on demand. Second advantage is that you get the current data from dataUrl. On start of editing the current data from dataUrl will be loaded. So if the data will be changed on the server you can have different values on every row editing.
If you need load the data only once you can don't use dataUrl at all. Instead of that you can make separate Ajax call to set editoptions.value with respect of setGridParam.
I have the same issue - I have a foreign key in my data, and I'd like the grid to show some understandable value for this column, rather than some random key that the user will not know. Like you, I've used dataUrl to get the options, and would like to use formatter:'select' to have it display these values even when not editing the row. The problem is that this ajax request only happens when the row is edited, so it doesn't know the values until editing happens. The only solution I've found is just to do some manual ajax loading of these values before setting up the grid, and using these values to set editoptions: {value: ... } as you did for one of the other columns. This is the only way that the grid formatter can know these values before editing occurs.
This answer provides an example of loading the options before the gird, but leaves out the formatter:'select' part - here's a link to the documentation about that.
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");