インライン用のWYSIWYGエディター Lite Editor をリリースしました。

<h2>画像と見出しのレイアウト例</h2>
<p>ここは本文テキストが入る部分です。以下、サンプルテキストです。せっかくWebサイトを作っても、新しい情報が載せられないから、載ってる情報が古くなってしまう。更新する技術が無かったり、よく分からない、なんてことはありませんか？
<a href="https://www.a-blogcms.jp">a-blog cms</a>を使えば、ブログを書くように、いつも使っているWebブラウザから更新ができます。Webの専門の技術や知識が無くても、どんどん新しい情報をあなたのWebサイトに載せられます。</p>

See the Pen Lite Editor - demo by appleple (@appleple) on CodePen.

editor.registerButton({
  label: 'blue',
  tag: 'span',
  className: 'blue',
  group: 'mark'    
});

<link rel="stylesheet" href="./css/lite-editor.min.css">
<script src="./js/lite-editor.min.js"></script>

<script src="https://unpkg.com/lite-editor@1.4.0/js/lite-editor.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lite-editor@1.4.0/css/lite-editor.css">

<textarea class="js-editor">
ここにコンテンツが入ります。
</textarea>

window.addEventListener('DOMContentLoaded',function(){
    new LiteEditor(".js-editor");
});

var editor = new LiteEditor(".js-editor");
editor.registerButton({
  label: 'blue',
  tag: 'span',
  className: 'blue',
  group: 'mark'    
});

editor.registerButton({
  label: 'custom',
  group: 'mark',
  action: 'extra',
  onClick: function (editor) {
      // ここに処理が入ります。
  }   
});

var btnOptions = [
    {
      label: '<i class="fa fa-link"></i>',
      tag: 'a',
      className: '',
      group: 'mark'
    },
    {
      label: '<i class="fa fa-bold"></i>',
      tag: 'strong',
      className: '',
      group: 'mark'
    },
    {
      label: '<i class="fa fa-italic"></i>',
      tag: 'i',
      className: '',
      group: 'mark'
    },
    {
      label: 'red',
      tag: 'span',
      className: 'red',
     group: 'mark'
    }
];

var editor = new LiteEditor('.js-lite-editor', {
    btnOptions: btnOptions
});

// エディターのHTMLの再構築後
editor.on('render', function() {
    /* ここに処理が入ります。 */
});
// エディターのHTMLの再構築前
editor.on('prerender', function() {
   /* ここに処理が入ります。 */
});
// タグが挿入されたとき
editor.on('insertTag', function() {
    /* ここに処理が入ります。 */
});
// タグ解除時
editor.on('unwrapTag', function() {
    /* ここに処理が入ります。 */
});
// redo時
editor.on('redo', function() {
    /* ここに処理が入ります。 */
});
// undo時
editor.on('undo', function() {
    /* ここに処理が入ります。 */
});
// 貼り付け時
editor.on('paste', function() {
    /* ここに処理が入ります。 */
});

npm install lite-editor --save

yarn add lite-editor

const LiteEditor = require('lite-editor');

import LiteEditor from 'lite-editor';