Solved

TinyMCE 4.0.10 Implementation

Posted on 2013-11-19
11
1,360 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
[X]
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
  • 6
  • 4
11 Comments
 
LVL 53

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 53

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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

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
 

Author Comment

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

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 53

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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

717 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