This is not a modX feature request, but rather a request for these forums or wiki/documentaiton.
A list/gallery of working modX site’s (and their snippet’s or related code) that have functioning examples of the snippet in question.
Though I do see demo sites from time to time, most of them are offline for some reason? And I have yet to see a comprehensive list of sites related to any particular modX feature/snippet/chunk/function that also has their code posted. I don’t know about ya’ll, but I find it very beneficial to have a look at other people’s code or website which has an actual working example of the function or feature that you, yourself are currently trying to implement.
I realize that there are already many forum posts that say and do almost the exact same thing as this, but they are hard to find, (I don’t think the search engine works quite right on this site?) not in one place, and rarely list all of the code needed to make it work or give an example site (multiple sites) to study. Maybe just creating a sub-forum called "Working Examples" will do the trick? Or adding a documentation section that is more accessible than wiki?
For example, My site is using Jot with the TinyMCE editor enabled for user comments, and also has html parsing functioning for the comments. Here is the code and the site with everything working. Somebody should be able to look at my site, and then my code(s), and easily be able to implement a similar function on their own website:
1. Jot w/ TinyMCE editor for comments form
A. My Snippet Callout {{chunk}}
<div id="commentsAnchor">
<script type="text/javascript" src="/assets/plugins/tinymce3241/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "none",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,image,link,unlink,formatselect,removeformat,cleanup",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
convert_fonts_to_spans : false }
);
</script>
[!Jot? &tplForm=`commentsform` &tplComments=`comments` &pagination=`5` &moderated=`1` &canmoderate=`admin` ¬ify=`2` !]
<script type="text/javascript">
tinyMCE.execCommand(’mceToggleEditor’,false,’content’);
</script>
</div>
B. Create a {{chunk}} for tplForm
<a name="jf[+jot.link.id+]"></a>
<h2>[+form.edit:is=`1`:then=`Edit comment`:else=`Write a review`+]</h2>
<div class="jot-list">
<ul>
<li>Required fields are marked with <b>*</b>.</li>
</ul>
</div>
[+form.error:isnt=`0`:then=`
<div class="jot-err">
[+form.error:select=`
&-3=You are trying to re-submit the same post. You have probably clicked the submit button more than once.
&-2=Your comment has been rejected.
&-1=Your comment has been saved, it will first be reviewed before it is published.
&1=You are trying to re-submit the same post. You have probably clicked the submit button more than once.
&2=The security code you entered was incorrect.
&3=You can only post once each [+jot.postdelay+] seconds.
&4=Your comment has been rejected.
&5=[+form.errormsg:ifempty=`You didn’t enter all the required fields`+]
`+]
</div>
`:strip+]
[+form.confirm:isnt=`0`:then=`
<div class="jot-cfm">
[+form.confirm:select=`
&1=Your comment has been published.
&2=Your comment has been saved, it will first be reviewed before it is published.
&3=Comment saved.
`+]
</div>
`:strip+]
<form method="post" action="[+form.action:esc+]#jf[+jot.link.id+]" class="jot-form">
<fieldset>
<input name="JotForm" type="hidden" value="[+jot.id+]" />
<input name="JotNow" type="hidden" value="[+jot.seed+]" />
<input name="parent" type="hidden" value="[+form.field.parent+]" />
[+form.moderation:is=`1`:then=`
<div class="jot-row">
<b>Created on:</b> [+form.field.createdon:date=`%a %B %d, %Y at %H:%M`+]
<b>Created by:</b> [+form.field.createdby:userinfo=`username`:ifempty=`[+jot.guestname+]`+]
<b>IP address:</b> [+form.field.secip+]
<b>Published:</b> [+form.field.published:select=`0=No&1=Yes`+]
[+form.field.publishedon:gt=`0`:then=`
<b>Published on:</b> [+form.field.publishedon:date=`%a %B %d, %Y at %H:%M`+]
<b>Published by:</b> [+form.field.publishedby:userinfo=`username`:ifempty=` - `+]
`+]
[+form.field.editedon:gt=`0`:then=`
<b>Edited on:</b> [+form.field.editedon:date=`%a %B %d, %Y at %H:%M`+]
<b>Edited by:</b> [+form.field.editedby:userinfo=`username`:ifempty=` -`+]
`+]
</div>
`:strip+]
[+form.guest:is=`1`:then=`
<label for="name[+jot.id+]">Name:
<input tabindex="[+jot.seed:math=`?+1`+]" name="name" type="text" size="40" value="[+form.field.custom.name:esc+]" id="name[+jot.id+]" />
</label>
<label for="email[+jot.id+]">Email:
<input tabindex="[+jot.seed:math=`?+2`+]" name="email" type="text" size="40" value="[+form.field.custom.email:esc+]" id="email[+jot.id+]"/>
</label>
`:strip+]
<label for="title[+jot.id+]">Which Movie:
<input tabindex="[+jot.seed:math=`?+3`+]" name="title" type="text" size="40" value="[+form.field.title:esc+]" id="title[+jot.id+]"/>
</label>
<label for="content">Review: *
<textarea tabindex="[+jot.seed:math=`?+4`+]" name="content" cols="52" rows="10" id="content">[+form.field.content:esc+]</textarea>
</label>
[+jot.captcha:is=`1`:then=`
<div style="width:150px;margin-top: 5px;margin-bottom: 5px;"><a href="[+jot.link.current:esc+]"><img src="[(base_url)]manager/includes/veriword.php?rand=[+jot.seed+]" width="148" height="60" alt="If you have trouble reading the code, click on the code itself to generate a new random code." style="border: 1px solid #003399" /></a></div>
<label for="vericode[+jot.id+]">Help prevent spam - enter security code above:
<input type="text" name="vericode" style="width:150px;" size="20" id="vericode[+jot.id+]" /></label>
`:strip+]
<div style="float:right;width: 100px;"></div>
<input tabindex="[+jot.seed:math=`?+5`+]" name="submit" type="submit" value="[+form.edit:is=`1`:then=`Save Comment`:else=`Submit Review`+]" />
[+form.edit:is=`1`:then=`
<input tabindex="[+jot.seed:math=`?+5`+]" name="submit" type="submit" value="Cancel" onclick="history.go(-1);return false;" />
`+]
</fieldset>
</form>
C: Create a {{chunk}} for your tplComments:
<a name="jc[+jot.link.id+][+comment.id+]"></a>
<div class="jot-row [+chunk.rowclass+] [+comment.published:is=`0`:then=`jot-row-up`+]">
<div class="jot-comment">
<div class="jot-user">
[+comment.createdby:isnt=`0`:then=`<b>`+][+comment.createdby:userinfo=`username`:ifempty=`[+comment.custom.name:ifempty=`[+jot.guestname+]`:esc+]`+][+comment.createdby:isnt=`0`:then=`</b>`+]
Reviews: [+comment.userpostcount+]
</div>
<div class="jot-content">
<div class="jot-posticon">
[+phx:userinfo=`lastlogin`:ifempty=`9999999999`:lt=`[+comment.createdon+]`:then=`
<img src="[(base_url)]assets/snippets/jot/templates/comment.gif" width="16" height="16" alt="New comment" border="0" />
`:else=`
<img src="[(base_url)]assets/snippets/jot/templates/comment_trans.gif" width="16" height="16" alt="Comment" border="0" />
`:strip+]
</div>
<div class="jot-mod">
[+jot.moderation.enabled:is=`1`:then=`
<a href="[+jot.link.delete:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to delete this comment?’)" title="Delete Comment"><img src="[(base_url)]assets/snippets/jot/templates/delete.gif" width="16" height="16" alt="Delete Comment" border="0" /></a>
[+comment.published:is=`0`:then=`
<a href="[+jot.link.publish:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to publish this comment?’)" title="Publish Comment"><img src="[(base_url)]assets/snippets/jot/templates/publish.png" width="16" height="16" alt="Publish Comment" border="0" /></a>
`+]
[+comment.published:is=`1`:then=`
<a href="[+jot.link.unpublish:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to unpublish this comment?’)" title="Unpublish Comment"><img src="[(base_url)]assets/snippets/jot/templates/unpublish.png" width="16" height="16" alt="Unpublish Comment" border="0" /></a>
`+]
`:strip+]
[+jot.user.canedit:is=`1`:and:if=`[+comment.createdby+]`:is=`[+jot.user.id+]`:or:if=`[+jot.moderation.enabled+]`:is=`1`:then=`
<a href="[+jot.link.edit:esc+][+jot.querykey.id+]=[+comment.id+]#jf[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to edit this comment?’)" title="Edit Comment"><img src="[(base_url)]assets/snippets/jot/templates/edit.gif" width="16" height="16" alt="Edit Comment" border="0" /></a>
`:strip+]
</div>
<span class="jot-subject">[+comment.title:limit:esc+]</span>
<span class="jot-poster"><b>Posted on :</b> [+comment.createdon:date=`%a %B %d, %Y, %H:%M:%S`+]</span>
<hr />
<div class="jot-message">[+comment.content:bbcode:nl2br+]</div>
<div class="jot-extra">
[+comment.editedon:isnt=`0`:then=`
<span class="jot-editby">Last Edit: [+comment.editedon:date=`%B %d, %Y, %H:%M:%S`+] by [+comment.editedby:userinfo=`username`:ifempty=` * `+]</span>
`+] [+jot.moderation.enabled:is=`1`:then=`<a target="_blank" href="
http://www.ripe.net/perl/whois?searchtext=[+comment.secip+]">[+comment.secip+]</a>`+]</div>
</div>
</div>
</div>
D. Create a snippet named phx:bbcode
<?php
$string = preg_replace("/&(#[0-9]+|[a-z]+);/i", "&$1;", htmlspecialchars($output));
$string = preg_replace(’~\[b\](.+?)\[/b\]~is’, ’<b>\1</b>’, $string);
$string = preg_replace(’~\[i\](.+?)\[/i\]~is’, ’<i>\1</i>’, $string);
$string = preg_replace(’~\[u\](.+?)\[/u\]~is’, ’<span style="text-decoration: underline;">\1</span>’, $string);
$string = preg_replace(’~\[link\]www.(.+?)\[/link\]~is’, ’<a href="http://www.\1" target="_blank">www.\1</a>’, $string);
$string = preg_replace(’~\[link\](.+?)\[/link\]~is’, ’<a href="\1" target="_blank">\1</a>’, $string);
$string = preg_replace(’~\[link=(.+?)\](.+?)\[/link\]~is’, ’<a href="\1" target="_blank">\2</a>’, $string);
$string = preg_replace(’~\[url\]www.(.+?)\[/url\]~is’, ’<a href="http://www.\1" target="_blank">www.\1</a>’, $string);
$string = preg_replace(’~\[url\](.+?)\[/url\]~is’, ’<a href="\1" target="_blank">\1</a>’, $string);
$string = preg_replace(’~\[url=http://(.+?)\](.+?)\[/url\]~is’, ’<a href="\1" target="_blank">\2</a>’, $string);
$string = preg_replace(’~\[img\](.+?)\[/img\]~is’, ’<img src="\1" alt="[image]" style="margin: 5px 0px 5px 0px" />’, $string);
$string = preg_replace(’~\[img-l\](.+?)\[/img\]~is’, ’<img src="\1" alt="[image]" style="border: thin solid #DFE5F2; FLOAT: left; MARGIN-RIGHT: 20px" />’, $string);
$string = preg_replace(’~\[img-r\](.+?)\[/img\]~is’, ’<img src="\1" alt="[image]" style="border: thin solid #DFE5F2; FLOAT: right; MARGIN-LEFT: 20px;" />’, $string);
$string = preg_replace(’~\
(.+?)\[/color\]~is’, ’<font color="\1">\2</font>’, $string);
$string = preg_replace(’~\[left\](.+?)\[/left\]~is’, ’<div style="text-align:left;">\1</u>’, $string);
$string = preg_replace(’~\[center\](.+?)\[/center\]~is’, ’<div style="text-align:center;">\1</u>’, $string);
$string = preg_replace(’~\[right\](.+?)\[/right\]~is’, ’<div style="text-align:right;">\1</u>’, $string);
$string = str_replace(array("[","]","`"),array("[","]","`"),$string);
return $string;
?>
E. Create a plugin called bbcode & enable System Event; OnWebPagePreRender: (not 100% sure if needed):
function bbcode($string)
{
$string = preg_replace("#\[b\](.+?)\[/b\]#is", "<b>\\1</b>", $string);
$string = preg_replace("#\[i\](.+?)\[/i\]#is", "<i>\\1</i>", $string);
$string = preg_replace("#\[u\](.+?)\[/u\]#is", "<u>\\1</u>", $string);
$string = preg_replace("#\[link\]www\.(.+?)\[/link\]#is", "<a href=\"http://www.\\1\">www.\\1</a>", $string);
$string = preg_replace("#\[link\](.+?)\[/link\]#is", "<a href=\"\\1\">\\1</a>", $string);
$string = preg_replace("#\[link=(.+?)\](.+?)\[/link\]#is", "<a href=\"\\1\">\\2</a>", $string);
$string = preg_replace("#\[url\]www\.(.+?)\[/url\]#is", "<a href=\"http://www.\\1\">www.\\1</a>", $string);
$string = preg_replace("#\[url\](.+?)\[/url\]#is", "<a href=\"\\1\">\\1</a>", $string);
$string = preg_replace("#\[url=(.+?)\](.+?)\[/url\]#is", "<a href=\"\\1\">\\2</a>", $string);
$string = preg_replace("#\[img\](.+?)\[/img\]#is", "<img src=\"\\1\" alt=\"[image]\" style=\"margin: 5px 0px 5px 0px\" />", $string);
$string = preg_replace("#\[img-l\](.+?)\[/img\]#is", "<img src=\"\\1\" alt=\"[image]\" style=\"border: thin solid #DFE5F2; FLOAT: left; MARGIN-RIGHT: 20px\" />", $string);
$string = preg_replace("#\[img-r\](.+?)\[/img\]#is", "<img src=\"\\1\" alt=\"[image]\" style=\"border: thin solid #DFE5F2; FLOAT: right; MARGIN-LEFT: 20px;\" />", $string);
return $string;
}
$e = &$modx->Event;
switch ($e->name) {
case "OnWebPagePrerender":
$o = &$modx->documentOutput; // get a reference of the output
$o = bbcode($o);
break;
default :
return; // stop here - this is very important.
break;
}
F. Example site/page with the above code Implemented: http://www.themovietimeline.net/18
If you would like to see something like this, let your opinion be heard.
If modX would like help in implementing/compiling something like this, hit me up!
If
