Images

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Inserting Images in CKEditor is very simple task. To add picture user should press the CKEditor image.png button on the toolbar. A popup window called "Image Properties" appears.

Image Info

File:CKEditor insert images.png

The first bookmark refers to the "Image Info"

  • URL: defines the URL address of the image. User may also use the "Browse Sever" in order to browse the files.
  • Alternative Text: gives the description of the image if user prefers it to be different from the image name.
  • Width: specifies image’s width.
  • Height: specifies image’s height.

User may lock the image proportions by pressing CKEditor lock.png or may return to the original image size by pressing CKEditor return.png.

  • Border: specifies the size of the border you want to place around the image.
  • HSpace: defines the size of the  horizontal gap.
  • VSpace: defines the size of the vertical gap.
  • Align: specifies the alignment of the image. User may choose between Left or Right.

In a "Preview" window user may view how the window looks with the added image.

Pressing "OK" inserts the image with the specified properties.

Link

The second bookmark relates to "Link":

CKEditor images link.png

  • URL: defines the URL address of the image. You may also use the "Browse Sever" in order to browse the files.
  • Target: defines the target of the image (for advanced users). User may choose from New Window ( _blank ), Topmost Window ( _top ), Same Window ( _self ) or Parent Window ( _parent ).

Upload

Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.

The third bookmark is the "Upload" section:

CKEditor images upload.png

  • Upload: specifies the location of the image file on your local hard drive. User may also use "Browse" instead of typing the location manually.

Pressing "Send it to the Server" sends the image to the server.

Advanced

This bookmark is only for advanced users:

CKEditor images advanced.png

  • Id: specifies image's ID.
  • Language Direction: sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
  • Language Code: specifies the language code e.g. en, pt, pl.
  • Long Description URL: specifies the description of the page.
  • Stylesheet Classes: specifies the name of the CSS class.
  • Advisory Title: specifies the description of the target object.
  • Style: specifies the style.
Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKEditor_3.x/Users_Guide/Rich_Text/Images&oldid=4419"