新手学习前端：如何在网页中写出带有格式的文章？

刚开始学习前端的时候，没有什么经验，有很多知识都不知道如何去找。

学了一部分之后想做一个小型的个人博客，就像微博一样能够发布文章。页面都没什么问题，关键被写文章的部分难住了。因为写文章的时候，我看了一下微博发文章的界面，它就像一个word一样，有很多的格式化工具条。因为不知道这个东西叫什么名字，上百度搜索也不知道该输入什么关键词，这就很尴尬。

后来才知道这个东西叫做富文本编辑器。

之前都是利用textarea写的文章，它是没有格式的，读取其内容保存在数据库里面的是纯文本格式，在文章详情页面读取出来显示的就没有格式，乱糟糟的，不利于用户浏览。所以需要一个有格式的文本输入框来代替textarea。

ckediter中代码就像这样

富文本编辑器可以解决web上写文章格式的问题，可以替换textarea实现纯文本的格式化。目前主流的富文本编辑器有十几种，原理都差不多，都是用js来实现的，非常好用，很容易就可以嵌入自己的web页面中（实际配置过程还是有些麻烦的）。

下面介绍一下本网站使用的富文本编辑器：CKeditor。

CKeditor是一个开源免费的富文本编辑器，体积小，使用起来也很方便。

具体使用：

CKeditor有好几个版本，目前网上的教程多数都是用的CKeditor4，我用的也是4的版本。

1.从它的官网下载CKeditor4插件（就是一个js文件）

2.解压文件 将ckeditor.js所在的文件夹引用到你的项目里。

3.在你的页面上引用ckeditor.js文件

4.你的页面上需要有一个textarea并给它定义一个id

5.在JavaScript标签对内写上如下代码：

CKEDITOR.replace("textarea的id");

注意，如果你的是母版页，需要写成CKEDITOR.replace("<%= textarea的id.ClientID %>");

6.如果按上面的要求配置正确了，打开页面就会看到CKeditor的界面了，和word很像的。

7.如果要设置它的宽高，可以这样写：CKEDITOR.replace("<%= editor.ClientID %>, { height: 400 });