asked on

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.

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


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.

Scott Fell

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

slegy

ASKER

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.

Scott Fell

Please either post a link to your page. Also make sure you can surf the images directly.

slegy

ASKER

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.

slegy

ASKER

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.

slegy

ASKER

Does 4.x require the purchase of a file manager?

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

slegy

ASKER

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.

Scott Fell

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

slegy

ASKER

Thank you, again.