Some tips on using the html editor in XOOPS

Posted by Web Master
Date August 31, 2011 | Topic: Department News

The html editor in XOOPS is called CKEditor. It is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it.

It may take some time to master CKEditor. The general rule is to treat it as a regular Microsoft Word process, except that table creation has to be treated carefully to fit our new website. For those who want to read detail instructions, here is its Users Guide.  Below are some tips to assist with your editing.

  • The second-last button in the Tool Bar is the "Maximize" button. It will enlarge the editing area to the whole browser. When you are done editing, click it to shrink to the normal size. Don't use the Back button in a browser, otherwise you will lose all editing changes.
  • If you want to upload some files, click the "Link" button. In the new window, click "Browser server". A new bigger window will show up. Now you can create your own folder by clicking "New folder" and uploading files into it. Clicking a file will give you an option to "Select" which creates a link in your editing area. To upload a photo and show the image, use the "Image" button in the Tool Bar. Since you are able to delete files, make sure to create your own folder(s) and not to delete other people's files.
  • To copy pure text, you could click the "Source" button to show raw html text and paste it into the proper area. This is to avoid any unnecessary font information.
  • Another way to copy/paste is to copy text to a text editor such as Notepad or WordPad and then copy/paste to CKEditor.
  • During copy/paste, you might see many excessive spaces. Delete them whenever possible to make the text look tidy. Sometimes you may have to click the "Source" button to show the raw html and remove them at proper locations. For example, this html code "<p>&nbsp; </p>" leaves a large space between paragraphs or the end of a table.
  • If you want to break a page at a certain point for printing or PDF generation, please click the "Insert Page Break for Printing" button in the Tool Bar to insert a break.
  • Update: If you want to insert a table, click the "Table" button in the Tool Bar and make sure to change the Width to 100% or less. Do not use any pixel width. This 100% table is within a table with a width of 670pixel in XOOPS and will be the proper size when generating a PDF file. You can change the Width later on by right clicking on the edge of a table and choosing "Table properties". There is an option to click "Width". Choose 100% or less. Please don't drag the edge of the table to enlarge or shrink. To change the width of a cell in a table, right click the cell (the first row is enough), choose "Cell", and then "Cell Properties". Then choose a proper percentage in "Width" (again, do not use pixel width).
  • Relatively simple procedure for inserting tables: Though tables and cells with a percentage width work best, it is too cumbersome. The following example shows a relatively simple procedure because a table resize plugin is installed. The trick is that cell width can be set to pixel when the table is small and the table width is still a percentage. When a table expands, all cells will expand proportionally.
    1. Insert a table by clicking the "Table" button and changing the Width to 100% or less (default is 90%).
    2. Fill contents to cells (ignore cell width at this moment).
    3. Shrink the editor to a normal size if you use the "Maximize" button. Then move your mouse over the column border to see the cursor change that indicates that the column can be resized. Click and drag your mouse to set the desired width; however, do not drag the far righthand column since it will alter the width of the table to pixel again.
This article comes from Department of Statistical and Actuarial Sciences
The URL for this story is: