TinyMCE not grabbing content from textarea before hiding that textarea - tinymce

I have an instance of TinyMCE running on a page that enables me to edit existing posts. I query the db, and populate the variable $content with the stored text. I then have the following HTML:
<label for="content">Content:</label>
<textarea name="content" class="post-content" rows="<?php echo $settings_rows; ?>" ><?php echo $content; ?></textarea>
TinyMCE is displaying as an editor, no problem, but is not displaying the text stored in $content. There are no outlying <p> tags, and the $content variable is being populated (I echo'd it outside of the textarea to be sure, and Firebug shows the hidden textarea also being populated).
The editor init is as follows:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "advimage",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,image,hr,removeformat,visualaid,charmap,code",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true,
editor_selector : "post-content"
});
Can anyone advise me why this isn't working? I've used it on other pages, using this exact system, without a hitch.
EDIT
As a P.S. the relevant CSS is as follows:
.post-content {
padding: 3px 10px;
width: 90%;
}

Try the following. Give your textarea the id "editor1", use mode: "exact", instead of mode: "textareas",
and initialize your editor the following way (keep the tinymce init where it is for now, but before the following lines)
$(document).ready(function() {
tinyMCE.execCommand('mceAddControl', false, 'editor1');
}

In case someone uses HTML5 and is experiencing TinyMCE behaving similar or as described in the title: Try disabling autocomplete.
<textarea autocomplete="off">Hello, World!</textarea>
If you change/clear the textarea content on the page, your browser will copy those changes every time you reload the page (with autocomplete enabled).
This can make it look as if TinyMCE isn't processing the textarea content.

Related

What does VS Code's setting html.format.unformatted do?

I'm trying to figure out what the VS Code html.format.unformatted setting does, but I can't.
I've found this issue and this issue in GitHub, but it explains nothing.
Can someone please explain to me what the html.format.unformatted setting does and how it differs from the html.format.contentUnformatted setting?
After much trial and error i found out this:
TLDR:
html.format.unformatted: does not format the tag itself nor the content
html.format.contentUnformatted: will format the tag but not the content
source (not very clear, imho): https://code.visualstudio.com/Docs/languages/html
Sample html code (not valid, i know, but irrelevant here):
<body>
<style class="foo" class="foo" class="foo" >
.foo {
background-image: 'bar.jpeg';
background-size: cover;
background-position-x: 50%;
background-position-y: 50%;
}
</style>
<div class="foo">
<div>
<div></div>
whatever
<div></div>
</div>
</div>
</body>
With this config:
{
"html.format.wrapAttributes": "force-expand-multiline",
//"html.format.contentUnformatted" : "style",
"html.format.unformatted": "style"
}
When we trigger an auto format on the sample html above, the STYLE TAG IS NOT formatted and the style tag content IS NOT changed.
With this config:
{
"html.format.wrapAttributes": "force-expand-multiline",
"html.format.contentUnformatted" : "style",
//"html.format.unformatted": "style"
}
When we trigger an auto format on the sample html above, the STYLE TAG IS formatted (spaces, ident, etc), the style tag content IS NOT changed.

disable refreshing iframe while sorting

I have list of textareas. For textareas I use tinyMCE Editor. When I start sorting this list of textareas, inside these textareas everything disappears. I mean the iframes do not refresh their content.
<ul id="sortable">
<li class="ui-state-default"><br />
<textarea id="1"></textarea>
</li>
<li class="ui-state-default"><br />
<textarea name="2" id="2"></textarea>
</li></ul>
my.js file
tinyMCE.init({
mode : 'textareas',
theme : 'advanced',
theme_advanced_buttons1 : 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left',
theme_advanced_statusbar_location : 'bottom',
theme_advanced_resizing : false
});
$( "#sortable" ).sortable({
});
TinyMCE works perfect till I drag the <li> where this textarea is placed. Code inside <iframe> disappeared.
Can I somehow prevent refreshing the iframe content?
Problem here is that you cannot move the editor in the dom easily.
The solution is to first shut down the tinymce instance (id needed!)
tinymce.execCommand('mceRemoveControl',true,'editor_id');
then do the DOM action and reinit the tinymce instance
tinymce.execCommand('mceAddControl',true,'editor_id');

Fancy box closes when box is clicked wordpress comments

I am hardly trying to fix it but couldn't. I have the code added to comments.php file so that if I select Leave a comment fancy box will open a popup window to post comments, it pops up but when I select the pop window it simply closes. My code is below. Please help
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<div class="comment-buttons"><a href="#inline1" class="various" title="Leave a Comment">
Leave a Comment</a></div>
<div id="inline1" style="display: none;width:600px;height:410px;"><?php comment_form(); ?></div>
I solved it myself,
I added
hideOnContentClick : false,
and that fixed then issue.

jquery-ui sortable on divs with TinyMCE editors causes text to disappear

following the instructions at:
http://www.farinspace.com/multiple-wordpress-wysiwyg-visual-editors/
i've got some nice WYSIWYG editors in my metaboxes
my markup looks like:
<div class="sortable">
<div class="sortme">
<?php $mb->the_field('extra_content2'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
<div class="sortme"
<?php $mb->the_field('extra_content3'); ?>
<div class="customEditor"><textarea name="<?php $mb->the_name(); ?>"><?php echo wp_richedit_pre($mb->get_the_value()); ?></textarea></div>
</div>
</div>
which is just WP_alchemy (also from farinspace.com) for a textarea wrapped in a div
and the script that tells tinymce to kick in:
function my_admin_print_footer_scripts()
{
?><script type="text/javascript">/* <![CDATA[ */
jQuery(function($)
{
var i=1;
$('.customEditor textarea').each(function(e)
{
var id = $(this).attr('id');
if (!id)
{
id = 'customEditor-' + i++;
$(this).attr('id',id);
}
tinyMCE.execCommand('mceAddControl', false, id);
});
});
/* ]]> */</script><?php
}
// important: note the priority of 99, the js needs to be placed after tinymce loads
add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
that part works fine. but when i try to kick in jqueryUI sortable:
$('.sortable').sortable();
it lets me sort the multiple .sortme divs, but the content in the editors disappears. how can i make the text persist? it works just fine w/o the tinymce editors, so I presume it is a conflict w/ that somehow.
This ( $('.sortable').sortable(); ) won't work with tinymce editors. Tinymce does not like being dragged around the dom. In order to make it work you first need to shut down Tinymce
tinyMCE.execCommand('mceRemoveControl', false, id);
then sort and then reinitialize them
tinyMCE.execCommand('mceAddControl', false, id);

TinyMCE inserts a <script> tag pointing to themes/advanced/langs/en.js inside my text

There is a previous question to this issue but it has no posted solution. This is for a backend I didn't programmed but I'm mantaining right now and there's this issue. TinyMCE is initialized this way:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "style,paste",
theme_advanced_buttons3_add : "pasteword",
paste_auto_cleanup_on_paste: true,
paste_remove_spans: true
});
And now we found an error for one of our sites with a JS error in IE: 'tinyMCE is undefined' on line 1 of file "themes/advanced/langs/en.js". This is the code we found in one of the texts edited with TinyMCE:
<p style="text-align: left;">
<script src="../../../../js/kicms/tiny_mce/themes/advanced/langs/en.js" type="text/javascript"></script>
Como resultado de las actividades del sector en el mes de Julio de 2010, se registró una variación en los precios relevados en el canal SPM de
(...)
(The rest of the text is normal/OK.)
Why is that tag in there? Any clue about this?
Thanks a lot!
It appears there is a problem for IE when using certain types of compressed JavaScripts.
I suspect that js/kicms/tiny_mce/themes/advanced/langs/en.js is a compressed file (open in a text editor to see if it is jumbled). Try using an uncompressed version (human readable).
Your call to TinyMCE should look something like this:
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>
Plus, you may want to try downloading the latest version of TinyMCE code and try it with the uncompressed files:
http://tinymce.moxiecode.com/download.php
EDIT:
Sorry, I misunderstood. Just remove the script tag and your error should go away. I suspect a developer was in a hurry and forgot to remove the tag.