Jump to content
Larry Ullman's Book Forums
Diamond Dave

Including The Wysiwyg Editor In Chapter 5

Recommended Posts

Please don't laugh about the user name, it's an old nickname. I was expecting the "username taken" warning to disappear instantly but I guess you haver to press enter.

Larry, you have my utmost respect and gratitude for putting all of this learning material out there for us. And then you hover over our questions, continuing to help us out-pretty cool.

Anyways, I could not for the life of me include the latest WYSIWYG editor in the text area in my Chapter 5 script as it is written on page 113.

I worked on it a couple hours trying different things like renaming the files and such because TinyMCE version 4.0.5 had different file names.

Finally I downloaded the older version, 3.5.8. Still nothing. After all this all I needed to do was add a dot (.) before the path to the source of the JS file in the script tag the way it is done in all of the include and require commands -->   (<script type="text/javascript" src="./tiny_mce/tiny_mce.js"></script>).

Is that wierd, or what? Wow, sometimes simple things can put a stop to the fun.

Thought I would throw this comment in there, I didn't see anyone else write about the subject.

Man I'm serious when I say that scripting is fun even for a Saturday night. If I get a job doing this-goodness you'll here from me then.

Share this post


Link to post
Share on other sites

Diamond Dave, welcome to the forums (and nice user name).

 

Glad to hear you got everything working after struggling for quite a while.

I know that feeling all too well.

 

Just out of curiosity, when you say that all you did was "add a dot", does that mean that before you added the dot, your markup looked like the following:

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

The reason I ask is because the src attribute with and without a dot are completely different meanings.

Specifically, please see the top two answers on the following page:

http://stackoverflow.com/questions/7613274/why-would-a-developer-place-a-forward-slash-at-the-start-of-each-relative-path

 

That clear up any potential confusion?

Share this post


Link to post
Share on other sites

HartleySan,

Very cool that people are looking over these posts, I did not expect a response, especially so quickly.

 

I simply added one dot and the slash before the file name in the source attribute to get it to work.

It is hard to explain so here are some examples.

 

This is the way I am used to the files being included. I had seen Larry including files this way in the scripts in the book "PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (4th Edition)":

 

$page_title = 'Browse the Prints';
include ('includes/header.html');

 

Now, in the book "Effortless E-Commerce with PHP and MySQL" I see the files included with the dot (.) and a slash at the beginning of the relative path:

 

$page_title = 'Add a Site Content Page';
include ('./includes/header.html');

 

I am saying only the single dot (.) because I am aware that two dots before the slash backs up one directory. Obviously these two examples do the same thing.

 

So my script would not execute like this:

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

 

But would like this:

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

 

Obviously there is a difference with the slash and without it.
 

Share this post


Link to post
Share on other sites

This may be some behavior I ran into on my particular system. Not sure what is going on with that but if I am having problems including or referencing files I know what to look for. I apologize if I have confused anyone. If this is a glitch on my end, please delete my comment and we'll move on. Thanks.

Share this post


Link to post
Share on other sites

Here's another link that may be of interest:

http://stackoverflow.com/questions/7591240/what-does-dot-slash-refer-to-in-terms-of-an-html-file-path-location

 

Also, the following is a more detailed answer related to PHP:

http://stackoverflow.com/questions/579374/what-does-the-dot-slash-do-to-php-include-calls

 

Lastly, it's important to differentiate between the following three things:

tiny_mce/tiny_mce.js
/tiny_mce/tiny_mce.js
./tiny_mce/tiny_mce.js
 
As explained in the links above, the first (tiny_mce/tiny_mce.js) and third (./tiny_mce/tiny_mce.js) items are pretty much the same thing while the second (/tiny_mce/tiny_mce.js) item is completely different.
Put simply, the first and third items are relative links, and the second item is an absolute link, which has a completely different meaning from the other two.
 
Unfortunately, without more context regarding your actual system environment and file structure, I can't offer any advice/info beyond that.

Share this post


Link to post
Share on other sites

Thanks HartleySan,

     You descibed what I have been experiencing with the last three examples with the js file. This is something I need to pay attention to when referencing files. Normally I can tell where an error like that is coming from but in the case of including or referencing a JavaScript file, nothing works so it can be tough tracking the cause. I need some work with debugging JavaScript, no doubt. Maybe throw an echo statement in the file so I know it is getting referenced properly.

     It's funny I always thought an absolute link started from the C drive; I'll read the articles you posted.

Share this post


Link to post
Share on other sites

Not to potentially confuse you more, but an absolute path is relative to the file system it's defined within.

