TinyMCE 4.0.10 Implementation

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.
slegyAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
slegyAuthor Commented:
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please either post a link to your page.  Also make sure you can surf the images directly.
0
 
slegyAuthor Commented:
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
 
slegyAuthor Commented:
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
 
slegyAuthor Commented:
Does 4.x require the purchase of a file manager?
0
 
slegyAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>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
 
slegyAuthor Commented:
Thank you, again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.