We Keep Coding

how to get escape hot key to work in tiny

So i am using hotkeys to fire off a function to save content that has been entered in the RTE. that works fine but i am also trying to use the "Esc" hotkey to cancel editing. the "Esc" hotkey does not seem to work. here is my code
<Editor
value={co.description}
onEditorChange={(content) => {
this.handleEditorInputChange(content, 'description');
}}
init={{
height: 300,
menubar: false,
plugins: ['lists'],
toolbar: 'bullist numlist | bold italic underline',
browser_spellcheck: true,
setup: (editor) => {
editor.addShortcut(
editor.shortcuts.add(
'ctrl+s',
'',
function () {
this.saveCo(this.context.co);
},
this,
),
editor.shortcuts.add(
'Esc',
'',
function () {
this.cancelEdit();
},
this,
),
);
},
}}
/>
any ideas?

How can I send tinyMCE textarea editor content to inside controller using Symfony3 and Ajax

I have two tinyMCE editor with id's like #homepage, #thankyoupage, I want to send tinymce textarea content to inside symfony controller.
This is my front end part:
I am trying to send normal textarea value using jQuery ajax like below but I am getting undefined value.
$(document).ready(function () {
var array_data = {};
array_data['dedline'] = $('#homepage').val();
array_data['homepage'] = $('#thankyoupage').val();
array_data['thankyoupage'] = $('#deadlinetoanswer').val();
$.ajax({
type: 'POST',
url: Routing.generate("invitation"),
contentType: 'application/x-www-form-urlencoded',
data: {
data_array: array_data
},
success: function (result, status, xhr) {
var res = JSON.parse(result);
console.log(res);
},
error: function (xhr, status, error) {
console.log('error1');
}
});
});
This is my form:
$builder->add('deadlinetoanswer', ChoiceType::class, array(
'choices' => array(
'2 days' => 2,
'3 days' => 3,
'5 days' => 5,
'7 days' => 7,
'10 days' => 10,
'15 days' => 15,
'Until' => 'until'
)
));
$builder->add('prerecwelcomemsg', TextareaType::class, array(
'required' => true,
'attr' => array('class' => 'tinymce', 'id' => 'homepage', 'data-theme' => 'bbcode', 'style' => 'height: 380px', 'placeholder' => "Welcome...")
));
$builder->add('prerecthankyoumsg', TextareaType::class, array(
'required' => true,
'attr' => array('class' => 'tinymce', 'id' => 'thankyoupage', 'data-theme' => 'bbcode', 'style' => 'height: 380px', 'placeholder' => "Thank you...")
));
This is my controller:
/**
* #Route("/prerecorded/invitation", name="invitation", options={"expose"=true})
*/
public
function invitationAction(Request $request) {
$em = $this - > getDoctrine() - > getManager();
$form = $this - > createForm(InvitationType::class);
$form - > handleRequest($request);
if ($request - > isXmlHttpRequest()) {
$res_arr = $request - > request - > get('data_array');
// $this->container->get('logger')->addInfo('somesh'.$res_arr);
if ($res_arr) {
$campaignid = 1;
$campaign = $em - > getRepository('TraceBundle:Campaign') - > findOneBy(array('id' => $campaignid));
$campaign - > setDeadlinetoanswer('');
$campaign - > setPrerecwelcomemsg('hello');
$campaign - > setPrerecthankyoumsg('how r u');
$em - > persist($campaign);
$em - > flush();
return new Response(json_encode($campaignid));
}
}
return $this - > render('TraceBundle:Campaign:invitation.html.twig', array(
'form' => $form - > createView(),
));
}
and my config.yml
stfalcon_tinymce:
include_jquery: true
tinymce_jquery: true
selector: ".tinymce"
# base_url: "http://yourdomain.com/" # this parameter may be included if you need to override the assets_base_urls for your template engine (to override a CDN base url)
# Get current language from the parameters.ini
language: %locale%
# Custom buttons
tinymce_buttons:
stfalcon: # Id of the first button
title: "Stfalcon"
image: "http://stfalcon.com/favicon.ico"
theme:
# Simple theme: same as default theme
simple: ~
# Advanced theme with almost all enabled plugins
advanced:
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"
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
toolbar2: "print preview media | forecolor backcolor emoticons | stfalcon | example"
image_advtab: true
templates:
- {title: 'Test template 1', content: 'Test 1'}
- {title: 'Test template 2', content: 'Test 2'}
# BBCode tag compatible theme (see http://www.bbcode.org/reference.php)
bbcode:
plugins: ["bbcode, code, link, preview"]
menubar: false
toolbar1: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist "
This is first time I am working tinyMCE editor, really I am not sure where I am doing wrong. Please help me anyone and let me know is there any extra information is needed.
Thanks in advance

