Photos and Images

Tutorial for uploading images with TinyMCE

TinyMCE is a common Open Source Editor used in content management systems, it is flexible and easy to integrate. TinyMCE is a Javascript HTML ‘WYSIWYG’ editor  that is useful as a file manager and file or image uploader. Saco Design has used TinyMCE almost from its original inception.


When adding, editing or creating web pages and blocks in Avenger,  the TinyMCE editor is employed to facilitate markup.


Web Page and News Article Creation in Site Avenger



Block Creation with TinyMCE,  note that when editing blocks, TinyMCE can be disabled by selecting



Familiarize yourself with the TinyMCE Toolbar.  Most of the symbols are commonly seen in Document Editors.

Most elements of the toolbar are self explanatory, however one should take note of the Text - 'T' clipboard and the Word -'W' clipboard,  when pasting plain text, be sure to select the 'T' clipboard and most importantly when pasting text from a Word document select the 'W' Clipboard. 

To insert an image into a webpage, newsarticle or block  select the image icon to open the TinyMCE image editor

On the TinyMCE image editor select the File Manager Icon This will open the TinyMCE File Manager shown below with some sample image files. 

If an image has already been uploaded to the server, it will appear in the grey area above, simply click on the image to insert that image.  If the image has not yet been uploaded click the "Browse" button to explore your local computer files and select an image to be uploaded.

File Browser below:


Having selected the file for uploading, now you must click the  "Upload" button.   An icon representing your image will appear in the File Manager. Please note:  It is important to properly prepare an image for display.  Adjust the image for optimal dimensions and image resolution before uploading the image.  Improperly prepared images dramatically slow down web page downloads.   For instance the maximum width for the content block is usually 600 pixels.


Once your image has been uploaded, insert it into the page by clicking on the image in the File Manager. The Red X button is used to delete the file.



After selecting and clicking on the image, the insert/edit menu will pop up and provide an opportunity to include an image description, known as the ALT tag.  This text will be used in the event a user's browser is text-only and is beneficial to screen readers and search engine optimization.

That's it, Done!.


Oh, one more thing, it is possible to "fine tune" the image and document placement by editing the HTML directly simply select HTML to view/edit the document's HTML code.


<p>Background: TinyMCE is a common Open Source Editor used in content management system, it is flexible and easy to integrate.&nbsp;</p>
<p>TinyMCE is a Javascript HTML &lsquo;WYSIWYG&rsquo; editor&nbsp; that is useful as a file manager and file or image uploader.&nbsp;</p>
<p>Saco Design has used TinyMCE almost from its original inception.</p>

1-207-221-3255 | Contact Site Avenger - Your Content Management Superhero

Copyright © 2023 Saco Design, Inc. | All Rights Reserved | Website Design by Saco Design | Superpowered by Site Avenger