summernote

https://summernote.org/ 缺点：太重了 bootstrap + jquery https://www.layui.com/doc/modules/layedit.html 缺点：比较简陋 https://github.com/quilljs/quill 来源： oschina 链接： https://my.oschina.net/u/2400070/blog/4897743

jQuery version: 1.12.4 Bootstrap version: 3.3.7 summernote 是基于 jQuery 和 Bootstrap 的轻量级富文本编辑器 所以在使用summernote之前必须先引入 jquery 和 Bootstrap <!-- css --> <link rel="stylesheet" href="static/plugins/Bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="static/plugins/summernote/summernote.css"> <!-- javascript --> <script src="static/plugins/jquery/jquery-1.12.4.min.js"></script> <script src="static/plugins/Bootstrap/js/bootstrap.js"></script> <script src="static/plugins/summernote/summernote.js"></script> html 部分 <textarea id="summernote"></textarea> javascript代码 let summer = $('#summernote

来源： oschina 链接： https://my.oschina.net/u/4262172/blog/4875388

1问题 　　基于web的富文本编辑器的功能普遍较弱，而word是公认的宇宙第一好用的文档编辑器，所以许多人都习惯先在word中编辑，然后再将内容粘到web富文本编辑器中。 　　但是，这种操作有一个问题：图片带不过来，无法显示。如下所示。 　　我找到了一个方法来解决这个问题。 2 测试环境 summernote 0.8.18 office 2013 java 8 jsoup 1.7.2 3 原理 　　当我们按ctrl+c复制word中的图文内容时，在系统的剪切板中会生成了一个类型为HTML的条目。这个条目的内容类似于: 　　如上图所示，在运行期间word会将图片释放至某个临时目录，src使用的是file协议。 　　由于web编辑器可以识别data协议，所以我们可以将img的src由file:改为data:image/png;base64，然后将修改后的新内容复制至剪切板。这样就解决了问题。 　　这种方式很像游戏中的外挂。 4 关键代码 1 /** 2 * 3 */ 4 private void handle() { 5 try { 6 // 从剪切板中复制内容 7 Clipboard clipboard = Clipboard.getSystemClipboard(); 8 String html = clipboard.getHtml(); 9 textArea1.setText

使用summernote做为富文本编辑器的原因是因为轻量，自己做summernote的插件也容易。summernote自带的图片上传功能我不喜欢，想自己做一个图片上传的插件，最终选择了webuploader做为基础上传组件。 先来看看summernote自带的图片上传功能，实在是太简单了。 集成webuploader到summernote里的图片上传功能插件如下图。 显示打勾图标，说明已经成功上传图片到服务器了。 webuploader在summernote里的使用代码如下。 以上webuploader 上传功能在summernote富文本编辑器的用法，下面再改造一下webuploader官方的demo例子，封装成一个单独的jquery插件来使用。 使用代码如下 这里特制了 usePaste 和 images 参数， usePaste 代表要不要开启webuploader的截图粘贴功能，因为一个页面上有多个webuploader实例时，粘贴截图会导致所有实例都能获取到粘贴的图片，如果有多个webuploader实例存在就干脆禁用截图功能。 而 images 参数就是我们做编辑功能的时候，要初始化webuploader的实例，webuploader官方的demo是不带有这样的功能，所以要自己改造。 本文章由开源中国作者【墨鱼码】原创发布，未经允许不得转载。

最近在开发一个微信公众号的后台，微信公众号编辑的文章一直没有得到很好地适应，大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中，考虑到复制后会排版出现问题，所以给大家推荐一款很不错的Web富文本编辑器 （summernote） 官网地址为： https://summernote.org/ 首先看一下编辑器的样子: 接下来就简单的实现这个编辑器。 1.首先需要从官网下载summernote的包（js和css两部分）然后新建一个页面，因为这个是建立在jquery和bootstarp两个基础上的，所以我们也需要引用他们，以下为我们引入的五个文件，代码如下： <script src="../../js/jquery-3.1.1.min.js"></script> <link href="../../css/bootstrap.css" rel="stylesheet" /> <script src="../../js/bootstrap.min.js"></script> <link href="dist/summernote.css" rel="stylesheet" /> <script src="dist/summernote.js"></script> 2.创建一个summernote的容器。 <div id="summernote">Hello