Installing TinyMCE in my webpage

TomTees · November 29, 2010

I am reading a book that shows you how to use TinyMCE so that you have an editor to use in a TextArea in the webpage.

I am followed the example in the book but it isn't working.

My book told me to place this code after my <form>...

<!-- TINYMCE CODE -->
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	// General options
	mode : "exact",
	elements : "content",
	theme : "advanced",
	width : 800,
	height : 400,
	plugins : "advlink,advlist,autoresize,autosave,contextmenu,fullscreen,iespell,inlinepopups,media,paste,preview,safari,searchreplace,visualchars,wordcount,xhtmlxtras",

	// Theme options
	theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,removeformat,|,search,replace,|,cleanup,help,code,preview,visualaid,fullscreen",
	theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,outdent,indent,blockquote,|,sub,sup,cite,abbr",
	theme_advanced_buttons3 : "hr,|,link,unlink,anchor,image,|,charmap,emotions,iespell,media",
	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/styles.css",

});
</script>
<!-- END TinyMCE code -->

The form with TextArea appears like it should in the main page but there is no editor.

What am I doing wrong?

TomTees

KevinM1 · November 29, 2010

Have you tried looking at the TinyMCE documentation itself? I believe they have a wiki. Also, try implementing the editor in waves. Try the bare bones editor, followed by the various options you want, one at a time. That way you can pinpoint exactly where/when it breaks.

Debugging 101 - when in doubt, read documentation straight from the source, and always try the most basic use case/functionality before getting fancy.

TomTees · November 29, 2010

Have you tried looking at the TinyMCE documentation itself?

Already did that.

I believe they have a wiki.

It is kind of lame.

Also, try implementing the editor in waves. Try the bare bones editor, followed by the various options you want, one at a time. That way you can pinpoint exactly where/when it breaks.

Debugging 101 - when in doubt, read documentation straight from the source, and always try the most basic use case/functionality before getting fancy.

There is no editor, so that is pretty bare bone...

It must be something simple.

TomTees

trq · November 29, 2010

Have you one any debugging with firebug? I would start there.

KevinM1 · November 29, 2010

Can you show your HTML?

TomTees · November 29, 2010

Can you show your HTML?

Like after I run the PHP script?

TomTees

trq · November 29, 2010

Can you show your HTML?

Like after I run the PHP script?

TomTees

Yes. Any output from firebug would be good too.

TomTees · November 30, 2010

Here is the HTML output from my PHP script...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<!-- HTML HEADER -->
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			Add a Site Content Page			</title>
		<link rel="stylesheet" href="css/styles.css" type="text/css" />
	</head>

	<!-- END OF HTML HEADER -->

	<!-- HTML BODY -->
	<body>
		<!-- WRAPPER -->
		<div id="wrap">
			<!-- PAGE HEADING -->
			<div class="header">
				<h1><a href="index.php">Some Title Here</a></h1>

				<h2>A Tagline Goes Here</h2>
			</div>
			<!-- END OF PAGE HEADING -->

			<!-- TAB NAVIGATION -->
			<div id="nav">
				<ul>
					<li><a href="index.php"><span>Home</span></a></li><li><a href="about.php"><span>About</span></a></li><li><a href="contact.php"><span>Contact</span></a></li><li><a href="register.php"><span>Register</span></a></li>					</ul>

			</div>
			<!-- END OF TAB NAVIGATION -->

			<!-- PAGE BODY -->
			<div class="page">
				<!-- MAIN CONTENT -->
				<div class="content">


<!-- END OF HEADER -->
<h3>Add a Site Content Page</h3>

<form action="add_page.php" method="post" accept-charset="utf-8">
<fieldset>
	<legend>Fill out the form to add a page of content:</legend>
	<p>
		<label for="title"><strong>Title</strong></label><br />
		<input type="text" name="title" id="title" />		</p>

	<p>

		<label for="category"><strong>Category</strong></label><br />
		<select name="category"
			 >
			<option>Select One</option>
			<option value="3">Category 1</option>
<option value="5">Category 2</option>
<option value="1">Category 3</option>
<option value="4">Category 4</option>

