Solved

TinyMCE 4.0.10 Implementation

Posted on 2013-11-19
11
1,311 Views
Last Modified: 2013-11-29
I've been running TinyMCE 3.x for several years. As it no longer functions in IE, I'm trying to implement TinyMCE 4.0.10 but have run into all sorts of problems.

I can't seem to figure out how to specify where the images are located.
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="tinymce2/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
        selector: "textarea",
        plugins: [
                "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
        ],

        toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
        toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent | undo redo | link unlink image media | preview | forecolor backcolor",
        toolbar3: "insertfile table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | spellchecker",
 
        image_list: "tinymce/js/tinymce/plugins/lists/image_list.js"
        image_advtab: true,
        menubar: false,
        toolbar_items_size: 'small',

        style_formats: [
                {title: 'Bold text', inline: 'b'},
                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}
        ]
});
</script>
<!-- /TinyMCE -->

The format of entries in image_list.js:
{title: '2009 Colombian National Champ', value: 'tinymce2/js/tinymce/plugins/image/images/2009colombianational.gif'},

I've also discovered that Tinymce 4 doesn't work in Firefox and Chrome, although I'm guessing there must be some kind of workaround. Any suggestions.

Finally, it would make my client's life so much simpler if I could implement a file manager. Most everything I've found is for PHP. We are running an ASP site. I spent the afternoon trying to get the JSFiddle solution working, but have had no success. I would appreciate any suggestions here as well.
0
Comment
Question by:slegy
  • 6
  • 4
11 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39661512
Part of the issue is your commas are out of place. This seems to work in chrome.  

tinymce.init({
        selector: "textarea",
        
 
        
           toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
        toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent | undo redo | link unlink image media | preview | forecolor backcolor",
        toolbar3: "insertfile table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | spellchecker",
        image_list: "tinymce/js/tinymce/plugins/lists/image_list.js",
image_advtab: true,
        menubar: false,
        toolbar_items_size:'small' ,       
style_formats: [
                {title: 'Bold text', inline: 'b'},
                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}
        ]
       
});

Open in new window

0
 

Author Comment

by:slegy
ID: 39662781
Thank you. I believe there was a misplaced comma. It now appears to be displaying properly in IE, Firefox and Chrome. But my big problem is that the "insert image" button isn't working, and it must be because I'm not specifying the location properly.

According to TinyMCE documentation for 4.x there are two approaches:
tinymce.init({
    plugins: "image",
    image_list: [
        {title: 'Dog', value: 'mydog.jpg'},
        {title: 'Cat', value: 'mycat.gif'}
    ]
});
or
tinymce.init({
    plugins: "image",
    image_list: "/mylist.php"
});

I have stored the images in this folder: tinymce2/js/tinymce/plugins/image/images

The image list: tinymce2/js/tinymce/plugins/lists/image_list.js

As noted above, the format of entries in image_list.js:
{title: '2009 Colombian National Champ', value: 'tinymce2/js/tinymce/plugins/image/images/2009colombianational.gif'},
.
.
.
The "insert/edit image" box displays, but there is no button in the source box to display the list to make a selection. So I'm missing something somewhere.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39662880
Please either post a link to your page.  Also make sure you can surf the images directly.
0
 

Author Comment

by:slegy
ID: 39663001
Sorry, I've been testing locally. Here is the link:
http://www.lightningclass.org/racing/calendar/eventAdd2.asp
Yes, I can surf the images directly.
0
 

Author Comment

by:slegy
ID: 39669354
I've looked everywhere and I can't find the solution for this. This morning I opened the above-referenced page, clicked on the "insert image" button. There is no browse button, so I keyed in the full path to the file that contains the images, and, voila!, the image is inserted.

I also tried replacing:
        image_list: "tinymce2/js/tinymce/plugins/lists/image_list.js"
with:
        external_image_list_url : "tinymce2/js/tinymce/plugins/lists/image_list.js"

