I'm using TinyMCE in a form where I use ajax to submit the form. I've been struggling for the last 4 hours to figure out what is going wrong but I have reached a dead end.
I initialize TinyMCE with the following code:
tinymce.init({
selector: "textarea.editme",
plugins: ["advlist autolink autosave link image lists charmap print preview hr anchor
pagebreak spellchecker","searchreplace wordcount visualblocks visualchars code
fullscreen insertdatetime media nonbreaking","table contextmenu directionality
emoticons template textcolor paste fullpage textcolor imageplugin"],
toolbar1: "image_list undo redo | bold italic underline strikethrough | alignleft
aligncenter alignright alignjustify | fontselect fontsizeselect forecolor backcolor",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent
blockquote | preview | table",
menubar: false,});
I don't have problems loading it so the code should be all right but I copied it here just in case.
I have a textarea with the right class "editme" to display TinyMCE. This text area is embedded in a form ()
I submit the form with the following code:
$("#submitform").submit(function(e)
{
tinyMCE.triggerSave(true,true);
var postData=$(this).serializeArray();
var url = 'php/forms_post.php';
$.ajax(
{
url : url,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
// DISPLAY SUCCESS
},
error: function(jqXHR, textStatus, errorThrown)
{
// DISPLAY FAILURE
}
});
e.preventDefault();
e.unbind();
});
The code works fine, except for one thing. If I write "aaaaaa" in the textarea the first time, it gets submitted correctly and everything is fine. But if I then change it to "bbbbbb", the data that is submitted is still "aaaaaa". It looks like the triggersave keeps the data in memory and refuses any changes. I already restarted the browser, the server, cleaned cache, cleaned cookies,... but still the problem is there.
If I remove TinyMCE and keep a standard textarea, I have no problem.
Do you have any idea of what's going wrong?
Thanks a lot
Laurent
Related
I have a site, that when it loads, it initializes the tinyMCE, then, when you click a button, it opens a modal and while in that process, it brings some HTML into the modal.
then inside that modal, there is another button that should let you edit the content of the modal. and inside the DIV that holds the loaded HTML, there are divs with a class to make them editable by the tinyMCE.
the thing is, when you build the content of the modal and you save. everything is fine and it stores it with the format, because when you refresh the site, and load the content, everything is still with the correct format (bold,colors,etc). but then when you want to update the content, and you click the button to edit, I have an option to initialize again the tinyMCE and the contents editable zones loses their format.
now I suppose that the problem is when I initialize again the tinyMCE that causes the problem but how can I enable and disable the edition inside the modal when I click the button to make the edits?
I saw that there is an .on() and .off() functions, but I don´t understand well how to use them, is not clear enough in the documentation.
this is a sample of what I have.
<script>
var pathBotones = "<?=$pathBotones?>";
var modalEditor = {
mode: 'exact',
selector: '.zonaEditable',
menubar: false,
inline: true,
plugins: [
'link',
'autolink',
'lists',
'save'
],
toolbar: [
'undo redo | bold italic underline | fontselect fontsizeselect | link',
'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist'
],
valid_elements: 'strong,em,span[style],a[href]',
valid_styles: {
'*': 'font-size,font-family,color,text-decoration,text-align'
},
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
]
};
tinymce.init(modalEditor);
$(".edit-content").click(function(e) {
e.preventDefault();
//console.log($('.editOptions').css('display'))
if ($('.editOptions').css('display') === 'none') {
//this is supossed to enable the edition
tinymce.init(modalEditor);
} else {
console.log('NOOO se ve')
}
//this is supossed to disable the edition
$(".editOptions").slideToggle();
$(".deleteRowInfoBox").fadeToggle();;
});
</script>
You can use TinyMCE's APIs to set the mode on the editor to readonly.
https://www.tiny.cloud/docs/api/tinymce/tinymce.editormode/#set
The code would look something like:
tinymce.activeEditor.setMode('readonly');
...or...
tinymce.get('theEditor').setMode('readonly');
I'm using TYPO3 v7.6, and trying to overwrite some Page TSconfig with conditions and get it in FE.
What I did is,
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:'.$_EXTKEY.'/Configuration/PageTSconfig/pageTSConfig.txt">');`
in ext_localconf.php in my extension.
In the pageTSConfig.txt
RTE.tinymce {
menu = 0
menubar = 0
plugins = code link lists
statusbar = 0
toolbar {
0 = bold italic | alignleft aligncenter | bullist numlist | undo redo | formatselect | link unlink | code
}
}
[PIDinRootline = 26]
RTE.tinymce {
plugins = code link lists textcolor colorpicker
toolbar {
0 = bold italic | forecolor | alignleft aligncenter | bullist numlist | undo redo | formatselect | link unlink | code
}
}
[end]
The condition works in Page TSconfig in BE. However, $GLOBALS['TSFE']->pagesTSconfig() in FE only gets the default RTE.tinymce, not the overwritten one in page uid=26. Did I miss anything?
BTW, I tried moving the condition part into the Page TSConfig box in page uid=26, and I can get the TSconfig correct with $GLOBALS['TSFE']->pagesTSconfig() in my extension.
A possible way, but may not be a good way.
First, move the condition TSconfig into another file and loaded with
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:'.$_EXTKEY.'/Configuration/PageTSconfig/pageTSConfig2.txt" condition="[PIDinRootline = 26]">');`
See the feature at https://docs.typo3.org/typo3cms/extensions/core/Changelog/7.5/Feature-16525-AddConditionsToINCLUDE_TYPOSCRIPT.html
Then update \TYPO3\CMS\Core\TypoScript\Parser\TypoScriptParser->checkIncludeLines()
/** #var AbstractConditionMatcher $conditionMatcher */
$conditionMatcher = null;
if (TYPO3_REQUESTTYPE & TYPO3_REQUESTTYPE_FE) {
$conditionMatcher = GeneralUtility::makeInstance(FrontendConditionMatcher::class);
} else {
$conditionMatcher = GeneralUtility::makeInstance(BackendConditionMatcher::class);
}
// Make sure we can set the rootLine and pageId
if ($GLOBALS['TSFE']) {
$conditionMatcher->setRootLine($GLOBALS['TSFE']->rootLine);
}
So, [PIDinRootline = 26] would work as expected, and the TSconfig will be loaded accordingly.
The reason for if is, when $conditionMatcher is initialized, no rootLine is set, and ->match() will fail because [treeLevel], [PIDupinRootline] and [PIDinRootline] requires it to work.
I replaced ipTinyMceConfig() already. It's OK. In the plugin field editor to the richedit is displaying the menus and so on. However when I click in source code menu the source code editor open but disabled for edition. No typing is possible, nothing... Any Idea to solve it? My code replace is like this:
var originalMce = ipTinyMceConfig;
var ipTinyMceConfig = function(){
var customized = originalMce();
customized.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"
];
console.log('Entered tiny newsletter - New');
customized.toolbar1 = "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | link image";
customized.toolbar2 = "print preview media | forecolor backcolor emoticons | bullist numlist outdent indent";
customized.image_advtab = true;
customized.menubar = true;
customized.style_formats_merge = true;
return customized;
}
So thanks!
Haven't tried your code. Are you sure it is disabled? Maybe there is just some kind of CSS overlay that's stands in your way?
I have a page with three horizontal tabs. Clicking on a tab dynamically populates a div with a form. I am using BackboneJS to manage views' rendering (not sure if relevant). When I call render() on the view, after I populate the element's html, I make a call to apply tinyMCE to a text area:
$('#text_' + this.model.id, this.$el).tinymce({
script_url : '/lib/tinymce/tinymce.min.js',
theme : "modern",
content_css: "/css/bootstrap.min.css",
menubar: false,
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | link image | forecolor backcolor emoticons",
setup: function(editor) {
editor.on('change', function(e) {
var change = {};
change["content"] = e.level.content;
self.model.set(change);
});
}
});
This works perfectly fine on the first go. When view is removed, there is an event called that applies .tinymce().remove(); to the field to properly remove editor before displaying the next view. The next view renders - it's the same view but different model. On this, and all subsequent calls, tinyMCE hides the textarea, and doesn't show the editor. I know my views work - commenting out .tinymce() call in render() makes everything work as intended. TinyMCE stumbles somewhere. Any insight will be appreciated.
I'm not 100% clear on what .tinymce().remove(); is doing but have you tried this:
tinymce.triggerSave();
tinymce.execCommand('mceRemoveEditor', true, tinymce.activeEditor.id);
and when you switch to the next view try re-attaching the editor via:
tinymce.execCommand('mceAddEditor', false, selector);
If that doesn't work or doesn't apply to what you're doing. Have you considered having more than 1 tinyMCE editor? It sounds like you have a set number of tabs, so you could create a separate tinyMCE for each one and simply hide/show the editor on each as needed with:
tinymce.execCommand('mceToggleEditor', false, selector);
This method is considered much faster than adding/removing the editor.
I'm following the tutorial on http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php but need to add multiple custom buttons.
Here is my block for adding one button, but I need to add more than one button and don't know how
setup : function(fn) {
// Add a custom button
fn.addButton('firstname', {
title : 'Member First Name',
image : 'resources/scripts/tiny_mce/themes/advanced/img/firstname.gif',
onclick : function() {
// Add you own code to execute something on click
fn.focus();
fn.selection.setContent('{firstname}');
}
});
}
Thanks for your help
Just call fn.addButton multiple times:
setup : function(fn) {
// Add a custom button
fn.addButton('firstname', {
title : 'Member First Name',
image : 'resources/scripts/tiny_mce/themes/advanced/img/firstname.gif',
onclick : function() {
// Add you own code to execute something on click
fn.focus();
fn.selection.setContent('{firstname}');
}
});
fn.addButton('lastname', {
title : 'Member Last Name',
image : 'resources/scripts/tiny_mce/themes/advanced/img/lastname.gif',
onclick : function() {
// Add you own code to execute something on click
fn.focus();
fn.selection.setContent('{lastname}');
}
});
}
If you are defining the toolbar layout, eg
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | firstname",
remember to add the new id (eg. lastname)