Text Fields

Text

schema type : string
options type : text
more info

schema.json

"type":"string",
"title":"my field name"

options.json

"type":"text",
"helper" : "my helper tooltip"

• You can use a Pattern as for validation. This is Alpaca functionality but as the regex is stored in JSON you will need to escape a slashes or you will get an error.

schema.json

"type":"string",
"title":"my field name",
"pattern": "[\\d\\s]+"

Textarea

schema type : string
options type : textarea
more info

Rich text with CKEditor

( CKEditor http://ckeditor.com )
schema type : string
options type : ckeditor
configset: basic, standard, full.
(basic is default. standard includes div and table support. full allows any code)
From version OC 4.2 with configset=full you get the option to add images.
The Easy Image Plugin is used for that.

options.json

{
   "fields": {
      "CKEditor1": {
         "title": "CkEditor With Style Set",
         "type": "ckeditor",
         "ckeditor":{
               "extraAllowedContent": "table tr th td div span(*);",
               "stylesSet" : [
                  
               { "name": "Blue Title", "element": "h3","styles": { "color": "Blue" } },
                    { "name": "Red Title",  "element": "h3","styles": { "color": "Red" } }
                  
                  
               ]
            }
      }
   }
}

schema.json

{
    "type": "object",
    "properties": {
         "Title": {
            "title": "Title",
            "type": "string"
         },
         "CKEditor1": {
            "title": "Text",
            "type": "string"
         }
      }
}

template.hbs

<h2>{{Title}}</h2>
<hr>
{{{CKEditor1}}}

more info about ckeditor config

Until OC 4.2 the dnnckeditor (https://github.com/DNN-Connect/CKEditorProvider) was used.
From OC 4.2 Open Content loads it's own (newer) version of the CkEditor

CkEditor Config

You can manipulate almost any option the CkEditor offers from your options.json file.
In this file you can find what config options Open Content loads by default:
Some examples:

schema.json

{
    "type": "object",
    "properties": {
			"CKEditor1": {
				"title": "CkEditor",
				"type": "string"
			},
			"CKEditor2A": {
				"title": "CkEditor Basic",
				"type": "string"
			},
			"CKEditor2B": {
				"title": "CkEditor Default",
				"type": "string"
			},
			"CKEditor2C": {
				"title": "CkEditor Full",
				"type": "string"
			},
			"CKEditor3": {
				"title": "CkEditor Extra allowed html",
				"type": "string"
			},
			"CKEditor4": {
				"title": "CkEditor With StyleSet",
				"type": "string"
			},
			"CKEditor5": {
				"title": "CkEditor size",
				"type": "string"
			},
			"CKEditor6": {
				"title": "CkEditor Custom Toolbar",
				"type": "string"
			}
		}
}

options.json

{
	"fields": {
		"CKEditor1": {
			"type": "ckeditor"
			
		},
		"CKEditor2A": {
			"type": "ckeditor",
			"configset":"basic",
			
		},
		"CKEditor2B": {
			"type": "ckeditor",
			"configset":"default",
			
		},
		"CKEditor2C": {
			"type": "ckeditor",
			"configset":"full",
			
		},
		"CKEditor3": {
			"type": "ckeditor",
			"ckeditor":{
					"extraAllowedContent": "table tr th td div span(*);"
				}
		},
		"CKEditor4": {
			"type": "ckeditor",
			"ckeditor":{
					"stylesSet" : [
						
					{ "name": "Blue Title", "element": "h3","styles": { "color": "Blue" } },
                    { "name": "Red Title",  "element": "h3","styles": { "color": "Red" } }
						
						
					]
				}
		},
		"CKEditor5": {
			"type": "ckeditor",
			"ckeditor":{
				"height": 700,
				"width": '50%'
			}
			
		},		
		"CKEditor6": {
			"type": "ckeditor",
			"ckeditor":{
			   "toolbar": [
				{ "name": "text", 
					"items": ["Bold" , "Italic", "Underline" , "RemoveFormat"]
				},
				{ "name": "style", 
					"items": ["Format"]
				},
				{ "name": "layout", 
					"items": ["Table" ,  "NumberedList", "BulletedList", "Outdent", "Indent"]
				},				
				{ "name": "link", 
					"items": ["Link" , "Unlink"]
				},
				{ "name": "Source", 
					"items": ["ShowBlocks", "Source"]
				}
				]
			}
			
		}
	}
}

template.hbs

<h3>CkEditor:</h3>
<div class="item">
{{CKEditor1}}
</div>

<h3>CkEditor Basic:</h3>
<div class="item">
{{CKEditor2A}}
</div>

<h3>CkEditor Default:</h3>
<div class="item">
{{CKEditor2B}}
</div>

<h3>CkEditor Full:</h3>
<div class="item">
{{CKEditor2C}}
</div>

<h3>CkEditor Extra allowed html:</h3>
<div class="item">
{{CKEditor3}}
</div>

<h3>CkEditor With StyleSet:</h3>
<div class="item">
{{CKEditor4}}
</div>

<h3>CkEditor size:</h3>
<div class="item">
{{CKEditor5}}
</div>

<h3>CkEditor Custom Toolbar:</h3>
<div class="item">
{{CKEditor6}}
</div>

An example template with options can be found here:
01.02-CkEditor-Options

Rich text with Wysihtml

(wysihtml http://wysihtml.com)
schema type : string
options type : wysihtml
dnn specific

Rich Text with Summernote

The Summernote editor is a very compact WYSIWYG editor.
An important characteristic of this editor is that it will not upload images to the server but it will inject them Base-64 encoded inside the text.
So you should probably not use this editor for large images inside a text.

http://summernote.org/

schema.json

{
    "type": "object",
    "properties": {
        "ModuleTitle": {
            "title": "Main Title",
            "type": "string"
        },
				"Text": {
				"title": "Text",
				"type": "string"
			}
     }
}

options.json

{
    "fields": {
		"ModuleTitle": {
            "type":"text"
        },
		"Text": {
			"title": "Text",
			"type": "summernote"
			}
    }
}