富文本编辑器

1.简介

我们平时在博客园，或者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/
  • 博客园
• kindeditor——界面经典
  • 官网：http://kindeditor.net/demo.php
• 。。。。。。

总之目前可用的富文本编辑器有很多，这只是其中一部分

2.Editor.md

 

 在官网下载editor,md，https://pandao.github.io/editor.md/，得到他的压缩包。

解压以后，参看examples目录下面，有很多案例使用，可以进行模仿

将解压的文件倒入我们的项目，将一些无用的测试和案例删掉即可

3.基础工程搭建

数据库设计

article:文章表

CREATE TABLE `article` ( 
`id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'int文章的唯一ID', 
`author` varchar(50) NOT NULL COMMENT '作者', 
`title` varchar(100) NOT NULL COMMENT '标题', 
`content` longtext NOT NULL COMMENT '文章的内容', 
PRIMARY KEY (`id`) 
) ENGINE=InnoDB DEFAULT CHARSET=utf8

 

基础项目搭建

待完成