How do I implement tinymce.Shortcuts in TinyMCE v4 - tinymce

I want to add keyboard shortcuts to my TinyMCE editor.
Here is my init code:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print'
],
toolbar: 'print | styleselect | bullist numlist',
});
I know that I need something along the lines of:
editor.shortcuts.add('ctrl+a', function() {});
But I don't understand how to connect the shortcuts code with my init code.
TinyMCE documentation here, but I was having trouble understanding it.

Here is how to do it:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
// add your shortcuts here
setup: function(editor) {
editor.shortcuts.add('ctrl+a', function() {});
}
});
Use the setup init parameter!

This is an expansion of the answer #Thariama provided. Code that worked for me was:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
setup: function(editor) {
editor.shortcuts.add('ctrl+a', desc, function() { //desc can be any string, it is just for you to describe your code.
// your code here
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print'
],
toolbar: 'print | styleselect | bullist numlist',
});
Alternatively you can also use the following, which will allow you to override key commands reserved by TinyMCE:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
setup: function(e) {
e.on("keyup", function(e) {
if ( e.keyCode === 27 ) { // keyCode 27 is for the ESC key, just an example, use any key code you like
// your code here
}
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print',
],
toolbar: 'print | styleselect | bullist numlist',
});

As a complement to the two previous answers, here is a full example:
tinymce.init({
//here you can have selector, menubar...
setup: function (editor) {
setLocale(editor);
// For the keycode (eg. 13 = enter) use: cf http://keycode.info
editor.shortcuts.add('ctrl+13', 'indent', function(){
tinymce.activeEditor.execCommand('indent');
});
editor.shortcuts.add('ctrl+f', 'subscript ', function(){
tinymce.activeEditor.execCommand('subscript');
});
},
});

Related

How to reset tinymce content to default on a button click

I am trying to reset the content inside tinymce editor to default on a button click.
Here is my current tinymce initialization code and I also have initialized to set default content when the editor loads up. On button click I want to run setDefaultContent() function, which is used in tinymce.init
tinymce.init({
// General options
selector: "textarea",
editor_selector : "mceEditor",
branding: false,
**init_instance_callback: "setDefaultContent",**
height : "300px",
width : "1000",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
formats: {
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myleft'},
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'mycenter'},
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myright'},
alignfull: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myfull'}
},
content_style: '.myleft { text-align:left; } .mycenter { text-align:center; } .myright { text-align:right; } .myfull { text-align:justify; }',
forced_root_block: false
});
If you just want to clear the content use:
tinyMCE.activeEditor.setContent('');

Inserting custom element, attribute gets stripped

