Editable text areas

This builds on the following intros:

Script

Let’s write a content app that can be edited it through the editing mode of the Boomla Toolbar.

We will modify this hello-world content app. This is the source, it’s printing hello world.

var p = ''

p += '<div>'
    p += 'Hello world!'
p += '</div>'

response.body(p)

Let’s print the file’s body instead.

var p = ''

p += '<div>'
    p += f.body()
p += '</div>'

response.body(p)

Because it may contain characters that are not HTML safe, let’s HTML encode them.

var p = ''

p += '<div>'
    p += util.htmlEncode(f.body())
p += '</div>'

response.body(p)

Let’s see what we expect to be shown. It’s the word BODY. It’s indeed shown, but it’s not editable yet. To make it editable, we need to add the class o1-contenteditable and the attribute data-o1-contenteditable="body".

var p = ''

p += '<div class="o1-contenteditable" data-o1-contenteditable="body">'
    p += util.htmlEncode(f.body())
p += '</div>'

response.body(p)

Now it’s editable. If you click the Save button, your changes will be made permanent. Looking at the content file’s body, we find the text we have entered.

Notice that we can not apply any rich text formatting yet. To enable it, let’s add the attribute data-o1-contenteditable-format="html" to the container div, and remove the HTML encoding step, as file’s body will already contain HTML code.

var p = ''

p += '<div class="o1-contenteditable" data-o1-contenteditable="body" data-o1-contenteditable-format="html">'
    p += f.body()
p += '</div>'

response.body(p)

Refresh. Edit. Indeed it works. Looking at the content file’s body, we now find some HTML code.

You can also make any attributes editable. For example, to make the string attribute foo editable, we need to print that value, and also route it back upon saving.

To make the file’s title editable, as expected, print the file’s title, and route it back upon saving. Note that the file’s title should typically not contain HTML code, so let’s disable rich formatting.

That’s all there is to it!