1. Setting a custom id attribute in the form builder won't work.
There are two ways to fix that:
Don't change the default id
In your script, use the default id attributes, generated by Symfony. For simple properties it's the name of the form and the name of the field separated by an underscore, so you can target your fields this way (selector 'id ends with'):
array_data['homepage'] = $('[id$="_prerecwelcomemsg"]');
array_data['thankyoupage'] = $('[id$="_prerecthankyoumsg"]').val();
array_data['deadlinetoanswer'] = $('[id$="_deadlinetoanswer"]').val();
(*) check the id attributes generated in the rendered html page to be sure.
(**) notice that you swapped the fields in your script, setting array_data['dedline'] to $('#homepage').val().
If you really need to change the id attributes:
You can do it in the template when you render the fields with:
{{ form_row(form.prerecwelcomemsg, { 'id': 'homepage' }) }}
2. You have to use TinyMCE's methods to get the edited content.
For this, either:
Call tinyMCE.triggerSave(); before getting the fields value the way you do.
Or get the content with tinyMCE.get('fieldFullId').getContent();

TinyMce allow HTML Tags

i got a problem using html tags in TinyMce.
I've tried different things to get these done.
The TinyMce Docu say's
Use [] to include all elements and all attributes.
But it didn't work.
Here is the code:
tinymce.init({
selector: ".mytextarea",
theme: "modern",
language: "de",
plugins : 'advlist autolink link images lists charmap print preview jbimages',
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
relative_urls: true,
valid_elements: '+*[*]',
});
I want some bootstrap elements in it (like and so on)
Thanks a lot my friends =)

Due to the fact that tinymce uses its own iframe with own head, html and body html element - you may not use those elements in your content.
Update: Here is my tinymce base config
plugins: 'paste,searchreplace,style', // and some more ....
dialog_type : "modal",
// Override inline_styles setting to force TinyMCE to produce deprecated contents
inline_styles: false,
// Theme options
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
relative_urls: false,
gecko_spellcheck: true,
button_tile_map: true,
// disable drag und drop
disable_drag: true,
indentation: "0px",
// No resize handle an the editor itself
resize: false,
//turn on/off the inline resizing controls of tables and images in Firefox/Mozilla
object_resizing: false,
paste_strip_class_attributes : "none",
paste_remove_styles: true,
paste_convert_middot_lists: false,
// Default ab 3.0.1
forced_root_block: 'p',
// All characters will be stored in non-entity form except these XML default entities: & < > "
entity_encoding: "raw",
// This option controls if invalid contents should be corrected before insertion in IE. This option is disabled by default since it might be a bit slow.
fix_nesting: true,
// This option should contain a comma separated list of element names to exclude from the content. Elements in this list will be removed when TinyMCE executes a cleanup.
invalid_elements: "strong,em,div",
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style],"
+ "a[name|href|target|title|alt],"
+ "#p,-ol,-ul,-li,br,img[src|unselectable],-sub,-sup,-b,-i,-u,"
+ "-span[data-mce-type],hr",
valid_child_elements : "body[p,ol,ul]"
+ ",p[a|span|b|i|u|sup|sub|img|hr|#text]"
+ ",span[a|b|i|u|sup|sub|img|#text]"
+ ",a[span|b|i|u|sup|sub|img|#text]"
+ ",b[span|a|i|u|sup|sub|img|#text]"
+ ",i[span|a|b|u|sup|sub|img|#text]"
+ ",sup[span|a|i|b|u|sub|img|#text]"
+ ",sub[span|a|i|b|u|sup|img|#text]"
+ ",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]"
+ ",ol[li]"
+ ",ul[li]",
formats: {
bold : {inline : 'b' },
italic : {inline : 'i' },
underline: { inline: 'u' }
},

TinyMCE 4 - getContent() not receiving value from dialog input field

