About Formatting Text
In addition to files prepared using word processing and page layout
applications, it is also possible to edit simple documents directly
using or
. These can be:
- Plain text: with no layout and styling applied to
them at all, and formatted text. Use the "plain text" tab when adding
or superseding the file.
- Formatted text: fragments of HTML to which font
styles, colours and sizes can be applied, pictures, tables and links
included, rather like Google Docs. Use the "formatted text" tab when
adding or superseding the file.
Using the formatted text editor
Ensembling uses
TinyMCE
in the "formatted text" tab to provide direct editing of HTML.
The format in formatted text is saved in the file using HTML
markup. It is not quite an HTML page as would be displayed by a
browser because it does not have header and trailer information that a
complete HTML file would have. However, this is to our advantage
because it means these HTML fragments can be embedded in
larger web pages. Therefore the editor can be used to draft things
like news items for review to be placed elsewhere later on. The editor
panel is, of course, an example itself of the fragment of HTML embedded
within another web page.
The editor uses buttons and pull down menus in much the same way as
other formatting text applications. Select the text to which
formatting is to be applied and press the relevant button to apply
it. For example, to embolden text, select it and press the Bold
button. You can also use familiar keyboard shortcuts:
- CTRL+B: bold (Clover rather than CTRL on Macs)
- CTRL+I: italic
- CTRL+U: underline
- CTRL+X: cut
- CTRL+C: copy
- CTRL+V: paste
- CTRL+Z: undo
- CTRL+A: select all
- CTRL+L: insert or change link
Other key combinations continue operate your browser. In
particular, many browsers use CTRL+W (Clover+W) to close the browser
window, which is definitely not what you want to do here.
As the window is quite small it is useful to know that you can
press the 'large' button
so that the editor occupies the whole
window, and the little up arrow after all the other buttons to remove
even the buttons.
Including pictures in formatted text
Formatted text is a fragment of HTML. Like all HTML, images
are included by reference to another file or internet
location. Therefore, when you press the editor button to insert (or
replace) an image you are asked to supply a URL. This may be:
- a reference to an image already on a web page somewhere, or
- one of your own pictures on your computer,
- a picture already uploaded to Ensembling
Referencing pictures on another website
For images on another website which will continue to be referenced
on that website, you can just past the image's URL. However, this will
rarely be the address of a web page as shown in the browser's address
bar as, like the page we are preparing, the image will be an embedded
in that page by reference, not the page itself. You can, however,
obtain the URL of a picture you can see in a web page: most browsers
allow you to right click over the picture and choose Properties. You
can then copy the URL from the Properties panel. Some browsers let you
copy the URL directly: for example in Firefox you can right click over
the picture and choose 'Copy Image Location'.
Using your own pictures
The more likely requirement, however, is for you to be
embedding your own images which you have as files on your own
computer, or already uploaded to Ensembling.
To use such pictures, it is helpful to organise them so that they
are in the same Ensembling folder as the formatted text (or a child
folder, if you want to collect all the images together), though you
don't have to upload all the images in advance (see below). This
organisation is helpful because you can then download the HTML file
and all the related images in one go using
download all. Furthermore, the
HTML downloaded will then contain relative image references so that
the HTML will then refer to the
downloaded images and if
included on another website, will continue to reference the images
relative to the page concerned.
To include your own pictures click the 'Image' button and then
'Browse Server'. This opens a new window on the parent folder of the
Ensembling document you are working on (which is where you will
have stored your images if organised as described above). You can then
navigate to the image you want and press
the button. This insert
the desired URL in the editor's URL field.
(You can also use the link obtained from 'Properties' on the
right-button menu in your browser as above, but not the URL in the
address bar for the same reason, that the page is not the image alone
but a larger page in which the image is just one element).
Getting formatted text out
You can, of course, copy and paste the formatted text from the
formatted text tab editor pane
in . How and whether the
formatting is reproduced where it is pasted depends on the application
it is pasted into.
However, when there are pictures, this will include verbatim links
to them in Ensembling. You are only logged into Ensembling
through your browser and only your browser can display them. Therefore
you will not see any pictures if you just copy and paste.
It is better, therefore, to
download
the file. This substitutes links to Ensembling
with
relative links (see above). Providing you also download
the pictures themselves into folders with the same structure as those
in Ensembling the pictures show display correctly.
In particular, if you have organised the pictures and text in the
same folder as explained above,
then will fetch all
the related content in the correct relative locations for the links to
images in the HTML formatted text to be correct.
formating plain text html fragment editor