狂神说SpringBoot系列连载课程,通俗易懂,基于SpringBoot2.2.5版本,欢迎各位狂粉转发关注学习。未经作者授权,禁止转载
聊聊富文本编辑器
简介
思考:我们平时在博客园,或者CSDN等平台进行写作的时候,有同学思考过他们的编辑器是怎么实现的吗?
在博客园后台的选项设置中,可以看到一个文本编辑器的选项:
其实这个就是富文本编辑器,市面上有许多非常成熟的富文本编辑器,比如:
-
Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费
-
官网:https://pandao.github.io/editor.md/
-
-
wangEditor——基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。
-
官网:http://www.wangeditor.com/
-
-
TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能齐全,界面美观,就是文档是英文的,对开发人员英文水平有一定要求。
-
官网:https://www.tiny.cloud/docs/demo/full-featured/
-
博客园
-
-
百度ueditor——UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,功能齐全,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,缺点是已经没有更新了
-
官网:https://ueditor.baidu.com/website/onlinedemo.html
-
-
kindeditor——界面经典。
-
官网:http://kindeditor.net/demo.php
-
-
Textbox——Textbox是一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外,该工具还实现了屏幕阅读器等辅助技术,并符合WAI-ARIA可访问性标准。
-
官网:https://textbox.io/
-
-
CKEditor——国外的,界面美观。
-
官网:https://ckeditor.com/ckeditor-5/demo/
-
-
quill——功能强大,还可以编辑公式等
-
官网:https://quilljs.com/
-
-
simditor——界面美观,功能较全。
-
官网:https://simditor.tower.im/
-
-
summernote——UI好看,精美
-
官网:https://summernote.org/
-
-
jodit——功能齐全
-
官网:https://xdsoft.net/jodit/
-
-
froala Editor——界面非常好看,功能非常强大,非常好用(非免费)
-
官网:https://www.froala.com/wysiwyg-editor
-
总之,目前可用的富文本编辑器有很多......这只是其中的一部分
Editor.md
我这里使用的就是Editor.md,作为一个资深码农,Mardown必然是我们程序猿最喜欢的格式,看下面,就爱上了!
我们可以在官网下载它:https://pandao.github.io/editor.md/ , 得到它的压缩包!
解压以后,在examples目录下面,可以看到他的很多案例使用!学习,其实就是看人家怎么写的,然后进行模仿就好了!
我们可以将整个解压的文件倒入我们的项目,将一些无用的测试和案例删掉即可!
基础工程搭建
数据库设计
article:文章表
字段 | 备注 | |
---|---|---|
id | int | 文章的唯一ID |
author | varchar | 作者 |
title | varchar | 标题 |
content | longtext | 文章的内容 |
建表SQL: