• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1556
  • Last Modified:

TinyMCE confusion

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
billium99
Asked:
billium99
  • 5
  • 4
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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
 
billium99Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
billium99Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
billium99Author Commented:
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
 
billium99Author Commented:
Thanks
0
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now