<option value="2">Category 5</option>
		</select>
				</p>

	<p>
		<label for="description"><strong>Description</strong></label><br />
		<textarea name="description" id="description" rows="5" cols="75"></textarea>		</p>

	<p>
		<label for="content"><strong>Content</strong></label><br />
		<textarea name="content" id="content" rows="5" cols="75"></textarea>		</p>

	<p>
		<input type="submit" name="submit_button"
					 class="formbutton" id="submit_button"  value="Add This Page" />
	</p>
</fieldset>

</form>

<!-- TINYMCE CODE -->
<script type="text/javascript" src="../tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	// General options
	mode : "exact",
	elements : "content",
	theme : "advanced",
	width : 800,
	height : 400,
	plugins : "advlink,advlist,autoresize,autosave,contextmenu,fullscreen,iespell,inlinepopups,media,paste,preview,safari,searchreplace,visualchars,wordcount,xhtmlxtras",

	// Theme options
	theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,removeformat,|,search,replace,|,cleanup,help,code,preview,visualaid,fullscreen",
	theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,bullist,numlist,|,outdent,indent,blockquote,|,sub,sup,cite,abbr",
	theme_advanced_buttons3 : "hr,|,link,unlink,anchor,image,|,charmap,emotions,iespell,media",
	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/styles.css",

});
</script>
<!-- END TinyMCE code -->

<!-- START OF FOOTER -->
				</div>
				<!-- END OF MAIN CONTENT -->

				<!-- SIDEBAR -->

				<div class="sidebar">
					<!-- SIDEBAR ACCOUNT SECTION -->

							<div class="title">
								<h4>Manage Your Account</h4>
							</div>
							<ul>
								<li><a href="renew.php" title="Renew Your Account">Renew Account</a></li>
								<li><a href="change_password.php" title="Change Your Password">Change Password</a></li>

								<li><a href="favorites.php" title="View Your Favorites">Favorites</a></li>
								<li><a href="recommendations.php" title="View Your Recommendations">Recommendations</a></li>
								<li><a href="logout.php" title="Logout">Logout</a></li>
							</ul>

								<div class="title">
									<h4>Administration</h4>
								</div>

								<ul>
									<li><a href="add_page.php" title="Add a Page">Add Page</a></li>
									<li><a href="add_pdf.php" title="Add a PDF">Add PDF</a></li>
									<li><a href="#" title="Blah">Blah</a></li>
								</ul>
														<!-- END OF SIDEBAR ACCOUNT SECTION -->

					<!-- SIDEBAR CONTENT -->

					<div class="title">
						<h4>Content</h4>
					</div>
					<ul>
						<li><a href="category.php?id=3" title="Topic 1">Topic 1</a></li>
						<li><a href="category.php?id=5" title="Topic 2">Topic 2</a></li>

						<li><a href="category.php?id=1" title="Topic 3">Topic 3</a></li>
						<li><a href="category.php?id=4" title="Topic 4">Topic 4</a></li>
						<li><a href="category.php?id=2" title="Topic 5">Topic 5</a></li>
						<li><a href="pdfs.php" title="Topic 6">Topic 6</a></li>
					</ul>
					<!-- END OF CONTENT SIDEBAR -->
				</div>

				<!-- END OF SIDEBAR -->

				<!-- FOOTER -->
				<div class="footer">
					<p>
						<a href="site_map.php" title="Site Map">Site Map</a> |
						<a href="policies.php" title="Policies">Policies</a>
						  © |
					</p>
				</div>
				<!-- END OF FOOTER -->

			</div>
			<!-- END OF PAGE BODY -->

		</div>
		<!-- END OF WRAPPER -->

	</body>
	<!-- END OF HTML BODY -->

</html>

Like I said in my original post, the Javascript editor I tried to add to the comments box doesn't even appear...

TomTees

KevinM1 · November 30, 2010

Try putting your width and height within double quotes. You're passing them into the editor's generated CSS, so it's most likely anticipating a string value. See: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/width which gives its examples as strings.

TomTees · November 30, 2010

Try putting your width and height within double quotes. You're passing them into the editor's generated CSS, so it's most likely anticipating a string value. See: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/width which gives its examples as strings.

No dice.

TomTees

PFMaBiSmAd · November 30, 2010

