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');
Related
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
1)I have a bunch of images split in two galleries in fancybox. I am using the code below to split my titles into separate lines. My HTML has a separate div with the titles, each in a div as well. It works, but it is adding titles to both galleries simultaneously, so image 1 gets the same name in both galleries.
How do I insert separate titles for my two galleries?
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
arrows : true,
helpers : {
title : { type : 'inside' },
buttons : {}
}, // helpers
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload
}); // fancybox
}); // ready
2)Also when the image shows up with the multi-line title, and I click "next", and then go back, the title disappears. How can I fix that?
Thanks!
Your code is pretty much a copy of what I posted here, however at the time such post was written, the fancybox version was 2.0.1. Some changes have been done since then (mostly improvements and bug fixes) so we would need to do some changes to your custom script as well as to your html structure. Also you may need to update to the latest version of fancybox (2.0.6 as today)
Assuming that you have grouped your galleries by setting a different rel attribute like:
<a class="fancybox" rel="gallery1" href="images/01a.jpg">image 1 - gallery 1</a>
<a class="fancybox" rel="gallery1" href="images/02a.jpg">image 2 - gallery 1</a>
<a class="fancybox" rel="gallery2" href="images/01b.jpg">image 1 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/02b.jpg">image 2 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/03b.jpg">image 3 - gallery 2</a>
1). group the titles of each gallery in different divisions too like this:
<div id="gallery1">
<div>title image 1 / gallery 1</div>
<div>title image 2 / gallery 1</div>
</div>
<div id="gallery2">
<div>title image 1 / gallery 2</div>
<div>title image 2 / gallery 2</div>
<div>title image 3 / gallery 2</div>
</div>
IMPORTANT: notice that I have assigned an ID to the parent container that is equal to the rel attribute of each gallery.
2). Now, for version 2.0.6, we can't use the afterLoad callback as we did it for v2.0.1 (this is what it makes the titles disappear).... we will use beforeShow instead.
So replace this part of the script:
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload
by this:
beforeShow : function() {
var gallery = $(this.element).attr("rel");
this.title = $("#"+gallery+" div").eq(this.index).html();
} // beforeShow
That should do the trick.
PS. I will add a note to the other post for v2.0.6
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.
I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/
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.