I made a tinymce fiddle about this problem: http://fiddle.tinymce.com/O0gaab
I add a custom element "custom-block" and a custom plugin to insert that element.
tinymce.PluginManager.add('custom', function(editor, url) {
editor.addButton('custom', {
text: 'CUSTOM',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Custom plugin',
body: [
{type: 'textbox', name: 'src', label: 'SRC'},
{type: 'label', name: 'title', text: 'Insert content bellow:'},
{type: 'textbox', name: 'content', multiline: true, style: 'width:500px;height:100px;'}
],
onsubmit: function(e) {
console.log(e.data);
editor.insertContent('<custom-block src="' + e.data.src + '">' + e.data.content + '</custom-block>');
}
});
}
});
});
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste custom"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | custom",
//valid_elements: "+*[*]", //when using this option trying to allow everything get an error "Cannot read property 'src' of undefined"
extend_valid_elements: "custom-block[src]",
custom_elements: "custom-block"
});
The element, get inserted correctly but without the src attribute.
From the documentation I though that extend_valid_elements: "custom-block[src]" would allow src attribute on a custom-block but it gets stripped everytime.
I also tried to set valid_elements to everything(+*[*]) just in case, but then gets worse because at inserting, I get an error: "Cannot read property 'src' of undefined".
I am making any mistake or what is the problem?
The name of the configuration option is extended_valid_elements so you simply named it wrong in your configuration. It should be:
extended_valid_elements: "custom-block[src]"
I have updated your fiddle (http://fiddle.tinymce.com/O0gaab/1) and things appear to work.

TinyMCE "paste button" does not work

My question about TinyMCE editor.
In IE brower it works fine. But when I paste something in FF & Chrome I'm receiving the message: "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead."
I've not found any documentation to solve this problem!
I need help ,Thanks!
I'm a little late to this, but I was having the same problem. I did some digging, and this configuration worked for me.
tinyMCE.init({
selector: "textarea",
language: editorLanguage,
plugins: [
"autolink lists link image anchor",
"searchreplace visualblocks",
"insertdatetime media contextmenu paste"
],
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall' },
insert: { title: 'Insert', items: 'link image' },
view: { title: 'View', items: 'visualaid' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' }
},
convert_urls: false,
paste_data_images: true
});
At a minimum though, all you need is this:
tinyMCE.init({
selector: "textarea",
plugins: "image,paste",
paste_data_images: true
});
This is working for me, using the cdn hosted version ( cdn.tinymce.com/4/tinymce.min.js )
Hope this helps someone!

remove the extra p tag in tinyMCE

When you copy and paste from a word document in to the tinyMCE editor sometimes there are unwanted <p> tags:
<p> </p>
<div class="starpasspro-example-question">
<p><strong>Example: Levels of strategy</strong></p>
<p>Microsoft is one of the world’s largest organisations, providing corporate solutions to businesses throughout the world to help them realise their fullest potential. At Microsoft, there are three levels of strategy as follows:</p>
</div>
<p> </p>
Here the code that generates I want to remove the <p> tags any way to do that ?
Add these Lines in your tinymce.init({ });
Example:
tinymce.init({
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false,
});
it will be helpful.
Add into your tinymce.yml file
forced_root_block : ""
force_br_newlines : true
force_p_newlines : false
Yes, this is possible. There is a secure way to remove all that html elements you want to removed (you may define what to keep). It is by using the tinymce config params paste_preprocess and a custom function strip_tags. Check it out here.
Add this to your functions.php file and the standard p-tags
tags will be removed by adding some parameters to the tiny_mce_before_init hook. If you want to see how it works, you can read further on this page: https://codex.wordpress.org/TinyMCE
////////////////////////////////////////////////////////////////////////
//////////REMOVE STANDARD <P> FROM TINYMCE EDITOR/////////////////////////
///////////////////////////////////////////////////////////////////////
function my_format_TinyMCE( $in ) {
$in['forced_root_block'] = "";
$in['force_br_newlines'] = TRUE;
$in['force_p_newlines'] = FALSE;
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
USE HtmlEncode="false" in BoundField
<asp:BoundField DataField="PostContent" HtmlEncode="false" />
Thanks to Prahalad Gaggar!
I had the same problem and I solved it by reading this topic: https://stackoverflow.com/a/22397116/14491024
here is my code with each time adding <p<br/<br/</p so annoying)
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
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'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}
And here is with problem SOLVED:
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
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'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
//remove <p><br /><br /></p>
forced_root_block: "" ,
force_br_newlines: true,
force_p_newlines: false,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}

Paste table html tag to tinymce textbox

Below is my current Tinymce configuration which will remove all the style/formatting/html tags and paste as a plain text,
but my customer want to paste the table into it. So I would like improve my tinymce to be able to paste the table (only) when we copy and paste from ms word.
tinyMCE.init({
theme: "advanced",
mode: "exact",
elements: "txtTextbox1",
plugins : "paste,table,directionality,preview,iespell,wordcount,style",
theme_advanced_buttons1: "bold,italic,underline,|,cut,copy,paste,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,undo,redo,|,preview,iespell",
theme_advanced_buttons2: "tablecontrols,|,link,unlink",
//theme_advanced_buttons3: "tablecontrols,|,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
force_p_newlines: false,
force_br_newlines: true,
forced_root_block: '',
paste_convert_middot_lists: false,
paste_text_sticky: true,
paste_strip_class_attributes: "all",
paste_remove_styles: true,
paste_remove_spans: true,
paste_block_drop: true,
paste_text_sticky_default: true,
setup: function (ed) {
ed.onInit.add(function (ed) {
ed.pasteAsPlainText = true;
ed.controlManager.setActive("pastetext", true);
});
}
});
EDITED
below is my final code
tinyMCE.init
({
theme: "advanced",
mode: "exact",
elements: "txtTextbox1",
plugins : "paste,table,directionality,preview,iespell,wordcount,style",
theme_advanced_buttons1: "bold,italic,underline,|,cut,copy,paste,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,undo,redo,|,preview,iespell",
theme_advanced_buttons2: "tablecontrols,|,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
force_p_newlines: false,
force_br_newlines: true,
forced_root_block: '',
paste_convert_middot_lists: false,
paste_preprocess : function(pl, o)
{
o.content = strip_tags( o.content,'<table><tr><td>' );
},
});
function strip_tags (str, allowed_tags)
{
}
The solution is to use paste_preprocess. In this SO-thread you will find a way to paste as plain text, but to keep tables define table, tbody, td, tr to be not stripped out when pasted
I find a solution for copy - paste tinyMCE 4.0
if you using this basic example source
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste moxiemanager"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
remove " paste " option from plugins section;
like this;
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu moxiemanager"
],
Now you can paste (everything ms word , html page etc..) to tinyMCE editor
maybe ,might be help