For the software I am currently working on I am doing a small little CMS for our internal help documents, but I have been trying to use TinyMCE so that they can easily apply styles that fit our look and feel without needing to understand HTML. I have all of the custom buttons I need working, however I am having trouble with the final custom button.
What we need is a button that will automatically take a word they type as a query string parameter (FindWord?Word=[the input field]) which when clicked on the page later, would pop out a hidden div and anchor to the glossary word. However the getContent() function does not seem to be working for me, and after over 12+ hours of searching, and trying numerous examples, I can't seem to get it to work.
Other details i am not sure are important:
-Using MVC 4 with Razor views, TinyMCE 4 with the TinyMCE.Jquery package.
-This is the input field in question: http://i.imgur.com/wrMoTOP.png
Any help would be great! Thanks!
<script type="text/javascript">
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "mceEditor",
theme: "modern",
plugins: "pagebreak,textcolor,layer,table,save,hr,image,link,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,visualchars,nonbreaking,template,wordcount,code,customcss_1,customcss_2",
menubar: "edit format view table tools",
toolbar: "undo redo print glossaryword | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | outdent alignleft aligncenter alignright alignjustify indent | bullist numlist hr |",
contextmenu: "undo redo | cut copy paste | link | customcss_1 customcss_2 glossaryword |",
height: 500,
setup: function (ed) {
ed.addButton('glossaryword', {
title: 'Query String Parameter',
onclick: function () {
ed.windowManager.open({
title: 'Query String Parameter',
body: [
{ type: 'textbox', name: 'source', label: 'Source' }
],
onsubmit: function (e) {
ed.focus();
ed.selection.setContent('' + ed.selection.getContent() + '');
}
});
}
});
}
});

After messing around awhile longer I realized I was being silly.
setup: function (ed) {
ed.addButton('glossaryword', {
title: 'Query String Parameter',
onclick: function () {
ed.windowManager.open({
title: 'Query String Parameter',
body: [
{ type: 'textbox', name: 'word', label: 'Glossary Word', id: 'popupword' }
],
onsubmit: function (e) {
ed.focus();
ed.selection.setContent('' + e.data.word + '');
}
});
}
});
}

TinyMCE Save button in the File menu

I am using TinyMCE and I am using an inline editor if that matters. This is my code...
<script type="text/javascript">
tinymce.init({
selector: "div.prut8Eje",
inline: true,
plugins: [
"advlist autolink lists link image charmap print preview anchor save",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
menu : { // this is the complete default configuration
file : {title : 'File' , items : 'save newdocument | print'},
edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'},
insert : {title : 'Insert', items : 'link media | template hr'},
view : {title : 'View' , items : 'visualaid'},
format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
tools : {title : 'Tools' , items : 'spellchecker code'}
},
toolbar: "save | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
Well, the save button works fine in the toolbar, but doesn't show up in the File Menu. I tried to post pictures, but I need 10 reputation.
Edit: You can see the pictures at
http://gyazo.com/3d08cd176cd7b3cb4c6d6d395884e466
http://gyazo.com/daed4520adb902cb87336d943d6a30f7
Thanks in advance,
Ben

This is an old question, but I found a very easy way to add a Save button to the file menu. Using the setup event in tinymce, you can add a menu item:
tinymce.init({
.....
setup: function(editor) {
editor.addMenuItem('save', {
icon: 'save',
text: 'Save',
cmd: 'mceSave',
context: 'file',
disabled: true,
onPostRender: function () {
var self = this;
editor.on('nodeChange', function() {
self.disabled(editor.getParam("save_enablewhendirty", true) && !editor.isDirty());
});
}
});|
}
});
This utilizes all the regular save funtions and the onPostRender function just enables or disables the button (using code I found in the save plugin.js file)

According to their own documentation, the "save" plugin is only for the toolbar and not for the menu: http://www.tinymce.com/wiki.php/Controls
It looks like you'd have to create your own menu item manually; something like this could work:
tinymce.PluginManager.add('menusave', function(editor, url) {
editor.addMenuItem('menusave', {
text: 'Save',
context: 'file',
onclick: function() {
$('.mce-i-save').closest('button').trigger('click');
}
});
});
For that to work though, you'd have to have the save button in the toolbar as well, but there are probably better ways to do it than by triggering a click on the button in the toolbar.
Then don't forget to add "menusave" (or whatever you choose to name it) to the list of plugins, and to add it to wherever you want it to be in the menu:
file : {title : 'File' , items : 'menusave newdocument | print'},
By the way, to come up with the code above I played with this "TinyMCE Fiddle": http://fiddle.tinymce.com/ngdaab/0