Authoring content in Content Editor

  Written by The Jahia Team
 
Marketers
   Estimated reading time:

Content Editor is an application that you use to create content and publish it to your sites. The type of content that you can add to a page depends on its content type. Jahia includes default content types and developers can create custom content types for your organization.

The following example from the sample Digitall site shows how you can edit a Company content type. You edit the company properties in the left of the editor and preview content on the right. The preview updates each time that you save.

Content-Editor-editing-company.png

Note: If you are a system administrator and need to know about the permissions that you should assign to roles, see About Content Editor permissions
Note: If you are a developer and want understand how Content Editor UI is generated, see Creating and managing content types

Creating content in Content Editor

You open Content Editor from Page Composer or jContent to create new content for your sites. The example below shows how to create rich text content.

To create content:

  1. Do either of the following:
    • In Page Composer, click Any Content in an area on the page.
    • In jContent>Content Folders, click New Content in the top toolbar.
      jcontent-new-content.png
  2. In the Select Content Type dialog, select a content type and click Create. For example, Content:Basic>Rich text and click Create.
    Content-Editor-selecting-content-type.png
  3. In the Create Rich text page, provide content and click Save.
    content-editor-rich-text.png

    The content object is created and content previews in the Preview tab.
    content-editor-preview.png

When you save, your content updates the content in the Preview tab.

Editing content in Content Editor

You can edit content in Content Editor by opening it from Page Composer or jContent.

To edit content in Content Editor:

  1. In jContent, select your content in the navigation menu.
  2. In the main window, right-click on the content that you want to edit and select Edit.
    content-editor-edit.png
  3. In Content Editor, edit your content and specify settings as needed.
  4. Click Save to save your content. Your content refreshes in the Preview pane.

Now you can return to jContent or publish your changes.

Publishing content

When content is complete, you can publish it to make it available to your visitors. You can request a publication to start a publication workflow, or publish your content immediately, depending on your permissions and role. When you start a workflow, the content is sent to other users for review.

Note: To publish content without review, you require the Publish permission.

To publish content in Content Editor:

  1. Navigate to your content and open it for editing in Content Editor.
  2. Ensure that all changes are saved. To avoid any confusion about what will be published, the Publish button is disabled until you save your changes.
  3. Depending on your permissions, you'll be able to start a publishing workflow by requesting publication or publish directly.
    • To start a publishing workflow, click the Request publication button. The Publication dashboard opens. For more information on requesting publication through a publication workflow, see Publication dashboard.
      ce-request-unpublication.png
    • To publish content immediately, at the top right of the page click Publish Now. Once you clicked on Publish now, you can leave the page.
      publish-now.png 
  4. A message indicates that publication is in progress. A message then displays at the bottom left of the page indicating that publication is in a queue.
    publication queued

After your content is published, it is available to site visitors if it is used in a page or application on your site.

Unpublishing content in Content Editor

If necessary, you can unpublish content to make it unavailable on your live sites or applications.

To unpublish content in Content Editor:

  1. Navigate to your content and open it for editing.
  2. At the top right of the page in Content Editor, click the down arrow button and then select Unpublish.
    unpublish-content.png

    A message displays at the bottom left of the page indicating that the content is unpublished.
    publication queued

The content is no longer live in your sites and applications.

Classifying your content

Classifying content has many benefits. For more information including how you should classify your content, see Classifying content in Jahia. The following sections show how to use tags and categories.

Classifying content with tags

Tags are the easiest way to classify content. 

To add tags: 

  1. Open your content for editing in Content Editor.
  2. In Categories, click on the toggle next to Tags.
    ce-activate-tags.png
  3. Start typing the tag you want to add to your content.
    selecting-tags.png
  4. Select a matching tag by clicking on it or pressing Enter. In the example here "digitall" is the matching tag. The tag has been selected for your content.
    ce-tag-added.png
  5. If the existing tags don't match how you want to classify your content, you can select press Enter to create a new tag.
  6. Click Save.

Classifying content with categories

Categories are another way to classify your content. Categories can be created and edited from the Category Manager and require specific permissions. 

