Examples Tinymce
DocuMaster Pages
DocuTo 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)
- call back functions
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
- tinymceInit(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
DocuThis 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
DocuThis 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.