Develop Reference

How to change value in attribute title for button on the toolbar tinymce?

I need for the element "Supersctipt" set attribute title value as "footnote".
By default here "Superscript".
I don't know a way how to do it. Here is my code tinymce:
initTinyMCE()
function initTinyMCE(selector = '.js-tinymce') {
tinymce.init({
selector: selector,
skin: false,
branding: false,
menubar: false,
height: 500,
toolbar:
'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
plugins: [
"code", "paste", "lists"
],
paste_as_text: true,
block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6; ',
content_css: '/css/tinymce.css?' + new Date().getTime(),
})
}
I tried through jQuery refer to this element, but without success, because tinymce inits a little later:
$(function() {
$('.js-tinymce button[title="Superscript"]').attr('aria-label', 'footnote')
})
I also tried this way, reading documentation:
formats: {
sup: { selector: 'sup'},
},
style_formats: [
{ title: 'footnote', format: 'sup' },
]
But without success too( Finally, how to do this easy task?

Yeeeah! I've solved the problem by adding setup:... option to the end of tinymce init object. Code:
initTinyMCE()
function initTinyMCE(selector = '.js-tinymce') {
tinymce.init({
selector: selector,
skin: false,
branding: false,
menubar: false,
height: 500,
toolbar:
'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
plugins: [
"code", "paste", "lists"
],
paste_as_text: true,
block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6',
content_css: '/css/tinymce.css?' + new Date().getTime(),
setup: function(tinyMCE) {
tinyMCE.on('init', function() {
$('[aria-label="Superscript"]').attr('title', 'Footnote')
});
},
})
}

How to select the "Justify text" toggle button in TinyMCE by default?

My application is written using Ext.js and uses TinyMCE. The toolbars in the TinyMCE editors offers text alignment options: align left, center, right and justify. I would like the "justify" option to be selected by default when the screen containing the editor is loaded. I looked in the docs of TinyMCE and Ext.js to no avail.
Here my configuration code for TinyMCE:
Ext.define('Xxx.config.TinyMceConfig',{
singleton : true,
alternateClassName : ['TinyMceConfig'],
config:{
plugins: [
"lists link charmap searchreplace code fullscreen table paste ice"
],
language : "fr_FR",
docs_language : "fr_FR",
visual : true,
cleanup_on_startup : false,
cleanup : true,
gecko_spellcheck : true,
remove_linebreaks : false,
encoding : "xml",
entity_encoding : "raw",
toolbar1 : "fullscreen | undo redo selectall | bold italic underline alignleft aligncenter alignright alignjustify | pastetext pasteword pasteEditor",
toolbar2 : "searchreplace | subscript superscript charmap | unlink removeformat | visualaid table | cleanup code ice_smartquotes",
toolbar3 : "bullist numlist row_props cell_props | row_before row_after delete_row | col_before col_after delete_col | ice_togglechanges ice_toggleshowchanges iceacceptall icerejectall iceaccept icereject",
inline_styles : false,
paste_as_text :true,
paste_auto_cleanup_on_paste: true,
paste_text_use_dialog: true,
paste_retain_style_properties: "margin, border, border-width, border-style, bgcolor, background, border-color, ul, li, ol, page-break-before, " +
" page-break-after, border-collapse, padding, width, height, font-size, font-weight, font-family, text-align, text-decoration, float, " +
"display, line-height, align",
paste_convert_headers_to_strong : true,
paste_convert_word_fake_lists: false,
ice: {
isForceTracking: false,
isTracking: false,
user: { name: 'Utilisateur inconnu', id: 1}
},
menubar:false,
statusbar: false,
elementpath: false,
toolbar_items_size: 'small'
},
constructor: function(config) {
this.initConfig(config);
}
});

Try to use tinymce property forced_root_block_attrs, and forcing style in line text-align justify
config:{
...,
forced_root_block_attrs : { style: 'text-align: justify;' }
}
tinymce docs:
https://www.tiny.cloud/docs/configure/content-filtering/#forced_root_block_attrs

how to make tinymce input read only

I want to make tinymce input to read only. i have tried with the below code. Please help me with this issue.
tinymce.init({
selector: '#deliberations',
menubar: false,
readonly: true,
branding: false,
height: 100,
max_height: 400,
theme: 'modern',
toolbar: false,
toolbar_items_size: 'small',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'insert | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons | fullscreen | table',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: [
]
});

If you are using version 4.x, remove the readonly: true option and try
setup: function (editor) {
editor.setMode("readonly")
},
http://fiddle.tinymce.com/Lugaab/2

As stated in the TinyMCE docs https://www.tinymce.com/docs-3x/reference/configuration/Configuration3x#readonly/ the readonly attribute should be set to '1' not to 'true'.
tinymce.init({
selector: '#deliberations',
menubar: false,
readonly: 1,
branding: false,
height: 100,
max_height: 400,
theme: 'modern',
toolbar: false,
toolbar_items_size: 'small',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'insert | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons | fullscreen | table',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: [
]
});

TinyMCE print plugin

I'm trying to add print plugin to my TinyMCE widget, but it doesn't work :
var option_tinymce = {
script_url : '/ui/js/tinymce/tinymce.min.js',
plugins: "code autosave insertdatetime textcolor print",
toolbar1: "print code | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | undo redo | removeformat | forecolor backcolor | formatselect | restoredraft",
menubar: false,
toolbar_items_size: 'small',
language: 'fr_FR',
setup: function(editor) {
editor.on('change', function(e) {
$(editor.formElement).find('[name="modification_form"]').val("Yes");
});
},
skin: 'pvx_light',
content_css: "/ui/css/style.css, /ui/css/style_tiny.css",
schema: "html5",
autosave_restore_when_empty: false,
resize : 'both'
}

TinyMCE v4.3.6 - Shortcuts

I'm using TinyMCE v4.3.6. Because of the default shortcut "alt gr + f" I can't write character "[" in my editor. How can I disable shortcut "alt gr + f"?
Please, check out my initialization code and comments below:
tinymce.init({
selector: 'textarea.my-textarea-content',
theme: 'modern',
schema: 'html5-strict',
menubar: false,
// editor size
width : 770,
height : 500,
min_height : 500,
autoresize_min_height: 500,
convert_urls: false,
relative_urls: true,
inline: false,
setup: function(ed) {
ed.on('init', function(event) {
var hidTinyData = $('.my-tinymce-data');
// fullscreen custom shortcut
ed.addShortcut('CTRL+SHIFT+F9', 'Fullscreen', 'mceFullScreen', this);
// trying to override default behaviour for "alt gr + f"
// but it is not working as expected
ed.addShortcut('ctrl+alt+f', '', '', function () {});
ed.addShortcut('meta+alt+f', '', '', function () {});
ed.remove('meta+f');
ed.setContent(hidTinyData.val());
ed.execCommand('mceRepaint');
});
},
plugins: ['advlist autolink lists link charmap hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code contextmenu
fullscreen ', 'nonbreaking table textcolor paste autoresize'],
contextmenu: 'inserttable tableprops deletetable cell row column | hr',
toolbar1: 'newdocument | searchreplace | fontselect fontsizeselect
formatselect table | bullist numlist | outdent indent removeformat | fullscreen ',
toolbar2: 'undo redo | bold italic underline strikethrough subscript
superscript | forecolor backcolor | alignleft aligncenter alignright
alignjustify | blockquote hr | visualchars visualblocks | code'
});

Found the workaround on the following link:
https://stackoverflow.com/a/19836730/2614103
My updated code:
tinymce.init({
selector: 'textarea.my-textarea-content',
theme: 'modern',
schema: 'html5-strict',
menubar: false,
// editor size
width : 770,
height : 500,
min_height : 500,
autoresize_min_height: 500,
convert_urls: false,
relative_urls: true,
inline: false,
setup: function(ed) {
ed.on('init', function(event) {
// add custom shortcut for fullscreen
ed.addShortcut('CTRL+SHIFT+F9', 'Fullscreen', 'mceFullScreen', this);
// content
ed.setContent($('.my-tinymce-data').val());
// repaint editor
ed.execCommand('mceRepaint');
});
ed.on('keyup', function(e) {
overrideKeyboardEvent(e, ed);
});
ed.on('keydown', function( e) {
overrideKeyboardEvent(e, ed);
});
},
plugins: ['advlist autolink lists link charmap hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code contextmenu
fullscreen ', 'nonbreaking table textcolor paste autoresize'],
contextmenu: 'inserttable tableprops deletetable cell row column | hr',
toolbar1: 'newdocument | searchreplace | fontselect fontsizeselect
formatselect table | bullist numlist | outdent indent removeformat | fullscreen ',
toolbar2: 'undo redo | bold italic underline strikethrough subscript
superscript | forecolor backcolor | alignleft aligncenter alignright
alignjustify | blockquote hr | visualchars visualblocks | code'
});
overrideKeyboardEvent: function(e, ed) {
switch (e.type) {
case 'keydown':
if (e.keyCode == 9 && !e.altKey && !e.ctrlKey) {
// toggle between Indent and Outdent
// command, depending on if SHIFT is pressed
if (e.shiftKey) {
ed.execCommand('Outdent');
} else {
ed.execCommand('Indent');
}
// cancel default action for keys Tab and Shift+Tab
if (e.preventDefault) {
e.preventDefault();
}
return tinymce.dom.Event.cancel(e);
} else if (e.keyCode == 27 && !e.altKey && !e.ctrlKey) {
// check if fullscreen is on
if ($('.mce-fullscreen').length) {
ed.execCommand('mceFullScreen');
}
} else if (e.keyCode == 70 && e.altKey && e.ctrlKey) {
e.stopPropagation();
e.preventDefault();
// insert character '['
ed.insertContent('[');
return false;
}
break;
}
return true;
}
$(document).ready(function($) {
document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
});