To select categories for your content:

  1. Open your content for editing in Content Editor.
  2. In Categories, click on the toggle next to Categorized.
    ce-activate-categories.png
  3. You can then start typing in the input to search for the category you want to select, or you can click on the input to expand the category list.
     
    ce-select-categories.png
  4. Click Save.

Editing rich text with CKEditor

You edit rich text in CKEditor inside Content Editor. CKEditor can be heavily customized by the developers you working with. There are simple and complex configurations available, custom plugins, and they can be set depending on the content type or the template used by your site. 

Selecting images, pages and content references with pickers

When you're editing a content property that is meant to reference an image, a file, a page, or other content, you'll see a reference field just like the example below.

ce-reference-link-field.png

Depending on the reference type, a different picker will open. Here are the different types of pickers that you might use when editing references: 

  • Image picker
    Used to select images
  • File picker
    Used to select any kind of files (including images)
  • Editorial link picker
    Used to select pages or contents that can be rendered as full page
  • Editorial picker
    Used to select any content
  • Folder picker
    Used to select folders that contain files
  • Content Folder picker
    Used to select folders that contain content
  • Category picker
    Used to select categories
  • Site picker
    Used to select sites
  • User picker
    Used to select users
  • User group picker
    Used to select user groups

Searching in the picker

When using a picker, you can use the search input to find the item you need.  The search will be performed on all content properties, including title, description, keywords, tags and system name. The search highlighted:

  • In yellow, is the word you're searching for 
  • In orange, is the location you're searching in. The search will apply to subpages and subfolders.
  • In green, is the number of search results. If there are more than 20 items, you can simply scroll down and the picker will load the next results
    ce-picker-content-search-organic-3.png

Copying values from another language

You can copy content properties values from one language to another by using Copy from languages. This feature can help you to reuse existing values or kickstart your translation. For example, a translator can copy new English content to the Spanish version of content and then translate the values.

To copy from languages:

  1. Open content for editing in Content Editor and click Copy from languages. The Copy from dialog opens.
    copy-from-three-dots.png
  2. In the Copy From dialog, select the language that you want to copy from.
    copy-from-dialog-select-language-to-copy.png
  3. Click Apply. When you click apply, all the values from the other language are copied to your current selected language. All existing values in your current language are overwritten.
    You should now see all the values copied from the other language.
  4. The Unsaved changes badge appears in the top toolbar. If you made a mistake, you can click on the back button in Content Editor header and select Discard changes. Otherwise, save your changes.

Marking content as work in progress

You can mark content as Work in progress (WIP) in Content Editor to prevent the publication of content. This avoids the unexpected publication of new or modified content. For more information on how work in progress affects publication, see Understanding work in progress content. Contact your administrator if you want to automatically mark new content as work in progress.

Note: Content marked as WIP and also marked for deletion can be published. The WIP flag does not prevent the publication of content marked for deletion.

Any editor or contributor can edit content previously saved as WIP. To prevent others from editing a content, you must lock the content. There are a few subtleties depending if the site is available in one or several languages.

To mark content as work in progress:

  1. Open content for editing in Content Editor and click the Mark as Work in progress button. The Work in progress (WIP) dialog opens.
    wip-multiple-languages.png
  2. In the Work in progress (WIP) dialog, select Work in progress. Click Done.
    wip-dialog-multiple-languages.png

    In the top toolbar, the Unsaved changes badge in the toolbar indicates that changes are not yet applied. The WIP badge indicates which languages work in progress applies to.
    wip-save-changes-crop362x130.png
  3. In Content Editor, click Save in the top toolbar to apply changes.

Content marked as work in progress displays differently in Page Composer and jContent.

  • Page Composer
    A Work in Progress message displays and content is grayed out, as shown in the following example.
    page-composer-wip.png
  • jContent
    A wrench icon displays beside content, as shown in the following example.
    wip-jcontent-wrench.png

Changing the order of content in lists

You can order list items in content either manually or automatically. Content that is available for ordering has the Content Lists and Ordering section. With automatic ordering you specify sorting conditions, for example, order by last modified date in ascending order to show most recent content first.

