Generally you would want to make this button insert some sort of "tag", maybe something like [[PAGEBREAK]], when it is clicked. Then use this tag when parsing the contents to only display the text up to that tag using Substring().
You can try something like this:
String str = "This is the first part. [[PAGEBREAK]]this is the last part."
int index = str.IndexOf('[[PAGEBREAK]]');
if(index > 0) {
return str.Substring(0, index)
}
This should output: "This is the first part. "
Keep in mind you shoul remove this tag from your output when displaying the whole contents.
Replace("[[PAGEBREAK]]", "");
This is untested and just a thought but should get you started in the right direction.
Steffen01
0 Points
3 Posts
Read more... tag in TinyMCE
Nov 24, 2012 06:53 PM|LINK
Hi,
I'am using tinyMCE.
How can I build a "read more..." tag to use it with tinyMCE
to short text on my webpages?
Grüße aus Oberhausen!
Steffen
jprochazka
Contributor
4828 Points
736 Posts
Re: Read more... tag in TinyMCE
Nov 24, 2012 07:06 PM|LINK
You will want to start with learning about adding custom buttons to TinyMCE.
An example can be found here:
http://www.tinymce.com/tryit/custom_toolbar_button.php
Generally you would want to make this button insert some sort of "tag", maybe something like [[PAGEBREAK]], when it is clicked. Then use this tag when parsing the contents to only display the text up to that tag using Substring().
You can try something like this:
String str = "This is the first part. [[PAGEBREAK]]this is the last part." int index = str.IndexOf('[[PAGEBREAK]]'); if(index > 0) { return str.Substring(0, index) }This should output:
"This is the first part. "
Keep in mind you shoul remove this tag from your output when displaying the whole contents.
Replace("[[PAGEBREAK]]", "");This is untested and just a thought but should get you started in the right direction.
Good luck!
Steffen01
0 Points
3 Posts
Re: Read more... tag in TinyMCE
Nov 30, 2012 05:13 PM|LINK
Hallo jprochazka,
thank you! You gave me the right direction.
This is what I did and it works for me:
.more {
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent ;
}
a.hideLink {
background: transparent ;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
---------------------------------------------------
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = block';
}
else {
document.getElementById(shID +'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
-----------------------------------------------------------------------
tiniMCE.init({
.
.
theme_advanced_buttons3: "seemore, .....
.
.
});
setup: function (ed) {
ed.addButton(seemore, {
title :' see more',
image:'Images/weiterlesen.png',
onclick: function () {
var milli = (new Date).getTime();
ed.focus();
ed.selection.setContent( "<a href=" + '"#" ' + "id=" + '"' + milli + "-show" + '" ' + "class=" + '"showLink" '+ "onclick=" + '"showHide(' + "'" + milli + "'" + ");return false;" + '"' + ">mehr...</a>" + "<div id=" + '"' + milli + '" ' + "class=" + '"more">' + "<p>Hier steht weiterer Text...</p>" + "<p><a href=" + '"' + "#" + '" ' + "id=" + '"' + milli + "-hide" + '" ' + "class=" + '"' + "hidelink" + '" ' + "onclick=" + '"' + "showHide(" + "'" + milli + "'" + "); return false;" + '">' + "weniger.." + "</a></p></d" + "iv>" + "</d" + "iv>");
}
});
Grüße aus Oberhausen,
Steffen
jprochazka
Contributor
4828 Points
736 Posts
Re: Read more... tag in TinyMCE
Nov 30, 2012 05:25 PM|LINK
Nice work thanks for sharing.
Steffen01
0 Points
3 Posts
Re: Read more... tag in TinyMCE
Nov 30, 2012 05:48 PM|LINK
The "ShowHide" function I found in internet but can't remember the link.