ContentBuilder - InnovaStudio

Documentation

InnovaStudio

ContentBuilder.js

ContentBuilder.js is a drag & drop HTML editor

javascript library. It is the first editor that allows you to

build content layout in almost any css grid framework

such as Bootstrap, Tailwind, Foundation and more.

Contents

Getting Started ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 5

Usage ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 7

Examples (HTML, PHP, React, Vue) ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 8

Folder Structure ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 9

Snippets ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 10

Snippet Side Panel ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­. 12

Configuration ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 13

Placement ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 13

Open on the First Load¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 15

Language File ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 19

Icon Support ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 20

Custom File/Media Browser or Asset Manager Support ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 21

Using Custom Function ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 25

Saving Base64 Images

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­ 26

1. Using Form Method ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­..¡­¡­¡­¡­¡­. 27

2. Using AJAX Post Method ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­. 28

Configuration ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­. 30

Image Quality ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­ 30

Snippet Categories ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­. 16

Maximum Width ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­.. 30

Enable/Disable Embed Image Feature ¡­¡­¡­¡­..¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­ 31

Snippet Button ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 17

Programmatically Open Snippet Dialog ¡­¡­¡­.¡­.. 18

Using Custom Function on Image Link/Settings Click ¡­¡­.. 32

Display Mode ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­.. 15

Using Custom Function on Browse Image Click

¡­¡­¡­¡­¡­¡­.. 32

2

Image Upload from the Image Dialog ¡­¡­¡­¡­¡­¡­ 33

Preferences ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­.. 67

Using Form Method ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 34

Builder Mode ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 68

Using AJAX Post Method ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 35

Outline Mode

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 71

Video Upload from the Video Dialog ¡­¡­¡­¡­¡­¡­ 37

Using Form Method ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 38

Outline Style ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 73

Using AJAX Post Method ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 39

Hide Column Tool ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 75

Plugins

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 40

Row Tool Position ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 76

Modules

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 47

Tool Style ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 77

Your Own Snippets ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 48

Hide Snippet (+) Tool ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­. 78

CSS Framework Support ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 55

Hide Element Tool ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 79

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 59

Hide Element Highlight ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 80

Multiple Editable Area Support

Programmatically Add Editable Area

¡­¡­¡­¡­¡­¡­ 60

Lightbox Support ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 60

Color Picker ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 64

Custom Tags ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 65

Modal Animation ¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 66

Custom Value ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 66

Hide Outline ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 74

Snippet Sidebar Visibility ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 81

Paste Result ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 82

Toolbar Position ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­ 83

Programmatically Open Preference Dialog¡­¡­¡­¡­¡­. 84

Clear the Saved Preferences ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 84

Example: Making the builder interface clean ¡­¡­¡­. 85

3

Themes ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­.. 86

HTML Code Editing Support ¡­¡­¡­¡­¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­ 91

Programmatically Open HTML Code Editor ¡­¡­ 92

Disable Column HTML Code Editor ¡­¡­¡­¡­¡­.¡­¡­¡­. 92

Disable Row HTML Code Editor ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­. 92

Loading HTML Content Programmatically

Paste HTML Content Programmatically

¡­¡­¡­¡­¡­¡­¡­. 93

¡­¡­¡­¡­¡­.¡­¡­¡­¡­. 93

Insert Custom HTML Snippet Programmatically ¡­¡­.¡­ 94

Element Selection ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­ 94

Style Panel ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­. 95

Zoom Support

Toolbar

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­.. 96

¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­¡­ 97

Text Settings ¡­.¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­. 104

Undo & Redo ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­ 105

Events ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­.. 105

Destroy ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­¡­¡­ 106

Flexible Path ¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­¡­..¡­¡­¡­¡­¡­.. 107

4

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download