Your code works for me in the latest FF browser. All I changed was the path to the tiny_mce to match where it is on my system (document root/htdocs folder) and changed the form's action="" URL to point to my test-form-processing code.

KevinM1 · November 30, 2010

Have you tried stripping it down to just:

tinyMCE.init({
    mode : "exact",
    elements : "contents",
    theme : "advanced"
});

?

Start with that. If it works, then start adding the other theme options. This kind of approach was what I was trying (and obviously failing) to convey last night. Start with the least amount of code to get it to work, then add the extras.

Pikachu2000 · November 30, 2010

I'm betting this is a path issue. I don't think this should have the leading slash, unless the tiny_mce/ directory is at the root of the drive.

src="/tiny_mce/tiny_mce.js"

TomTees · November 30, 2010

I'm betting this is a path issue. I don't think this should have the leading slash, unless the tiny_mce/ directory is at the root of the drive.

src="/tiny_mce/tiny_mce.js"

Paths really screw me up in PHP. (Particularly with this author and his procedural style...)

In my Web Root (in NetBeans), my main file is "index.php"

(Then the series of includes starts)

Index.php includes footer.html in the "includes" directory.

Footer.html has this code...

	<li><a href="add_page.php" title="Add a Page">Add Page</a></li>

"add_page.php" is in the Web Root, and it apparently appears as part of index.php by way of footer.html. (Convoluted if you ask me.)

In the Web Root I have the "tiny_mce" directory. In that directory is "tiny_mce.js" which is supposed to run everything.

In "add_page.php" I have this..

<!-- TINYMCE CODE -->
<script type="text/javascript" src="../tiny_mce/tiny_mce.js"></script>

I also tried this...

<!-- TINYMCE CODE -->
<script type="text/javascript" src="../tiny_mce/tiny_mce.js"></script>

I *thought* I understood navigating paths pretty well, but I know that

rel=...

in HTML always screws me up because it doesn't work like regular paths. It works from the parent file's perspective and not the file the actual code is in. *Maybe* that is the issue with this JavaScript code which I know nothing about??

TomTees

trq · November 30, 2010

unless the tiny_mce/ directory is at the root of the drive.

Its a client side address, so the first / points to the web servers document root. But yeah, its likely the path is incorrect.

TomTees · November 30, 2010

unless the tiny_mce/ directory is at the root of the drive.

Its a client side address, so the first / points to the web servers document root. But yeah, its likely the path is incorrect.

Yep, its the same pain-in-the-arse as the Rel thingy in HTML...

This is the code that works...

Don't ask me why?! :shrug:

Also, I tried adding some text that I added formatting to, and while the entry was saved in my database, none of the formatting was captured so I'm not sure what the issue with that is?! :confused:

TomTees

trq · November 30, 2010

This is the code that works...



<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

Because the tiny_mce directory is obviously in the same directory as your calling page not the web servers root as you had used previously.

TomTees · November 30, 2010

This is the code that works...



<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>

Because the tiny_mce directory is obviously in the same directory as your calling page not the web servers root as you had used previously.

I thought you needed a "/" to go into a directory?

TomTees

trq · November 30, 2010

You thought wrong.

A leading slash always represents your web servers root (in html, in php (or file system paths) it would represent your OS's root).

TomTees · November 30, 2010

You thought wrong.

A leading slash always represents your web servers root (in html, in php (or file system paths) it would represent your OS's root).

So when would you use...

/SomeFile.php

as opposed to...

SomeFile.php

OR

/MyFolder/SomeFile.php

as opposed to...

MyFolder/SomeFile.php

TomTees

trq · November 30, 2010

/SomeFile.php will always look in the web servers root for SomeFile.php

SomeFile.php will look for a file called SomeFile.php in the same directory that the page your calling it is in.

/MyFolder/SomeFile.php will always look for SomeFile.php contained within the MyFolder directory which is located within your web servers root.

MyFolder/SomeFile.php will always look for SomeFile.php within a directory called MyFolder which is within the same directory as the file calling it.

trq · November 30, 2010

I should add that this changes when your talking about php includes. browsers can only see whats within the web servers document root. So a / at the begining means look in the web servers root.

PHP (which runs on the server itself) has access to the entire file system, so a path beginning with / means the root of the filesystem.

Sign In

Installing TinyMCE in my webpage

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information