PrintPreviewDialog pPDlg
build_os='darwin11.4.0d1'
build_vendor='apple'Calculate the number of lines per page.
PrintPreviewDialog pPDlg
build_os='darwin11.4.0d1'
build_vendor='apple'
团队的业务多为后台管理系统，部分业务需要使用富文本编辑器。早期团队选用了百度编辑器，但存在bug多、无人维护、扩展性差等问题，且后续业需要更灵活的编辑器。为了解决这些问题，决定重选编辑器。
基于以下原因，笔者决定使用Quill来开发团队的编辑器组件：
1. Delta和API
Quill返回json结构的数据，有API *** 作编辑器内部元素。也可以通过innerHtml获取dom。
2. 可定制
Quill可以修改、扩展现有的模块，也可以添加新的模块，甚至可以在parchment的基础上全部重写。有较强的灵活性。
3. 兼容性
当前版本兼容Chrome、IE11、Edge，已满足业务需求。
4. 与其他编辑器比较
相比CKEditor、TinyMCE等传统编辑器，有更好的API和定制功能。而Draft是基于React的编辑器，需要自己实现数据层的内容，使用成本更高。国内的wangEditor功能比较全面，但不具备扩展性。
1. 基础文本模块
分割线、格式刷、段落、撤回和重做
2. 多媒体模块
图片上传模块
3. 其他模块
工具栏的Tooltip模块
4. 预览功能
图片上传主要取决于业务需求，我们可以改写图片的handler方法，打开一个模态框或者打开本地文件夹，调接口上传图片。通用点是保存的时候，用Delta保留前面的内容并插入图片内容，最后更新Quill。
由于图片上传、预览主要取决于业务需求，与编辑器关系不大，后面不再提到。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>在页面中添加一个富文本编辑器kindeditor</title>
<!--start kindeditor-->
<style>
form {
margin: 0
}
textarea {
display: block
}
</style>
<!--引用路径正确与否决定kindeditor是否被成功引用-->
<link rel="stylesheet" href="kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id')
})
</script>
<!--end kindeditor-->
</head>
<body class="">
<div><h>回复话题</h></div>
<div>
<form action="" method="post">
<!--编辑器editor 这个id="editor_id"是上面KindEditor.ready(function(K))函数创建一个
文本编辑框来替换textarea需要用到的id-->
<textarea id="editor_id" name="content" style="width:700pxheight:300px">
<strong>HTML内容</strong></textarea>
<div>
<button type="submit">发表</button>
<button type="reset">取消</button>
</div>
</form>
</div>
</body>
</html>
备注：这里需要引用kindeditor包，这个包可以在kindeditor的官网下载，官网上有
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）