Solved

TinyMCE confusion

Posted on 2013-10-26
9
1,441 Views
Last Modified: 2013-10-26
HI All,

I had a TinyMCE 3.x-formatted text area in a web app of mine and I had added about 8 custom buttons that inserted various formatted text. But I realized that this all was not working properly in IOS browsers. So I dug a little bit and realized TinyMCE has a 4. version that is cross-browser. I installed it, and I can get a simple text area field to show up on all devices!

However, I can't get any of my custom buttons to work. The TinyMCE website has examples for custom buttons, but in their sample code, they truncate all but the custom button example, and trying to add this to my original code just isn't working.

Can someone help with a 4.x translation of a customized 3.x text area implementation?

Here is the original code with all the buttons:

<script type="text/javascript">
    tinyMCE.init({

        mode: "textareas",
        theme: "advanced",
        theme_advanced_buttons2: "CustomerName,EstimateDate,EstimatorFirstName,EstimatorLastName,EstimatorCell",
        theme_advanced_buttons3: "EstimatorEmail,EstimatorImage,SchedulerFirstName,SchedulerLastName,SchedulerImage",
        theme_advanced_buttons1: "image,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        plugins: 'inlinepopups,wordcount',
        setup: function(ed) {

            // Add a custom button
            ed.addButton('CustomerName', {
                title: 'Customer Name',
                image: 'img/tinyMCE/CustomerName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+customername+]');
                }
            });

            // Add a custom button
            ed.addButton('EstimateDate', {
                title: 'Estimate Date',
                image: 'img/tinyMCE/EstimateDate.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+datetime+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorFirstName', {
                title: 'Estimator First Name',
                image: 'img/tinyMCE/EstimatorFirstName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatorfname+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorLastName', {
                title: 'Estimator Last Name',
                image: 'img/tinyMCE/EstimatorLastName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatorlname+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorCell', {
                title: 'Estimator Cell',
                image: 'img/tinyMCE/EstimatorCell.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatorcell+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorEmail', {
                title: 'Estimator Email',
                image: 'img/tinyMCE/EstimatorEmail.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatoremail+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorImage', {
                title: 'Estimator Image',
                image: 'img/tinyMCE/EstimatorImage.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('<img src="img/placeholders/Estimator.png"  alt="Estimator" >');
                }
            });
            // Add a custom button
            ed.addButton('SchedulerFirstName', {
                title: 'Scheduler First Name',
                image: 'img/tinyMCE/SchedulerFirstName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+officefname+]');
                }
            });

            // Add a custom button
            ed.addButton('SchedulerLastName', {
                title: 'Scheduler Last Name',
                image: 'img/tinyMCE/SchedulerLastName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+officelname+]');
                }
            });
            // Add a custom button
            ed.addButton('SchedulerImage', {
                title: 'Scheduler Image',
                image: 'img/tinyMCE/SchedulerImage.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('<img src="img/placeholders/Scheduler.png" alt="Scheduler" >');
                }
            });

        }
    });

</script>

Open in new window


and the new, working, non-customized implementation:

<script type="text/javascript">
tinymce.init({
    selector: "textarea"
	
 });</script>

Open in new window


If I try to add so much as theme="advanced" I get syntax errors and nothing works.

Anyone know how to tweak this properly?

Thanks

Bill
0
Comment
Question by:billium99
  • 5
  • 4
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39602784
Are you talking about an external plug in? http://www.tinymce.com/wiki.php/Configuration:external_plugins

Please post a link to your test page for us to look at.  Usually when something is not working like this it is from a js error or missing file.  You can look for this on your own by using your chrome, firefox or safari console.  If you want us to help trouble shoot, you will need to post your link.
0
 
LVL 1

Author Comment

by:billium99
ID: 39602919
HI - thanks.

I stripped out the password requirement so none of the other pages will work.

http://simplesourcedev.com/activation_email1.asp

Now currently, I get no error in FF console and as you can see, no textarea field shows up at all.

This is using the modified code:

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

<script type="text/javascript">
    tinyMCE.init({

        mode: "textareas",
        theme: "advanced",
        theme_advanced_buttons2: "CustomerName,EstimateDate,EstimatorFirstName,EstimatorLastName,EstimatorCell",
        theme_advanced_buttons3: "EstimatorEmail,EstimatorImage,SchedulerFirstName,SchedulerLastName,SchedulerImage",
        theme_advanced_buttons1: "image,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        plugins: 'inlinepopups,wordcount',
        setup: function(ed) {

            // Add a custom button
            ed.addButton('CustomerName', {
                title: 'Customer Name',
                image: 'img/tinyMCE/CustomerName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+customername+]');
                }
            });

            // Add a custom button
            ed.addButton('EstimateDate', {
                title: 'Estimate Date',
                image: 'img/tinyMCE/EstimateDate.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+datetime+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorFirstName', {
                title: 'Estimator First Name',
                image: 'img/tinyMCE/EstimatorFirstName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatorfname+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorLastName', {
                title: 'Estimator Last Name',
                image: 'img/tinyMCE/EstimatorLastName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatorlname+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorCell', {
                title: 'Estimator Cell',
                image: 'img/tinyMCE/EstimatorCell.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatorcell+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorEmail', {
                title: 'Estimator Email',
                image: 'img/tinyMCE/EstimatorEmail.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+estimatoremail+]');
                }
            });
            // Add a custom button
            ed.addButton('EstimatorImage', {
                title: 'Estimator Image',
                image: 'img/tinyMCE/EstimatorImage.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('<img src="img/placeholders/Estimator.png"  alt="Estimator" >');
                }
            });
            // Add a custom button
            ed.addButton('SchedulerFirstName', {
                title: 'Scheduler First Name',
                image: 'img/tinyMCE/SchedulerFirstName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+officefname+]');
                }
            });

            // Add a custom button
            ed.addButton('SchedulerLastName', {
                title: 'Scheduler Last Name',
                image: 'img/tinyMCE/SchedulerLastName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+officelname+]');
                }
            });
            // Add a custom button
            ed.addButton('SchedulerImage', {
                title: 'Scheduler Image',
                image: 'img/tinyMCE/SchedulerImage.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('<img src="img/placeholders/Scheduler.png" alt="Scheduler" >');
                }
            });

        }
    });

