An editable richtext element you can update inline
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
nightwatch
src
test
.babelrc
.eslintrc
.gitignore
.travis.yml
API.md
LICENSE
README.md
bower.json
gulpfile.babel.js
nightwatch.conf.js
package.json
simpla-text-toolbar.html
simpla-text.html
wct.conf.js
yarn.lock

README.md

Simpla Text

Build status Size Version Published

Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.

<simpla-text path="/text"></simpla-text>

Contents

Resources

Installation and setup

Install simpla-text with Bower (Yarn support coming soon)

$ bower i simpla-text --save

Setup Simpla on your page, then import simpla-text into your <head>

<link rel="import" href="/bower_components/simpla-text/simpla-text.html">

Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project

<simpla-text path="/text"></simpla-text>

Editing content

Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.

// Enter edit mode
Simpla.editable(true);
<!-- Make only this text editable -->
<simpla-text path="/text" editable></simpla-text>

Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.

Saving content

Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.

// Save all modified Simpla content
Simpla.save();

You must be authenticated with Simpla before saving content

Inline content

You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.

<!-- Standalone text container, uses paragraphs -->
<simpla-text path="/text"></simpla-text>

<!-- Inline content, line breaks only -->
<h1>
  <simpla-text path="/text"></simpla-text>
</h1>

You can also force inline mode by setting the inline property on simpla-text

<!-- Inline content, line breaks only -->
<simpla-text path="/text" inline></simpla-text>

Initializing with static content

You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.

<simpla-text path="/text">
  <p>Simpla text is a block of editable richtext for the Simpla content system</p>
</simpla-text>

Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.

Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten

Plaintext

By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.

<simpla-text path="/text" plaintext></simpla-text>

Custom placeholders

You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute

<simpla-text 
  path="/text" 
  placeholder="Start typing...">
</simpla-text>

Typographer

Simpla-text applies 'smart typography' rules to its content, including:

  • Smart quotes (" to )
  • Automatic em dashes (-- to )
  • Automatic ellipses (... to )

You can disable the typographer by giving simpla-text a noTypographer property

<simpla-text path="/text" no-typographer></simpla-text>

Readonly

Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.

<simpla-text path="/text" readonly></simpla-text>

Contributing

If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.


MIT © Simpla