DOC-8                      
Creative Commons Attribution 3.0 Unported License. 
12 December 2013          To view a copy of this licence, visit http://creativecommons.org/licenses/by/3.0/  
Using the WYSIWYG HTML editor  
Purpose: This third-party editor, called ‘CKEditor’ is used to create web pages in a 
number of tools within WebLearn, such as 
Resources
Forums
Announcements
etc. 
Default permissions: There are no permissions associated directly with this editor. 
Access to it depends upon permission settings for each tool that uses it. 
This guide will show you some of the most commonly-used features of the WYSIWYG 
editor. WYSIWYG  is an acronym for ‘What You See is What You Get’, referring to the 
fact that you can create web pages without having to write the source code (HTML).        
A comprehensive User’s Guide is available by clicking on the 
icon within the editor. 
Other useful step-by-step guides to read in conjunction with this one: 
Building the Home Page 
Resources 
Attaching files in WebLearn 
All step-by-step guides are available from weblearn.ox.ac.uk/info 
Introduction 
This editor will work with the following browsers: 
Firefox: all major releases starting from version 3 
Internet Explorer: 6.0, 7.0, 8.0, 9.0 
Safari: version 5 upwards 
Opera: latest stable version 
Google Chrome: latest stable version 
There is much more help available online for this editor than is either necessary or 
practicable to include in this document. Click on the 
icon on the toolbar in the HTML 
editor to access online help. This is a comprehensive User Guide explaining all the icons and 
their functions. 
It is not essential to be familiar with HTML in order to create web pages within WebLearn; 
however, the excellent W3C schools HTML site: http://www.w3schools.com/html/ may be 
useful if you ever need to manipulate the HTML source code. 
Click the User Guide for 
more information about 
the editor. 
How to convert pdf into powerpoint presentation - SDK control service:C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF in C#.net, ASP.NET MVC, WinForms, WPF
Online C# Tutorial for Creating PDF from Microsoft PowerPoint Presentation
www.rasteredge.com
How to convert pdf into powerpoint presentation - SDK control service:VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to PDF in vb.net, ASP.NET MVC, WinForms, WPF
VB.NET Tutorial for Export PDF file from Microsoft Office PowerPoint
www.rasteredge.com
IT Services 
To increase the size of the edit window click the 
icon on the editor toolbar. Click the same 
icon again to minimise the edit window and display the 
Continue
button. 
The HTML WYSIWYG editor toolbar – common functions 
To find out the function of a particular icon, simply hold the mouse over the centre of the 
icon and within a couple of seconds, a 'tool tip' will appear. The icons that are available to you 
at any one time are highlighted, perhaps in colour, whilst those that are unavailable are 
greyed out.  Some icons - such as copying and pasting - will become available when you have 
carried out some action that may be outside of WebLearn, e.g. selecting text in a Word 
document. 
Good practice tips: 
You should save your work frequently. It is good practice to do this at least every five 
minutes; computers do fail; web browsers do crash; contractors do cut through power cables; 
and WebLearn sessions do time out! Also, if you click away to another tool in WebLearn 
without saving your HTML page, it will be lost. 
In general, if you lose a piece of work when using this editor then it will be gone forever; there 
is very little that can be done to retrieve lost content. 
The editor does not have 'locking': if you think that there is a possibility that somebody else 
may be editing the document at the same time as you then please check - WebLearn will not 
currently warn you of situations like this. The person who saves last will overwrite changes 
made by another. 
List of icons 
These icons represent typical functions that are found in word-processing software such as 
Microsoft Word or Open Office. You can find out more about them in the CKEdit User Guide. 
SDK control service:VB.NET PowerPoint: Use PowerPoint SDK to Create, Load and Save PPT
starting guide for PPT document, we divide this page into three parts a fully customized blank PowerPoint file by using the smart PowerPoint presentation control
www.rasteredge.com
SDK control service:C# Create PDF from OpenOffice to convert odt, odp files to PDF in
public override void ConvertToDocument(DocumentType targetType, Stream stream). Description: Convert to PDF/TIFF and save it into stream. Parameters:
www.rasteredge.com
IT Services 
Keyboard shortcuts 
Many of the functions in CKEditor have equivalent keyboard shortcuts which are the same as 
those found in common word-processing packages such as MSWord or Open Office. 
CTRL+A highlights the whole editing area 
CTRL+B changes the highlighted font to bold 
CTRL+C copies the highlighted area to the clipboard 
CTRL+I changes the highlighted font to italic 
CTRL+L opens the Link window 
CTRL+U changes the highlighted font to underlined 
CTRL+V or SHIFT+INSERT pastes the data from the clipboard 
CTRL+X or SHIFT+DELETE cuts the highlighted area to the clipboard 
CTRL+Y or CTRL+SHIFT+Z performs the redo function 
CTRL+Z performs the undo function 
CTRL+Home 
jumps to the beginning of the document
CTRL+End jumps to the end of the document 
CTRL+right click displays the spell check dialog box 
Pasting text  
To paste a text fragment, start by cutting or copying it from another source. Depending on 
the security settings of your browser, you may either paste directly from the clipboard, or you 
may be prompted to use the 
Paste
dialog window: 
You must 
select the text 
You must 
select the text 
SDK control service:VB.NET PowerPoint: Merge and Split PowerPoint Document(s) with PPT
sample code in VB.NET to finish PowerPoint document splitting &ltsummary> ''' Split a document into 2 sub Note: If you want to see more PDF processing functions
www.rasteredge.com
SDK control service:VB.NET PowerPoint: VB Codes to Create Linear and 2D Barcodes on
PowerPoint PDF 417 barcode library is a mature and easy-to-use barcode Install and integrate our PowerPoint PLANET barcode creating tool into VB.NET
www.rasteredge.com
IT Services 
1.
Copy the existing text in a manner supported by the word-processing program, for 
example by using 
Ctrl C
2.
Put the cursor in the HTML editor window and press the 
Paste
button 
Alternatively you can use the 
Ctrl V
shortcut, as usual.  
3.
If direct access to your clipboard is blocked by your browser settings, you will be 
asked to paste the text into the 
Paste
dialog window using 
Ctrl V
. Then click 
OK
Note that images in the original document will not be copied by this method; they will need 
to be inserted separately – see the Using images section later in this guide. 
Paste from Word 
CKEditor allows you to preserve basic formatting when you paste a text fragment from 
Microsoft Word. To achieve this, copy the text from a Word document and paste it using one 
of the following methods:  
Press the 
button on the toolbar  
Use the Ctrl+V shortcut on your keyboard.  
Note this method works even when the browser blocks CKEditor toolbar's access to the 
clipboard, so this is the most reliable way of pasting the text. 
Paste as Plain Text 
Text that has been copied from other sources may bring unwanted formatting code with it 
when it is pasted, or you may want to strip existing formatting from it. The HTML editor does 
this via the 
Paste as plain text
button 
. To do this: 
1.
Copy the existing text in a manner supported by the other source, for example by 
using 
Ctrl C
2.
Put the cursor in the HTML editor window and press the 
Paste as plain text
button 
on the toolbar. This option opens up the 
Paste as Plain Text
window into which 
you should paste your text before saving by clicking the 
OK
button. 
Place the cursor in the box 
and paste the text by 
pressing  
Ctrl V 
Press OK when 
finished. 
SDK control service:VB.NET PowerPoint: Sort and Reorder PowerPoint Slides by Using VB.
you can choose to show your PPT presentation in inverted clip art or screenshot to PowerPoint document slide & profession imaging controls, PDF document, image
www.rasteredge.com
SDK control service:VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Convert OpenOffice Spreadsheet data to PDF. Export PDF document from OpenOffice Presentation. Turn ODT, ODS, ODP forms into fillable PDF formats.
www.rasteredge.com
IT Services 
Once text has been pasted in this manner, it can then be formatted by using the formatting 
icons on the HTML editor toolbar. 
If problems with unwanted formatting persist, there are two possible avenues to investigate:  
1.
Once text has been pasted in the editor window, click the 
Source
button (
on 
the toolbar to view the HTML code behind the text. Make appropriate edits directly 
within the code. 
2.
Instead of pasting via the 
Paste as plain text
icon, paste the copied text to a plain 
text editor such as Microsoft Notepad, and then copy it from there to the WebLearn 
HTML editor. 
Spell checking 
The CKEditor comes with an integrated spell checking solution. There are two options: 
Spell-Check-As-You-Type is the default option – this checks the spelling of the text 
in the editing area immediately you type it and marks all errors with a red wavy line.  
The Spell Check dialog window – Use  CTRL+right click
to open the 
Spell Check
window which enables you to check the spelling of particular words in the document 
and see a list of alternative suggestions.  
Place the cursor in the box 
and paste the text by 
pressing  
Ctrl V 
Press OK when 
finished. 
Use 
Ctrl+right click on a 
misspelled wordto 
open the Spell Check 
window 
SDK control service:VB.NET PowerPoint: Add Image to PowerPoint Document Slide/Page
to add, insert or delete any certain PowerPoint slide without a multi-page PPT document into 2, 4, 6 powerful & profession imaging controls, PDF document, tiff
www.rasteredge.com
SDK control service:C# PDF Text Extract Library: extract text content from PDF file in
But sometimes, we need to extract or fetch text content from source PDF document file for word processing, presentation and desktop publishing applications.
www.rasteredge.com
IT Services 
Source code – for experts 
The HTML editor provides the 
Source
button (
to allow viewing of your text as raw 
HTML code.  
You need some practice and experience to edit the code in the HTML source view. If you 
don't have experience in HTML you should use the WYSIWYG (what-you-see-is-what-you-
get) view. 
Making links 
To make a hyperlink, first create the text which will link to the hyperlink; this text should be 
succinct and should describe the target document - do not write 'click here' as this is of no use 
for non-sighted users. Then highlight the text and click on the 
Link
button 
Linking to a specific URL address  
A popup window called 
Link
will appear upon pressing the 
button on the toolbar. You can 
specify the type of link and the target of the link. 
Link Type specifies the type of 
link you want to put in the 
document. You can choose from 
URL, Link to anchor in the text, 
or E-mail. 
Specifiy the web address you 
want your link to refer to. 
Press 
on the 
toolbar to view the 
the 
HTML code. 
Press 
again to return to the 
WYSIWYG view. 
IT Services 
If you wish to make the link open in a new browser window click on the 
Target
tab and 
choose 
New Window
from the dropdown list of options. If linking to another WebLearn site 
choose 
Topmost Window
(to avoid having a WebLearn site open within another WebLearn 
site). 
In order to make your pages accessible (so that, for example, non-sighted users can use your 
material effectively), you should enter an 
Advisory Title
via the 
Advanced
tab. As an 
example, enter the title ‘Oxford Style Guide’ if linking to the University’s guide to online style. 
This title will be shown whenever the cursor hovers over the link on the HTML page. 
Linking to files stored within WebLearn 
If you want to make a link to a file stored within the 
Resources
tool then use the 
Browse 
Server
option to navigate to the desired document.  See the 
Using the Link icon
in the 
HTML editor section of the WebLearn guide ‘Attaching files in WebLearn’ for 
instructions on the subsequent steps. 
Click on the Target 
tab and select how 
you want the link 
to open. 
When finished, press 
OK to finish and return 
to the text editor. 
Enter an Advisory Title on 
the Advanced tab, for 
example Oxford Style Guide 
if linking to the University’s 
guide to online style. 
IT Services 
Remember to check that the document to which you are linking is set to be visible to the 
appropriate set of WebLearn users in your site.  
If your file is stored on another site, make sure that your users can access the file. If the link is 
on a publicly-visible page then the target of the link should also be public; if the link is on a 
page which is only visible to a certain group, make sure that the target is also visible to the 
same group.  
Linking to sections in the current document 
With long web pages it is often a good idea to present an index at the top; this will allow 
people to quickly jump to a section that catches their interest. To create an index: 
add anchors to all your section headings by selecting the heading and clicking on 
the 
Anchor
button 
in the toolbar and typing in a short descriptive name; 
create an ‘index’ section at the top of the document by supplying a heading and 
typing in each of the section headings as a bulleted or numbered list; 
highlight each item in the index one at a time, click on the hyperlink button 
and on the first screen, change the 
Link Type
to 
Link to anchor in the text
     
A drop down list of all your previously-named anchors will appear, select the one 
corresponding to the index item and then save. Do the same for each item in your 
index.  
Change the link type to Link 
to anchor in the text
Use the Browse Server 
option to navigate to the 
desired document in 
Resources. 
Then select the 
anchor to which the 
link should jump  
IT Services 
Using images 
Good practice tips:  
The best way to use images in the HTML editor is to house the desired image in 
an area within the 
Resources
tool - it may be an idea to create a special 'images' 
folder for this purpose. The 
Resources
guide explains how the images folder can 
be hidden from users. 
You also need to make sure that the image is visible to your readers; if you use an 
image on a public page then the image file itself must be publicly visible.  
You should never link to external images as their location may change and 
users of Internet Explorer will probably see warnings about the page containing 
“non secure items”.  
To insert the image onto a page place the cursor where you want the image and then click on 
the I
mage
button 
If the image is not already stored in 
Resources
then you may upload it by browsing your 
desktop, selecting the image and then clicking 
Upload
;
otherwise use 
the 
Browse Server 
button and navigate to the image within your 
Resources
folders (see next screenshot).  
Good practice: You should supply 
a very short description in the 
Alternative Text area – this text 
is read out for non-sighted users 
using screen readers. 
Click the 
Browse Server 
button to explore your 
Resources area. 
IT Services 
10 
Once the image has been inserted into your page you can click on it using the right mouse 
button to visit the properties pages to make changes to it, such as changing the dimensions. 
You can also resize the image by clicking and dragging its ‘handles’. 
Using tables 
The HTML editor makes it easy to insert a table into a document. Simply click on the Table 
button 
to access the Table Properties dialogue. This allows you to set the number of rows 
and columns and also the table width. We would
strongly recommend
that the Width be 
changed from its default of 500 pixels to 90 or 100 percent. This will mean your table will 
display better to most users.  If you do not want a table border then set the Border size to 
be 0 (zero). 
Click the 
Browse
button to upload an 
image from your 
desktop 
Click on ‘Image 
Properties’ to alter 
how the image is 
rendered. 
Documents you may be interested
Documents you may be interested