tangy-form-editor

<tangy-form-editor>

The <tangy-form-editor> element is a Web Component for editing the contents a <tangy-form>. Just place <tangy-form-editor> tags around your <tangy-form> and the editor enables, no serverside dependencies required.

Check out the demo on CodePen

Install

Add the following global dependencies to your HTML.

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-loader.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js"></script>
  <script src="https://unpkg.com/js-beautify/js/lib/beautify-html.js"></script>
  <script src="https://unpkg.com/tangy-form@latest/dist/bundle.js" type="module"></script>
  <script src="https://unpkg.com/tangy-form-editor@latest/dist/bundle.js" type="module"></script>

Advanced: Using a bundler

For apps using a bundler, install using NPM and then import into your app.

npm install --save tangy-form-editor

import `tangy-form-editor/tangy-form-editor.js`

You have to copy an ace build to your root directory in order to get syntax highlighting. In an angular-cli project (as of Angular 4) you can do this by adding the following assets entry to your apps build target.

  { "glob": "**/*", "input": "../node_modules/ace-builds/src-noconflict/", "output": "./" },

See related issue: https://github.com/Juicy/juicy-ace-editor/issues/39#issuecomment-406710315

Usage

Encapsulate a tangy-form with tangy-form-editor then listen for the tangy-form-editor's change event for updates on the form HTML.

<tangy-form-editor>
  <template>
    <tangy-form id="field-demo" title="Field Demo">
      <tangy-form-item id="text_inputs_1" title="Text Inputs 1">
        <template>
          <tangy-input name="text_input_1" label="This is an input for text." type="text"></tangy-input>
        </template>
      </tangy-form-item>
      <tangy-form-item id="text_inputs_2" title="Text Inputs 2">
        <template>
          <tangy-input name="text_input_2" label="This is an input for text that is required." type="text" error-message="This is required." required></tangy-input>
        </template>
      </tangy-form-item> 
      <tangy-form-item id="summary" summary title="Summary">
        <template>
          Thank you for taking our survey.
        </template>
      </tangy-form-item> 
    </tangy-form>
  </template>
</tangy-form-editor>
<script>
  // You can listen for changes.
  document.querySelector('tangy-form-editor').addEventListener('change', event => console.log(event.detail))
  // Or at any point you can get the current formHtml from the formHtml property.
  console.log(document.querySelector('tangy-form-editor').formHtml)
</script>

Develop

See DEVELOPER.md for docs.

Browser Compatibility

The combination of CKEditor breaking when used in Shadow DOM and Firefox / IE shadow DOM support is still behind a flag, this means this element does not currently work in Firefox and IE.

Support for translations

Follow the instructions for the tangy-translate library to enable translated or alternate labels.

Trademark and License

Tangerine is a registered trademark of RTI International. This software is licensed under the GPLv3 License.