Makes no difference. Certainly someone out there has implemented TinyMCE 4.x and knows what is missing and why the browse button does not appear on the "insert image" Source field.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:slegy
ID: 39669600
Does 4.x require the purchase of a file manager?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39673210
As far as a file browser, I have done this in classic asp with ckeditor and it is similar to in tinymce.  In your set up you can set the call back http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_a_custom_file_browser
  tinyMCE.init({
    theme : ...,
    mode: ...,

    file_browser_callback : 'myFileBrowser'
  });

Open in new window

In the next example on the link you will code starting with  
function myFileBrowser (field_name, url, type, win) {

and contain a variable for the url where your upload script is
var cmsURL = window.location.toString();    // script URL - use an absolute path!

I use http://www.aspupload.com/ to handle uploading although there are other options.  If I want to manipulate an image for size, resolution etc, I use http://www.imagemagick.org/script/index.php and Persists (author of aspupload) also has http://www.aspjpeg.com/  I use image magick because it is free but you have to be able to install it on your server.  Many shared hosts have aspupload and aspjpeg components installed  already and they are much easier to use.

Ultimately, you will create an asp page that handles the uploading and possible image manipulation.  If that page is stored on c:\sites\mysite.com\upload_script.asp then where you see

var cmsURL = window.location.toString();    // script URL - use an absolute path!

will become

var cmsURL = "c:\sites\mysite.com\upload_script.asp"    // script URL - use an absolute path!

Once you have all of this implemented you will see the upload button on the wysiwyg.  

Another option is to use the scripts you find in php to to this very thing.  There are some ready to go and as long as php is installed on your machine, you can easily use the php scripts instead.  If you are on a password protected site, you can pass variables between your asp and php pages by cookies or querystrings.  

If you do go this route, you will want to send a hashed password to let the php page know it is you.

Let's say you have an a contact_id the image is supposed to be attached to.  You might use sha1 or md5 to create a hash.

In pseudo code:

On the ASP side create the querystring.

contact_id="1234"
image_name="myimage.jpg"
date="11/25/2013"
secret_code="something_good"
logged_in_user="slegy"
theHash=sha1(contact_id,image_name,date,secret_code,logged_in_user) ' assume you have an sha1 function
theURL="c:\sites\mysite.com\upload_script.asp?contact="&contact_id&"&image="&image_name&"&user="&logged_in_user&"&code="&theHash

Open in new window

I am not a php dev but you would want to test the hash to see it is what you expect. This is not php code, it is vbscript. If you go this route, I would first test without this security, then ask a new question to get this idea to work in php.  
contact=request("contact_id")
image=request("image")
user=request("logged_in_user")
theHash=request("hash")
secret_code="something_good"
HashCheck=sha1(contact_id,image_name,date,secret_code,logged_in_user) ' assume you have an sha1 function
if theHash=HashCheck then 'notice we rebuilt the hash on the receiving end and now we want them to match.
   'we have a match and you can proceed
    else
    ' do not run this script
end if

Open in new window

Perhaps another expert versed in PHP can interpret in this thread, otherwise, get it to work without this simple security and then come back to it in a new question.
0
 

Author Comment

by:slegy
ID: 39677805
Unfortunately, I don't have time to deal with this much complexity for another couple of days. What I don't understand is why the TinyMCE documentation does not make the implementation of the functionality clear. I followed their examples to the tee and it doesn't work. Thank you for your detailed explanation. I will get back to this as soon as I can.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39684670
>What I don't understand is why the TinyMCE documentation does not make the implementation of the functionality clear.

I can only guess they want you to pay for the easy way. I have already racked wasted hours finding the answer a long time ago.
0
 

Author Closing Comment

by:slegy
ID: 39685687
Thank you, again.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Internet is a big network which is formed by connecting multiple small networks.It is a platform for all the users which are connected to it.Internet act as platform in different fields. Such as: Internet  as a collaboration platform. Internet  as…
I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

744 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

9 Experts available now in Live!

Get 1:1 Help Now