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(/ /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 ・テーブ...

コメント