CKEditor / 商用利用については有償
CKEditor4
https://ckeditor.com/docs/ckeditor4/latest/features/index.html
CKEditor5
https://ckeditor.com/docs/ckeditor5/latest/installation/index.html
改行コードと先頭の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(/ /ig, "");
val = val.replace(/<P>/ig, "");
val = val.replace(/<\/P>/ig, "");
return val;
};
Quill
<!-- 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 / 商用利用でも無償 ライセンス
jQuery ベースで作成されている。
https://summernote.org/
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>
その他 参考できるサイト