Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

TinyMCE confusion

Posted on 2013-10-26
9
1,466 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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
 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 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