Examples Tinymce

Docu

Master Pages

Docu

To edit data, please login.

Tinymce is a great html editor. It offers the following features:

  • format text
  • insert images

Steps to do to integrate tinymce into the master data form:

  • datadefinition
    • script: tinymce.min.js
    • script: pages_datadef.js
    • form, field content, class="tinymce"
  • pages_datadef.js
    • call back functions
      • dataCreateStructure(..)
      • dataLoad(..)
      • dataNew(..)
      • upload.settings.dataAfterUpload(..)
    • function
      • tinymceInit(image_list,disabled)

Attention only landscape images can inserted in this example!

SQL Script

kitsamples/pages/k8pages.sql

Some table columns are prepared for a second example. The used columns for example are:

  • pageID
  • marking
  • headtitle
  • headdescrtiption
  • h1
  • sort
  • content
  • creatorID
  • datetimecreated

Datadefinition

kitsamples/pages/pages.json

After generating the definition the following properties are set:

  • displaycolumn
  • head
  • foot
  • headertitlecolumn
  • headerdescriptioncolumn
  • headtitle
  • headdescrtiption
  • masterdata
    • rights
    • sql_statement
    • include
    • upload
  • jsonform.form
    • sort
    • headdescription
    • content

JavaScript

kitsamples/pages/pages_datadef.js

The JavaScript file "pages_datadef.js" extends the datadefiniton with call back functions.

The textarea, to which tinymce is added, is:

  • content

This variables are set to allow tinymce to display the image list of this record and to bind it to the "content" field:

  • basetyp="k8pages"
  • field_baseID="pageID"
  • field_tinymce="content"

This are the necessary call back functions (masterdata section):

  • dataCreateStructure(...)
    • tinymceInit("")
  • dataLoad(...)
    • image_list is set (url for images)
    • disabled is checked
    • tinymceInit(image_list,disabled)
  • dataNew(...)
    • tinymceInit("")
  • upload.settings.dataAfterUpload=tinymceInitinline
    • tinymceInit(image_list)
      to update the image_list

The init of tinymce is made by the function:

tinymceInit(image_list,disabled)

  • The "image_list" is an url which returns the image list of the current record.
  • disabled avoids to enter data

PHP validation

kitsamples/pages/k8pages13_validate.php

By validating the input the column "h1" is set to "headtitle".

Pages Catalog

Docu

This are the main elements in the catalog

  • image, the 1st image from image list:
  • headline
  • link
  • creator
  • headdescription

HTML snippet container

kitsamples/pages/k8pages13_catalog_container.html

The container encloses the records.

HTML snippet record

kitsamples/pages/k8pages13_catalog_record.html

A bootstrap row is created. In it are 2 containers with the wide 4 / 8. On the left side the placeholder {{image_file}} displays the image. On the right side the following columns are displayed:

  • headline
  • link
  • username
  • headdescription

Detail Page

Docu

This are the main elements in the detail page:

  • title of page = headline
  • description of page = headdescription
  • headline
  • creator
  • headescription
  • content

HTML snippet container

kitsamples/pages/k8pages13_detail_container.html

The container encloses the records.

HTML snippet record

kitsamples/pages/k8pages13_detail_record.html

At the top the following columns are displayed:

  • h1
  • username
  • datetimecreated
  • headdescription

Beneath the in the "content" is displayed.