« Text Editor Source HTML 2.0.0

Enable HTML Source Editor

Insert Link Insert Image

Strokes

• <h1>asdf</h1> then press Enter.
• <h2>asdf</h2> then press Enter.
• <h3>asdf</h3> then press Enter.
• <h4>asdf</h4> then press Enter.
• <h5>asdf</h5> then press Enter.
• <h6>asdf</h6> then press Enter.
• <li>asdf</li> then press Enter.
• <p>asdf</p> then press Enter.
• Press Control + ' or Control + Shift + ".
• Press Control + Enter to escape from the current line then start a paragraph below it.
• Press Control + Shift + Enter to escape from the current line then start a paragraph above it.
• Press Control + b.
• Press Control + e.
• Press Control + h.
• Press Control + i.
• Press Control + l.
• Press Control + o.
• Press Control + u.
• Press Shift + Enter to insert a hard break.

Usage

Browser

<script src="./text-editor/index.min.js"></script>
<script src="./text-editor.history/index.min.js"></script>
<script src="./text-editor.key/index.min.js"></script>
<script src="./text-editor.source/index.min.js"></script>
<script src="./text-editor.source-x-m-l/index.min.js"></script>
<script src="./text-editor.source-h-t-m-l/index.min.js"></script>
<script>

  const editor = new TextEditor(document.querySelector('textarea'), {
      commands: {
          blocks: function () {
              return this.toggleElementsBlock([
                  ['h1'],
                  ['h2'],
                  ['h3'],
                  ['h4'],
                  ['h5'],
                  ['h6'],
                  ['p'],
                  false
              ]).record(), false;
          },
          bold: function () {
              return this.toggleElement(['strong']).record(), false;
          },
          code: function () {
              return this.toggleCode().record(), false;
          },
          image: function (hint, value) {
              return this.insertImage(hint, value, function () {
                  this.record();
              }), false;
          },
          italic: function () {
              return this.toggleElement(['em']).record(), false;
          },
          link: function (hint, value) {
              return this.insertLink(hint, value, function () {
                  this.record();
              }), false;
          },
          pull: function () {
              return this.pull().record(), false;
          },
          push: function () {
              return this.push().record(), false;
          },
          quote: function () {
              return this.toggleQuote().record(), false;
          },
          redo: function () {
              return this.redo(), false;
          },
          underline: function () {
              return this.toggleElement(['u']).record(), false;
          },
          undo: function () {
              return this.undo(), false;
          }
      },
      keys: {
          'Control-"': 'quote',
          'Control-Shift-"': 'quote',
          'Control-[': 'pull',
          'Control-\'': 'quote',
          'Control-]': 'push',
          'Control-b': 'bold',
          'Control-e': 'code',
          'Control-h': 'blocks',
          'Control-i': 'italic',
          'Control-l': 'link',
          'Control-o': 'image',
          'Control-u': 'underline',
          'Control-y': 'redo',
          'Control-z': 'undo'
      },
      tab: 2,
      // Be sure to put `TextEditor.SourceHTML` before `TextEditor.SourceXML`
      with: [TextEditor.History, TextEditor.Key, TextEditor.SourceHTML, TextEditor.SourceXML, TextEditor.Source]
  });

</script>

CommonJS

ECMAScript

Methods

Instance Methods

editor.insertImage(hint, value, then)

Inserts an image from URL.

editor.insertImage('URL:', 'http://', function (value) {
    console.log(value);
});

editor.insertLink(hint, value, then)

Inserts a link from URL.

editor.insertLink('URL:', 'http://', function (value) {
    console.log(value);
});

editor.insertElementBlock(value, mode = -1, clear = true)

editor.insertElementBlock(of, mode = -1, clear = true)

editor.peelElementBlock(of, wrap = false)

editor.toggleElementBlock(of, wrap = false)

editor.peelElementBlock(open, close, wrap = false)

editor.toggleElementBlock(open, close, wrap = false)

editor.wrapElementBlock(open, close, wrap = false)

editor.wrapElementBlock(of, wrap = false)

editor.toggleElements(of, wrap = false)

Toggles elements in the list.

editor.toggleElements([
    ['b'],
    ['strong'],
    false
]);

editor.toggleElementsBlock(of, wrap = false)

Toggles block elements in the list.

editor.toggleElementsBlock([
    ['h1'],
    ['h2'],
    ['h3'],
    ['h4'],
    ['h5'],
    ['h6'],
    ['p'],
    false
]);