Basics

Basic options of TinyMCE.

The default TinyMCE editor will look like this:

*** Settings ***

Resource  plone/app/robotframework/server.robot
Resource  plone/app/robotframework/keywords.robot
Resource  Selenium2Screenshots/keywords.robot

Library  OperatingSystem

Suite Setup  Run keywords  Suite Setup  Test Setup
Suite Teardown  Run keywords  Test teardown  Suite Teardown

*** Variables ***

${FIXTURE}  plone.app.robotframework.PLONE_ROBOT_TESTING
@{DIMENSIONS}  1024  768
@{APPLY_PROFILES}  plone.app.contenttypes:plone-content


*** Keywords ***

Suite Setup
    Run keyword if  not sys.argv[0].startswith('bin/robot')
    ...             Setup Plone site  ${FIXTURE}
    Run keyword if  sys.argv[0].startswith('bin/robot')
    ...             Open test browser
    Run keyword and ignore error  Set window size  @{DIMENSIONS}

Test Setup
    Import library  Remote  ${PLONE_URL}/RobotRemote

    Run keyword if  sys.argv[0].startswith('bin/robot')
    ...             Remote ZODB SetUp  ${FIXTURE}

    ${language} =  Get environment variable  LANGUAGE  'en'
    Set default language  ${language}

    Enable autologin as  Manager
    ${user_id} =  Translate  user_id
    ...  default=jane-doe
    ${user_fullname} =  Translate  user_fullname
    ...  default=Jane Doe
    Create user  ${user_id}  Member  fullname=${user_fullname}
    Set autologin username  ${user_id}

Test Teardown
    Run keyword if  sys.argv[0].startswith('bin/robot')
    ...             Remote ZODB TearDown  ${FIXTURE}

Suite Teardown
    Run keyword if  not sys.argv[0].startswith('bin/robot')
    ...             Teardown Plone Site
    Run keyword if  sys.argv[0].startswith('bin/robot')
    ...             Close all browsers

*** Test Cases ***

Show TinyMCE
    Go to  ${PLONE_URL}
    Click element  css=#contentview-edit a
    Wait until element is visible
    ...  css=#mceu_16-body
    Capture and crop page screenshot
    ...  ${CURDIR}/../../_robot/tinymce.png
    ...  css=#formfield-form-widgets-IRichText-text

On top you can see the toolbar, below the text area with the actual content you are editing and at the bottom a status bar. If you drag the lower right corner you can make the editor window bigger or smaller.

The editor allows you to style text, add images and links, add tables and more.

Note

Although it may look like a word-processor on your desktop computer, editing text for the web is slightly different. You would create headlines by selecting the “Formats” dropdown, and then choose “Header 1” (biggest) to “Header 6” (smallest).

You would not choose the font and size directly, those are set up by the theme. This will ensure a consistent look over your site, and it is also important to make content available to different devices (phones, tablets) and to ensure the best result for people with disabilities.

The toolbar icons and dropdowns generally work as you would expect.

Some of the more interesting ones are explained in the sections Inserting images, Inserting links and Inserting tables.

If you want to get at the pure HTML source code of your text, just use the ‘Tools’ menu.