</script>

Open in new window


If I add selector="textareas" like the 4.x sample from the TinyMCE website, it doesn't change the behavior at all.

Any ideas would be much appreciated.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39602928
Using chrome console, I see these errors

Failed to load resource: the server responded with a status of 404 (Not Found) http://simplesourcedev.com/tinymce/js/tinymce/themes/advanced/theme.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://simplesourcedev.com/tinymce/js/tinymce/plugins/inlinepopups/plugin.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://simplesourcedev.com/templates/rt_stratos/fonts/Ubuntu-R-webfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://simplesourcedev.com/templates/rt_stratos/fonts/Ubuntu-L-webfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://simplesourcedev.com/libraries/gantry/assets/jui/fonts/fontawesome-webfont.woff
Failed to load: http://simplesourcedev.com/tinymce/js/tinymce/themes/advanced/theme.min.js tinymce.min.js:3
Failed to load: http://simplesourcedev.com/tinymce/js/tinymce/plugins/inlinepopups/plugin.min.js tinymce.min.js:3
Failed to load resource: the server responded with a status of 404 (Not Found) http://simplesourcedev.com/templates/rt_stratos/fonts/Ubuntu-M-webfont.woff

Open in new window

The 404's are the issue.
0
 
LVL 1

Author Comment

by:billium99
ID: 39603004
Hmm - so I think the issue is that the newer version of TinyMCE might be expecting those files there, but in my original version, I don't have those files. The original files using 3.x work great on our production server, but don't work on IOS devices at all. If I use the default simple 4.x  form, it works perfectly.

How about this - right now, using the default, you can see that I'm up and running with a basic textarea.

With all of the tutorials truncating part of the code in every sample, do you have any recommendations for adding a custom button that injects some text into the form?

This works great:

<script type="text/javascript">
tinymce.init({
    selector: "textarea"
 });
</script>

Open in new window


That's what I have running on that page now.

How would I add a button that uses an image and inserts a predefined text value into the form?

It may be that the transition from 3 to 4 creates a puzzle palace of incompatibility with this set of custom buttons we have. And the customizer is long gone.

The old code for adding buttons was:

ed.addButton('CustomerName', {
                title: 'Customer Name',
                image: 'img/tinyMCE/CustomerName.png',
                onclick: function() {
                    // Add you own code to execute something on click
                    ed.focus();
                    ed.selection.setContent('[+customername+]');
                }

Open in new window


Is there a reasonably easy way to modify this concept for 4.x?

Thanks for your time

Bill
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39603052
3 and 4 are different.   Just start over and use the 4 files.  Please post a link to your sample.
http://www.tinymce.com/wiki.php/Advanced
http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x
0
 
LVL 1

Author Comment

by:billium99
ID: 39603063
I probably should have specified: I barely understand js.

Starting over is fine. I can mimic one example of a custom button that inserts text into the field, but I don't know where to start, and the Advanced samples that you point to at MCE website I've already reviewed. I don't see any "custom button" example for version 4.

Any ideas?

Thanks again

Bill
0
 
LVL 1

Author Closing Comment

by:billium99
ID: 39603102
Thanks
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39603103
Let's take out your design for now because that has it's own errors.  I created a jsbin using your js file for tinymce. You can find it here http://jsbin.com/ORUSUZu/1/edit?html,output

Notice I have commented out the basic example (which worked) and when I use an advanced sample, it does not work.  The reason is it is missing this file http://simplesourcedev.com/tinymce/js/tinymce/plugins/moxiemanager/plugin.min.js

Did you upload ALL of the tinymce files from your download?  If not, upload them so everything is in the same file structure.  Once you do that, come back to http://jsbin.com/ORUSUZu/1/edit?html,output and see if you can see the tinymce.  I used chrome console to see the missing file.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39603139
I am glad that worked for your.  Before you get too far, run your html code through the validator.  http://validator.w3.org/  I noticed on your sample link tinymce was doing funny things and I am pretty sure it has to do with the html coding errors.  

When you are having issues with javascript/jquery, it is best to isolate just what you are working on as sometimes an error in an  unrelated spot can affect what you are working on.

Good luck on your project.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now