Image Tag on WYSIWYG Editor

The default Nicedit WYSIWYG content editor has function to handle img tag and simple upload, but this time, I've added a new image handling function.

This function is used in the Alinous Document CMS and it is frequently used. The Image Handling is one of the CMS software. It is customized one of this example.

Appearance

There are two icons to handle image tag on the header menu of the WYSIWYG editor.

image icons

The left one supports function to upload image and select uploaded image to insert into the location you put caret on the Html editor area. Another one is to handle image tag's information, or insert image from the URL.

Upload Images

On this example, you can upload image from the web browser. In order to do that, click the icon to upload image at first. Then following dialog appears.

image upload dialog

Select the image on the local pc by "Browse" button and push the "upload" button, then the image is uploaded.

uploaded image

Click the image on the dialog so that put it where the caret is on the Html edit area of the WYSIWYG content editor. If you want to delete it, click "Delete" button under the image you want to delete. 

Handle Image Tag directly

Click the icon to handle the Image tag, then following dialog appears.

Input the information about the image, those are URL, Alt Text, and Align, push the "Submit Query" button.

Then if you selected the image on the edit area of the wysiwyg content editor, update the information. If not, then a new image tag  and the Object is created there.

Source code location

The location of Image Tag extension is in the "ALINOUS_HOME/samples/nicedit/ext/" folder.

Anchor tag extention source code

The file named "nicimages.js" is the source code of this extension.

Extension's source code

This extension's code to register this plugin is below.


This code is for icon button and the dialog pane to update the image. The function to handle the img Html tag is default function.


Go to Top