ckeditor.js与quill.js富文本编辑器的使用

ckeditor

简洁小巧方便使用 缺点没有代码块选项

html里面写入这段代码
<textarea class="form-control" id="editor" name="content"></textarea>

ckeditor.js

<script src="ckeditor.js"></script>
<script type="text/javascript">
    let editor;

    ClassicEditor.create(document.querySelector('#editor'))
        .then(newEditor => {
            editor = newEditor;
        })
        .catch(error => {
            console.error(error);
        });
        
</script>

---

quill.js

功能齐全,操作简便

css代码 设置输入框的高度
 #editor-container {
        height: 500px;
    }

<div class="container">
    <div class="row">
        <div class="col-md-12 mt50">
            <div id="standalone-container">
                <div id="toolbar-container">
					<span class="ql-formats">
					<select class="ql-font"></select>
					<select class="ql-size"></select>
					</span>
                    <span class="ql-formats">
					<button class="ql-bold"></button>
					<button class="ql-italic"></button>
					<button class="ql-underline"></button>
					<button class="ql-strike"></button>
					</span>
                    <span class="ql-formats">
					<select class="ql-color"></select>
					<select class="ql-background"></select>
					</span>
                    <span class="ql-formats">
					<button class="ql-script" value="sub"></button>
					<button class="ql-script" value="super"></button>
					</span>
                    <span class="ql-formats">
					<button class="ql-header" value="1"></button>
					<button class="ql-header" value="2"></button>
					<button class="ql-blockquote"></button>
					<button class="ql-code-block"></button>
					</span>
                    <span class="ql-formats">
					<button class="ql-list" value="ordered"></button>
					<button class="ql-list" value="bullet"></button>
					<button class="ql-indent" value="-1"></button>
					<button class="ql-indent" value="+1"></button>
					</span>
                    <span class="ql-formats">
					<button class="ql-direction" value="rtl"></button>
					<select class="ql-align"></select>
					</span>
                    <span class="ql-formats">
					<button class="ql-link"></button>
					<button class="ql-image"></button>
					<button class="ql-video"></button>
					<button class="ql-formula"></button>
					</span>
                    <span class="ql-formats">
					<button class="ql-clean"></button>
					</span>
                </div>
                <div id="editor-container"></div>
            </div>
        </div>
    </div>
</div>

</div>

运行

quill.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="js/quill.min.js"></script>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor-container', {
        modules: {
            formula: true,
            syntax: true,
            toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });
</script>

通过
var $html = $(".ql-editor").html();
获取输入框里的内容