Jump to content


I need help with implementing an WYSIWYG editor...


2 replies to this topic

#1 chriggi

    Young Padawan

  • Members
  • Pip
  • 19 posts

Posted 04 March 2006 - 08:54 AM

Hello everybody!

I've just finished making this: http://www.projectra...tutorials/2/50/ tut...now I have a "news cms" on my page...but the submit news page of that tut is horrible :huh: I would like to implement an WYSIWYG editor like tinymce or sth. similar...I've read the docs of tinymce but i couldn't find anything that tells me how to make tinymce send the data to my database....any help???

greets

#2 Chaos King

    Senior Programmer

  • P2L Staff
  • PipPipPip
  • 676 posts
  • Gender:Male
  • Location:Florida

Posted 04 March 2006 - 11:53 AM

http://tinymce.moxie...installing.html

You should be able to figure that part on your own.

Sample Page:
<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas"
});
</script>
</head>
<body>
<form method="post">
	<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
</form>
</body>
</html>

All you need to do is create a submit button, and it will work the same way as any other submit form. The name of the $_POST variable would just be $_POST['content']. Nothing different here.

#3 chriggi

    Young Padawan

  • Members
  • Pip
  • 19 posts

Posted 04 March 2006 - 02:11 PM

Hello!

Thanks for your answer!

Sorry but I'm a real noob in PHP so I didn't understand that...

I still don't really know how to do it but maybe you can help me out a bit?

My php script now is:
<? include('dbconnect.php'); ?>
<form action="addnews.php" method="post">
<br>Title:
<br><input name="title" type="text" value="Title">
<br>Author:
<br><input name="user" type="text" value="Name">
<br>Date:
<br><input name="date" type="text" value="<?php print date("F j Y"); ?>">
<br>Icon:
<br><input name="icon" type="text" value="Icon URL">
<br>Message:
<br><textarea name="message" cols="40" rows="6" value="Message"> </textarea>
<br>Password:
<br><input name="password" type="password">
<br><input name="submit" type="submit" value="Submit">
<?php $password="yourpassword"; //change this to the password you want if ($_POST['password']==$password){ //DO NOT CHANGE THIS LINE
if (isset($_POST['submit'])) {
include("dbconnect.php");
$title = addslashes(strip_tags($_POST['title']));
$user = addslashes(strip_tags($_POST['user']));
$icon = addslashes(strip_tags($_POST['icon']));
$message = $_POST['message'];
$date = addslashes(strip_tags($_POST['date']));
$sql = "INSERT INTO newscms SET title='$title', user='$user', icon='$icon', message='$message', date='$date'";
if (mysql_query($sql)) {
echo("Your news has been added.");
} else {
echo("Error adding entry: " . mysql_
error() . "");
}
}
?>
[/code]

And the one from TinyMCE is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		plugins : "table,save,advhr,advimage,advlink,iespell,insertdatetime,preview,zoom,flash,
searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,-emotions,fullpage",
		theme_advanced_buttons1_add_before : "save,newdocument,separator",
		theme_advanced_buttons1_add : "fontselect,fontsizeselect",
		theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
		theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
		theme_advanced_buttons3_add_before : "tablecontrols,separator",
		theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,ful
lscreen,fullpage",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_path_location : "bottom",
		content_css : "example_full.css",
		plugin_insertdate_dateFormat : "%Y-%m-%d",
		plugin_insertdate_timeFormat : "%H:%M:%S",
		extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
		external_link_list_url : "example_link_list.js",
		external_image_list_url : "example_image_list.js",
		flash_external_list_url : "example_flash_list.js",
		file_browser_callback : "fileBrowserCallBack",
		theme_advanced_resize_horizontal : false,
		theme_advanced_resizing : true,
		apply_source_formatting : true
	});

	function fileBrowserCallBack(field_name, url, type, win) {
		// This is where you insert your custom filebrowser logic
		alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);

		// Insert new URL, this would normaly be done in a popup
		win.document.forms[0].elements[field_name].value = "someurl.htm";
	}
</script>
<!-- /TinyMCE -->
<!-- Self registrering external plugin, load the plugin and tell TinyMCE where it's base URL are -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/plugins/emotions/editor_plugin.js"></script>
<script language="javascript" type="text/javascript">tinyMCE.setPluginBaseURL('emotions', '../jscripts/tiny_mce/plugins/emotions');</script>
</head>
<body>

[Full featured example] <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a>  <a href="example_word.htm">[Word example]</a>

<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
	<h3>Full featured example</h3>
	This page shows all available plugins that are included in the TinyMCE distribution. Some of these plugins will only be visible on MSIE due to the lack of some support in FF. For more details on the various options on TinyMCE check the <a href="../docs/index.html">manual</a> or for more third party plugins check the plugin section.<br /><br />
	<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
	<span class="example1">Test header 1</span><br />
	<span class="example2">Test header 2</span><br />
	<span class="example3">Test header 3</span><br />
	Some <b>element</b>, this is to be editor 1. <br /> This editor instance has a 100% width to it.
	<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>
	<img src="logo.jpg">
	</textarea>
	<br />
	<input type="submit" name="save" value="Submit" />
	<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>


I hope you can help me.

Thank you very very much for your help!

greets

PS: Maybe I can do sth. in photoshop for you if you need help...





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users