Put simply, in Windows, an absolute path in most cases will be relative to your system (C:\) drive, yes, but in UNIX/Linux-based system, absolute paths start with a forward slash (/), and on the web, an absolute path is relative to your base domain (i.e., the www.domain-name.com part of your URL).

 

As such, "absolute" has a different meaning depending on the context, but you're more or less right, yes.

 

As for handling JS errors, I highly recommend using Google Chrome as your browser for development purposes because you can open up a JS console within Chrome, which will report any and all client-side errors/problems, including busted file paths.

Share this post


Link to post
Share on other sites

I'm having some issues getting the tinymce wysiwyg editor to show up as it's supposed on the add_page.php script when I upload to the server. Unlike Diamond Dave (and personally I still like Diamond Dave) no matter what I do with the file path nothing seems to work. I've even given up using the tinymce files stored on the server and have used a direct link to cachefly.

 

src="//tinymce.cachefly.net/4.1/tinymce.min.js"

 

I am using Effortless E-Commerce copyright 2011, in Chapter 5, page 14. I downloaded all the files from Larry's site and these are the ones I am using to try and get the editor to work. The only change I have made to Larry's code is the src file path to the one noted above. I upload the file to the server and I get the complete page as it should be before the wysiwyg was installed. I have cleared my cache and history and still no editor.

 

When I do a separate html file with the code below and load it to the server I get the editor .

 

<!DOCTYPE html>
<html>
<head><!-- CDN hosted by Cachefly -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
</head>
<body>
        <textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>

 

I don't get any errors and all the includes and requires are the exact same name. Everything works fine except the editor. I have spent the last several days trying to fugure this out. I never post to forums as Google and I usually have great success. Not this time. Any help would be greatly appreaciated. Thanks.

Share this post


Link to post
Share on other sites

Hello, Lance, and welcome to the forums.

 

A few questions:

  1. Does the script tag that links to the editor show up in your source code?
  2. In your browser console, do you get any errors related to TinyMCE not loading?
  3. If not #2 above, do you get any errors related to actually trying to initialize the editor?

 

Thanks.

Share this post


Link to post
Share on other sites

Hi HartleySan,

 

First, thank you very much for replying. This thread was over a year old so I wasn't sure if I would get a reply. Forums and the people that run them are a wonderful thing. as for your questions I will answer them in order.

 

1) Yes. I use Dreamweaver CS6 and under the source code tab I see the script that links to the editor. I changed back to referencing files on the server so here is my filepath <script type="text/javascript" src="/tinymce/tinymce.min.js"></script>

 

2) Here are the logs in the browser console

 

"Invalid App Id: Must be a number or numeric string representing the application id." all.js:56
"FB.getLoginStatus() called before calling FB.init()." all.js:56
"Failed to load: http://www.lancedonnelly.com/tinymce/themes/advanced/theme.min.js" tinymce.min.js:4
"Failed to load: http://www.lancedonnelly.com/tinymce/plugins/advlink/plugin.min.js" tinymce.min.js:4
"Failed to load: http://www.lancedonnelly.com/tinymce/plugins/inlinepopups/plugin.min.js" tinymce.min.js:4
"Failed to load: http://www.lancedonnelly.com/tinymce/plugins/iespell/plugin.min.js" tinymce.min.js:4
"Failed to load: http://www.lancedonnelly.com/tinymce/plugins/safari/plugin.min.js" tinymce.min.js:4
"Failed to load: http://www.lancedonnelly.com/tinymce/plugins/xhtmlxtras/plugin.min.js" tinymce.min.js:4
content is null tab-events.js:40
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/droidsans/v6/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff. This can be fixed by moving the resource to the same domain or enabling CORS. EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/kreon/v9/a5r0-iMPk2rygJI75EuckA.woff. This can be fixed by moving the resource to the same domain or enabling CORS. a5r0-iMPk2rygJI75EuckA.woff
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/droidsans/v6/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff. This can be fixed by moving the resource to the same domain or enabling CORS. s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff
content is null tab-events.js:40

 

3) Hopefully you'll understand the errors above. I also ran firebug and did not find any erros on the console there.

 

Thanks again for helping out.

 

Lance.
 

Share this post


Link to post
Share on other sites

Without even replying, you are a genius. I didn't even know about the broswer console. I went into the add_page.php file and removed all the failed to load plugins, uploaded to server and BOOM, there it was, Two days of work that could have been avoided if had only known about the console. Thank you, thank you.

 

Lance.

  • Upvote 1

Share this post


Link to post
Share on other sites

Excellent! Glad you figured it out and thanks for letting us know. The more familiar you are with the available debugging tools, the easier your life will be!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...