ckeditor
简洁小巧方便使用 缺点没有代码块选项
html里面写入这段代码
<textarea class="form-control" id="editor" name="content"></textarea>
<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>
<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();
获取输入框里的内容