The Content Lists and Ordering section is only available when editing a list or an area. 

Manual changing a list order

You can manually move content up or down the list by dragging and dropping one of the content items.

ce-list-ordering.png

Automatic list ordering

You can enable automatic list ordering by specifying sort criteria such as the last date content was modified.

To enable automatic list ordering:

  1. Open content for editing in Content Editor.
  2. Select Advanced options>List ordering and clear the Use manual ordering checkbox.
  3. In First field to order by select criteria to sort content by. In Order direction, select the sort direction, either ascending or descending.
  4. If necessary, provide further sort criteria in the Second field to order by and Third field to order by.
  5. Click Save.

Understanding Content Editor layout 

Content Editor is divided into three main areas. The header at the top, the form at the left, and the preview pane on the right.

ce-layout.png

The header includes:

  • a back button
  • the display name of the content
  • Save and Publication options
  • badges to describe the content status
  • a language switcher
  • tabs
  • A menu with 3 dots where you can access work in progress and copy from languages functionality

The form hierarchy is made of 3 levels:

 

content-editor-hierarchy.png
 

  • Sections
    Corresponding to "itemType" for developers
  • Fieldsets or dynamic fieldsets
    Corresponding to mixins and dynamic mixins for developers
  • Fields
    Corresponding to content properties

The preview panel that displays a preview of content.

Understanding the Content Editor form

Content Editor includes the following sections by default:

  • Content
    The first section you'll see when editing content. It is meant to host any field that is editorial. Any value that you set in the content section is likely to be seen by the visitors on your site. 
  • Categories
    Helps you classify your content with tags and categories. 
  • Metadata
    Information about your content, for instance, top story, author, and persona
  • Layout
    Includes by default the choice for the view. A view contains the logic that renders your content. Developers can create several views for one content type and make them available to you. As a best practice, any field regarding the presentation of the content can be added to the layout section.
  • Options
    You can use the Options section for different purposes. For instance, geolocation, address, or Google Tag Manager ID
  • List ordering
    Displayed for contents of type list or for contents that have sub-contents ("children") that can be ordered. This section cannot be extended with a custom field. 

It is possible to show or hide sections depending on the permissions of the editor. For more information, see About Content Editor permissions.

Understanding a Content Editor field

Whether it's representing a simple input, a rich text, a choicelist, an image, or any other property type, a field in Content Editor always have the following components:

content-editor-field.png

  • Name
    The name of the property. In this example, it's "News title".
  • Badges
    Badges are used to inform you about the field. In this example, you can see that the property is required and that the current translation is work in progress.
  • Helper/description
    A short description that can help the editors to understand how this field will be used
  • Selector
    The UI component that will be used by the editors to fill the value, such as a simple input, date picker, or reference field. In this example, it's a simple input.
  • Validation feedback
    A left bar and a custom message if needed to display any validation error. In this example, there is a left bar because the field is required and the value is empty.
  • Value
    The field value that is typically provided by editors, but can also be filled by default if it's configured in your content definitions. 
Note: The title, helper, selector type, validation logic, and default values can be configured by the developers you're working with. 

About Content Editor preview

The preview pane provide editors with relevant feedback when they're editing content inside pages or inside folders when the content is used in headless. Here is how the preview is managed:

  • When the content you're editing has a jahia template: a page, or a content with a content template (like our news example), then the preview will render the content as a full page using this template.
  • If you're editing a content that is inside a page,  then Content Editor preview loads the page and zooms in the content. By loading the CSS of the whole page, Content Editor preview is more accurate. It can happens that
  • If the content you're editing is inside a folder and doesn't have a template, (i.e. for headless use cases) then Content Editor preview loads a specific "view". This view can be added by the developers you're working with: the name of the view needs to end with .cm.jsp). 
For headless content, developers can  provide an accurate preview of the content, by creating a new view. This view has to be named <mycontentype>.cm.jsp, it is then possible to add an iframe of the external application, so that editors see how their content is actually rendered when they save their content.