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

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

作者:TG 日期: 2016-09-02 阅读: 1516
富文本编辑器的出现,主要是因为传统的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:"标题",   

      icon:"\uf1dc"   

    },   

    code: {   

      title: "引用",   

      icon: "\uf10d"   

    },   

    bold: {   

      title: "加粗",   

      icon: "\uf032"   

    },   

    italic: {   

      title: "斜体",   

      icon: "\uf033"   

    },   

    underline: {   

      title: "下划线",   

      icon: "\uf0cd"   

    },   

    strikethrough: {   

      title: "删除线",   

      icon: "\uf0cc"   

    },   

    foreColor: {   

      title: "字体颜色",   

      icon: "\uf1fc"   

    },   

    backColor: {   

      title: "背景色",   

      icon: "\uf043"   

    },   

    justifyLeft: {   

      title: "居左",   

      icon: "\uf036"   

    },   

    justifyCenter: {   

      title: "居中",   

      icon: "\uf037"   

    },   

    justifyRight: {   

      title: "居右",   

      icon: "\uf038"   

    },   

    justifyFull: {   

      title: "两端对齐",   

      icon: "\uf039"   

    },   

    insertOrderedList: {   

      title: "有序列表",   

      icon: "\uf0cb"   

    },   

    insertUnorderedList: {   

      title: "无序列表",   

      icon: "\uf0ca"   

    },   

    indent:{   

      title:"indent",   

      icon:"\uf03c"   

    },   

    outdent:{   

      title:"outdent",   

      icon:"\uf03b"   

    },   

    createLink: {   

      title: "链接",   

      icon: "\uf0c1"   

    },   

    insertImage: {   

      title: "插入图片",   

      icon: "\uf03e"   

    },   

    emotion: {   

      title: "表情",   

      icon: "\uf118"   

    },   

    fullscreen: {   

      title: "全屏",   

      icon: "\uf066"   

    },   

    save: {   

      title: "保存",   

      icon: "\uf0c7",   

      click:function(){   

        console.log(editor.getText());   

      }   

    }   

  }   

});

参数:
width:编辑器的宽
height:编辑器的高
buttons:工具栏图标

如有疑问或发现问题,可在下方留言。

关注”全栈技术杂货铺“

全栈技术杂货铺