首页 专题 H5案例 前端导航 UI框架

一个不算成熟的富文本编辑器

作者:TG 日期: 2016-09-02 阅读: 1413
富文本编辑器的出现,主要是因为传统的textarea文本框不支持图片插入、不支持修改文本框里的样式。网上的富文本编辑器已经很多,比如百度的Ueditor ,基于jQuery的bootstrap-wysiwyg 等等多种操作性丰富的编辑器。
在这里,我为什么再弄一个富文本编辑器呢?
一是学习,二是闲的蛋疼!
废话不多说,我们直接来操作看看。


你可以到这里下载:TGeditor

使用方法:
引入:

<link rel="stylesheet" href="fontAwesome/css/font-awesome.min.css">   

<link rel="stylesheet" href="richEditor.css">

<script src="richEditor.min.js"></script>

fontaswesome字体图标是为了工具栏的图标,你也可以用其他字体图标

在页面放一个编辑器div(目前只支持这种方式):

<div id="editor">   

  <p>这是一个富文本编辑器,简单高效!</p>   

  <p>你可以通过getHTML()获取编辑器中的所有内容,也可以通过getText()获取纯文本内容</p> </div>

如果需要默认内容,直接在editor里添加即可。
直接调用:

var editor = new RichEditor("#editor", {   

  width:900,   

  height:400,   

  toolBg:"#eee",   

  buttons: {   

    heading:{   

      title:"标