RichTextエディター

Laravel

CKEditor / 商用利用については有償

Features Overview | CKEditor 4 Documentation
Learn how to install, integrate and configure CKEditor 4. Creating plugins, widgets and skins are explained here, too. A...
CKEditor 5 installation quick start | CKEditor 5 Documentation
Learn to install and configure CKEditor 5. Work with the CKEditor 5 Framework, customize it, create plugins, and custom ...

改行コードと先頭のPタグと末尾のPタグを除外

CKEditor4版.php

RichTextEditor.prototype.getValue = function () {
  var val = CKEDITOR.instances[this.TEXTAREA.id].getData();
  val = val.replace(/\r?\n/g,"");
        val = val.replace(/^<P>/i, "");
        val = val.replace(/<\/P>$/i, "");
  return val;
};

CKEditor5版.php

RichTextEditor.prototype.getValue = function () {
  var val = myEditor.getData();
  val = val.replace(/\r?\n/g,"");
        val = val.replace(/&nbsp;/ig, "");
        val = val.replace(/<P>/ig, "");
        val = val.replace(/<\/P>/ig, "");
  return val;
};

Quill

https://qiita.com/embed-contents/link-card#qiita-embed-content__1fa4f1a7d6aa80348beacf5bc44d2615
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Summernote / 商用利用でも無償 ライセンス

Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online...

Bootstrap5ではうまくいかないようようです。
Bootstrap4まで利用する必要があるようです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
 {{--  日本語化化 --}}
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/src/lang/summernote-ja-JP.js"></script> 
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
           lang: 'ja-JP' // 日本語化
    });
  </script>
</body>
</html>

その他 参考できるサイト

https://qiita.com/embed-contents/link-card#qiita-embed-content__d56c891a865b364a0963ce3a40a6f31b
GitHubでスターが多いWYSIWYGエディタ(2019年11月) - Qiita
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub Demo ・テーブ...

コメント