Escaping html tag before pasting it to textarea

1,495 Posts

wendy Reply #1, 18 years, 3 months ago

Hi guys, I’m working on newsletter right now. Do you guys think that it’s better to escape the html tag before outputing it in the middle of the textarea or just output it as is? It works just fine if I output the html tag as is in plain textarea, and it works fine too with RTE. I was just wondering, am I doing the right thing or not. If somebody can guide me through this, it will be awesome, some kind like best practice or etc.

I also encounter problem with setting up the right height and width for the RTE. I use both stylesheet and html attribute, but none of them work for me. sad

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

1,495 Posts

wendy Reply #2, 18 years, 3 months ago

Here is the output code. I’m using invokeevent to get the rte code.

<div>Document:</div><div><textarea id="contentmsg" name="contentmsg" style="width:100%; height:300px;"></textarea></div>
			<script language="javascript" type="text/javascript" src="/assets/plugins/fckeditor/fckeditor.js"></script>
		<script language="javascript" type="text/javascript">
			var FCKImageBrowserURL = '/manager/media/browser/mcpuk/browser.html?Type=images&Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/';
			var FCKLinkBrowserURL = '/manager/media/browser/mcpuk/browser.html?Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/';
			var FCKFlashBrowserURL = '/manager/media/browser/mcpuk/browser.html?Type=flash&Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/';
			var FCKCustomToolbarSet = [  ];
			var FCKAutoLanguage = false;
			var FCKEditorAreaCSS = '/assets/plugins/fckeditor/editor/css/fck_editorarea.css';
			function FCKeditor_OnComplete(edtInstance) {
				if (edtInstance){ // to-do: add better listener
					edtInstance.AttachToOnSelectionChange(tvOnFCKChangeCallback);
				}
			};
			
			function tvOnFCKChangeCallback(edtInstance) {
				if (edtInstance) {
					elm = edtInstance.LinkedField;
					if(elm && elm.onchange) elm.onchange();
				}
			}
		</script>
		<script language='javascript' type='text/javascript'>var oFCKcontentmsg = new FCKeditor('contentmsg');oFCKcontentmsg.Width = '';oFCKcontentmsg.Height = '';oFCKcontentmsg.BaseHref = 'http://modx.novsun.net/';oFCKcontentmsg.BasePath = '/assets/plugins/fckeditor/';oFCKcontentmsg.Config['ImageBrowser'] = true;oFCKcontentmsg.Config['ImageBrowserURL'] = FCKImageBrowserURL;oFCKcontentmsg.Config['LinkBrowser'] = false;oFCKcontentmsg.Config['LinkBrowserURL'] = FCKLinkBrowserURL;oFCKcontentmsg.Config['FlashBrowser'] = false;oFCKcontentmsg.Config['FlashBrowserURL'] = FCKFlashBrowserURL;oFCKcontentmsg.Config['SpellChecker'] = 'SpellerPages';oFCKcontentmsg.Config['CustomConfigurationsPath'] = '/assets/plugins/fckeditor/custom_config.js';oFCKcontentmsg.ToolbarSet = 'advanced';oFCKcontentmsg.Config['EditorAreaCSS'] = FCKEditorAreaCSS;oFCKcontentmsg.ReplaceTextarea();</script>

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

1,495 Posts

wendy Reply #3, 18 years, 3 months ago

FYI, here is the code that I use for outputing RTE, and the output is the one on the second reply on this topic.

				// Invoke RichTextEditor event, if rte enabled
				$rteOutput = '';
				if(strtolower($rte) == 'true') {
					$replace_richtexteditor = array("contentmsg");
					if(is_array($replace_richtexteditor)) {
						$evtOut = $modx->invokeEvent("OnRichTextEditorInit",
									array(
										'editor'	=> $modx->config['which_editor'],
										'elements'	=> $replace_richtexteditor
									));
						if(is_array($evtOut)) $rteOutput = implode("",$evtOut);				
					}
				}

Do I need to output the rte inside or outside the form? I think it doesn’t matter though, because I tried both of them, and it still displaying thw width and height of rte to be empty. It’s shown above.

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

1,131 Posts

Bravado Reply #4, 18 years, 3 months ago

Sorry about the delay on answering this one...been busy as hell lately! Anyways...

You should look at the QuickEdit plugin and see how Adam implemented RTE’s in it. But in a nutshell, the OnRichTextEditorInit event does have a width and height property which can be added to the array like this:

$evtOut = $modx->invokeEvent("OnRichTextEditorInit",
									array(
										'editor'	=> $modx->config['which_editor'],
										'elements'	=> $replace_richtexteditor
										'width'	=> '100%'
										'height'	=> '400'
									));

The values I set here are the defaults for FCKEditor, but you can change them to reflect what the width and height should be based on the implementation of your form. Let me know if you have any further problems...but I think this should do it for ya.

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,495 Posts

wendy Reply #5, 18 years, 3 months ago

Thanks for the reply Jeff.

I found the solution last week, when I tried to add that width and height to the array, and it does the trick. Thanks for the reply. grin

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media

1,495 Posts

wendy Reply #6, 18 years, 3 months ago

Another thing though, do I need to escape the html tag inside textarea? I’m assuming we don’t have to, but if I’m wrong, please correct me. Thanks

Wendy Novianto
[font=Verdana]PT DJAMOER Technology Media
[font=Verdana]Xituz Media