sy-editor 新氧富文本编辑器

sy-editor 1.0.0 第一版本，基于wangeditor 富文本编辑器。 突出轻量、简洁、易用。

功能简介

功能	工具栏图标	使用注意	menu配置	编辑器配置	标签	备注
撤销、重复		缓存中会保存用户操作的全部步骤，包括复制，粘贴，退格删除，输入等功能	editor.config.menus=[ ...'undo','redo' ]	无	无	如需取消此次步骤或恢复到某一段，点击撤销即可。 如撤销过多，前进即可恢复回来。
字体		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'fontfamily' ]	editor.config.familys = [...] //具体可查下方编辑器具体配置	<font face="xxx"></font>	可配置化的字体列表 删除：编辑器配置中的对应配置删除不用的即可。新增：同删除一样，找寻到自己要新增的字体，添加到数组中即可。（ps:若配置的字体无效，则不会生效）
字体大小		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'fontsize' ]	editor.config.fontsizes = { key: value } //具体可查下方编辑器具体配置	<font size="xxx"></font>	可配置化的字体列表. 删除：编辑器配置中的对应配置删除不用的即可。新增：同删除一样，找寻到自己要新增的字体，添加到数组中即可。
标题		标题为单独标签，可直接点击输入内容，或选中内容点击渲染标题。	editor.config.menus=[ ...'head' ]	统一的内容，无序单独配置	<h1> ... <h6>	编辑器内可直接添加标题，标题默认（字体变大，文字加粗）
字体颜色		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ... ‘forecolor’ ]	editor.config.colors={ ' #000' : '黑色' }	<font color="xxx"></font>	可配置化的字体颜色列表. 删除：编辑器配置中的对应配置删除不用的即可。新增：同删除一样，找寻到自己要新增的颜色，添加到数组中即可。
背景色		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'bgcolor' ]	editor.config.colors = { key: value }	无	与字体颜色公用同一列表。
行高		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'lineheight' ]	editor.config.lineheight = { key: value} 具体配置可见下方	无	可配置化的行高列表. 删除：编辑器配置中的对应配置删除不用的即可。新增：同删除一样，找寻到自己要新增的行高，添加到数组中即可。
字体加粗		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'bold' ]	无	<b></b>	无
字体倾斜		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'italic' ]	无	<i></i>	无
下划线		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'underline' ]	无	<u></u>	无
删除线		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'strikethrough' ]	无	<strike></strike>	无
无序、有序列表		列表排序，分为无序和有序列表。	editor.config.menus=[ ...'unorderlist',‘ orderlist’ ]	无	<ul> <li><li></ul> <ol><li></li></ol>	无序列表(unorderlist) : 是ul ，li 标签的列表集合 。 有序列表(orderlist)： 是ol,li 的列表集合。
左对齐、居中、右对齐		P、h1、h2、li等标签的style属性。 text-align: left/right/center；	editor.config.menus=[ ... 'alignleft','aligncenter','alignright' ]	无	无	默认是左对齐，选择居中对齐，和右对齐，光标会跳至对应的地方。
缩进		无	editor.config.menus=[ ...'indent' ]	无	无	会将页面上所选的格式，全都清理完毕，恢复初始化
清除格式		为了确保统一管理，需用户选中文字，进行点击才能使用，若是空白处点击，不会触发。	editor.config.menus=[ ...'eraser' ]	无	<strike></strike>	无
全屏		无	editor.config.menus=[ ...'fullscreen' ]	无	无	辅助功能，全屏能更好的使用编辑器
增加链接、删除链接		点击链接会出现跳转的toolbar工具栏。	editor.config.menus=[ ...‘link' ,'unlink' ]	无	<a href="" target=""></a>	增加超链接、取消超链接
表格		点击表格会出现 删除/放大/缩小的工具栏。	editor.config.menus=[ ...‘table' ]	无	<table> <tr> <td></td> </tr></table>	表格功能
表情		表情功能，目前默认是接口形式获取默认展示emoji表情	editor.config.menus=[ ...‘ emotion' ]	无	<img /> <span />	emoji表情的兼容性很差，因此在一期没有emoji表情映射的图片下，会进行emoji表情的兼容性判断，如果用户兼容性差的话，则隐藏emoji表情列表。
图片		提供图片的插入 上传功能	editor.config.menus=[ ...‘ img' ]	无	<img src="" width="" height="" watermark="" >	点击图片会出现添加水印，替换图片的工具栏。 watermark 自定义属性，判定是否添加水印
视频		点击表格会出现 删除/放大/缩小的工具栏。	editor.config.menus=[ ...‘video' ]	无	<video src= "" poster="" controls >	视频功能
word文档上传		提供word文档上传分析回塞入编辑器功能。	editor.config.menus=[ ...‘word' ]	无	无	无
百度地图		提供百度地图的插入功能	editor.config.menus=[ ...‘ location' ]	无	<img />	无
特殊字符		提供特殊字符列表。	editor.config.menus=[ ...‘ symbol' ]	无	无	无
引用		提供引用功能。	editor.config.menus=[ ...‘ quote' ]	无	<blockquote />	无
插入代码		提供插入代码功能及代码高亮功能。	editor.config.menus=[ ...‘ insertcode' ]	无	<pre > <code>	无
插入分隔符		提供分隔符功能。	editor.config.menus=[ ...‘ hrcode' ]	无	<hr />	无

编辑器字段说明

  var editor = new wangEditor('编辑器id名');

此时实例化出来的editor 中会有一个config 的配置对象，我们的编辑器配置就是在 editor.config中进行

editor.config

• zindex
  • 默认值： 10000
  • 描述： 全屏时的 z-index
  • 值类型： number
• printLog
  • 默认值： true
  • 描述： 是否打印log（开发阶段使用）
  • 值类型： boolean (true 打印) （false 不打印）
• menuFixed
  • 默认值： false
  • 描述： 菜单吸顶
  • 值类型： ( number 吸顶，值为top值) （false 不吸顶）
• jsFilter
  • 默认值： true
  • 描述： 编辑源码时，过滤 javascript
  • 值类型： boolean ( true 过滤) （false 不过滤）
• legalTags
  • 默认值：'p,h1,h2,h3,h4,h5,h6,blockquote,table,ul,ol,pre'
  • 描述： 编辑器允许的标签
  • 值类型： string 标签名
• lang
  • 默认值：editor.langs['zh-cn'] （中文）
  • 描述： 语言包
  • 值类型： editor.langs['zh-cn'] | editor.langs['en'] （目前只支持中英文）
• emotionsShow
  • 默认值：'icon'
  • 描述： 表情包插入到编辑器内的值
  • 值类型： string （icon, 插入表情） （value ,插入值 例如：&040 )
• pasteFilter
  • 默认值：true
  • 描述： 是否过滤粘贴内容
  • 值类型： boolean （true 过滤） （false 不过滤)
• pasteText
  • 默认值：false
  • 描述： 是否粘贴纯文本
  • 值类型： boolean editor.config.pasteFilter === false 时候，此配置将失效
• parseImg
  • 默认值：true
  • 描述： 是否可以粘贴图片 （新氧楼层，回复等功能禁止粘贴图片，特殊配置）
  • 值类型： boolean （false 不能粘贴除表情外的图片 ） （true 可以粘贴）
• parseLink
  • 默认值：true
  • 描述： 是否可以粘贴超链接（默认不需要配置）
  • 值类型： boolean （false 不可以粘贴 ） （true 若parseFilterRule中未过滤a标签，则可粘贴超链接）
• codeDefaultLang
  • 默认值：javascript
  • 描述： 插入代码时，默认的语言
  • 值类型： string 根据hljs 中语言列表配置
• forbidEnter
  • 默认值：false
  • 描述： 是否禁止换行
  • 值类型： boolean (true 禁止换行) （false 可以换行）
• editor_type
  • 默认值：'pc'
  • 描述： 替换默认的上传图片配置
  • 值类型： 此处无需更改，若更改为其他字段，可能会出现意外情况。

• uploadImgUrl
  • 默认值：true
  • 描述： 上传图片的配置
  • 值类型： boolean (true 允许上传) （false 禁止上传）

• menus
  • 默认值： [ 'source','|', 'bold', 'underline','italic','strikethrough', 'eraser','forecolor','bgcolor','|','quote','fontfamily','fontsize','head','unorderlist','orderlist','alignleft', 'aligncenter', 'alignright','|','link','unlink','table','emotion','|','img','video','location','insertcode','|','undo','redo', 'word' 'fullscreen' ];
  • 描述：此字段控制菜单的显示隐藏，以及分组和排序。 通过 '|' 进行菜单的归类和分组， 通过索引来判断显示顺序。
  • 值类型： Array
• colors
  • 默认值：{ // 'value': 'title' '#880000': '暗红色', '#800080': '紫色', '#ff0000': '红色', '#ff00ff': '鲜粉色', '#000080': '深蓝色', '#0000ff': '蓝色', '#00ffff': '湖蓝色', '#008080': '蓝绿色', '#008000': '绿色', '#808000': '橄榄色', '#00ff00': '浅绿色', '#ffcc00': '橙黄色', '#808080': '灰色', '#c0c0c0': '银色', '#000000': '黑色', '#ffffff': '白色' };
  • 描述： 文字颜色和文字背景色的控制。
  • 值类型： Object (key:value 形式来添加删除)
• lineheight
  • 默认值：{ // 格式： 'value' : 'title' '1.0': '1.0倍', '1.5': '1.5倍', '1.8': '1.8倍', '2.0': '2.0倍', '2.5': '2.5倍', '3.0': '3.0倍' };
  • 描述： 文字行高的配置
  • 值类型： Object (key:value 形式来添加删除)

• fontsizes
  • 默认值：{ // 格式：'value': 'title' 1: '12px', 2: '13px', 3: '16px', 4: '18px', 5: '24px', 6: '32px', 7: '48px' };
  • 描述： 文字字号的配置
  • 值类型： Object (key:value 形式来添加删除)

• familys
  • 默认值：[ '宋体', '黑体', '楷体', '微软雅黑', 'Arial', 'Verdana', 'Georgia', 'Times New Roman', 'Microsoft JhengHei', 'Trebuchet MS', 'Courier New', 'Impact', 'Comic Sans MS', 'Consolas' ];
  • 描述： 字体
  • 值类型： Array
• emotions
  - 默认值：{ 'default': { title: 'emoji', data: '/editor/emoji' }, 'qqemotion': { title: 'QQ表情', data: '/editor/emotion' } }
  • 描述： 表情字段， title 是表情的tab栏， data 是表情的列表
  • 值类型：object data有两种格式（1. Array [{icon: xxx, value: xxx }] 2. string url 编辑器会根据url去请求数据，塞回页面）
• parseFilterRule（目前禁用）
  • 默认值：{ p: ['style'],img: ['src','width','height','watermark','style'] ,video: [] }
  • 描述： 粘贴过滤的规则
  • 全字段： {h1: [ ], //和标题关联 h2: [ ], //和标题关联h3: [ ], 和标题关联h4: [ ], 和标题关联h5: [ ], 和标题关联 h6: [ ], 和标题关联 ol: [ ], 和有序列表关联 ul: [ ], 和无序列表关联 li: [ ], 和有序、无序列表关联 u: [ ], 和下划线有关 ins: [ ], 和下划线有关 i: [ ], 和斜体字有关 em: [ ], 和斜体字有关 b: [ ], 和字体加粗有关 strong: [ ], 和字体加粗有关 strike: [ ], 和字体删除线有关 s: [ ], 和字体删除线有关 del: [ ], 和字体删除线有关 a: ['href', 'target'], 和超链接有关 font: ['face','size','color','style'], 和字体 类型|大小|颜色|背景色 等有关 blockquote: [ ], 和工具栏引用有关 pre: ['style'], 和工具栏插入代码有关 code: ['class', 'codemark'], 和工具栏插入代码有关 hr: [ ] 和工具栏分割线有关 };
  • 配置规则： 此项配置关联 工具栏 （menus）例如：工具栏中有标题（head）. 那么剪切板中的html 中若有标题相关的<h1 | h2 | h3 | ...> 标签，则需要配置此处，不然将会被过滤，影响使用。
  • 影响范围 ： 1.复制粘贴内容 2.导入word 文档
  • 值类型： object
• sys
  • 默认值：0
  • 描述： 请求参数中携带 ，用来判断站点
  • 值类型： number 0是www站点 1 是 admin站点
• sysType
  • 默认值：1
  • 描述： 请求参数中携带 ，是用来判断发帖，日记
  • 值类型： number 1是发帖 2是 日记
• compelWaterMark
  • 默认值：0
  • 描述： 是否强制添加，或不能添加水印
  • 值类型： number 0 可选 1强制添加 2 强制不添加

图片相关

图片来源

1. 通过工具栏图片按钮上传图片。
   • 需在配置项 editor.config.menus 中加入 'img' 开启图片工具栏按钮
   • 需在配置项 editor.config.uploadImgUrl 中查看是否值为false （若无配置过可忽略，因为默认是true）
   • 图片单次可最多上传9张
   • 图片单次可最多插入到编辑器9张
   • 图片支持选择是否添加水印上传（默认添加水印）
   • 素材库中会有近期上传过的图片记录，可选择直接插入
2. 表情图片
   • 需在配置项 editor.config.menus 中加入 'emotion' 开启表情工具栏按钮
   • 默认表情为 文字版本的emoji 以及图片版本的QQ表情。 如需修改，可查看上面的配置项相关内容
   • 表情图片都是在static.soyoung.com/images/newface 或者
     static.soyoung.com/pc/static/fe_pc/libs/editor/plugins/emoticons/images下，暂不支持其他路径的表情。
   • 图片表情的宽高为 18px
3. 直接拖拽上传图片
   • 直接拖拽上传图片，会先调用接口上传。
   • 拖拽入编辑器的图片，若显示出来，则均已上传至服务器
   • 拖拽入编辑器的图片， 在素材库中会有记录
   • 拖拽上传支持多张一起拖拽
   • 拖拽上传会直接给图片添加水印
4. word 文档直接复制，粘贴入编辑器的图片
   • 目前暂不支持此种方式
   • 违反了data-src 的协议，无法直接读取用户的磁盘对应路径的图片
   • 会在原有图片的位置，替换为上传失败的图片，以便用户在对应地方替换图片。
5. 网络base64 格式图片
   • 网络格式base64图片，不存在防盗链的问题
   • 网络图片base64的 图片会先展示在文本编辑器中，再上传至服务器，返回结果再次替换src路径。
   • 网络base64图片，会直接加入水印。
6. 网络链接图片
   • 检查是否有防盗链的问题
   • 若无防盗链，编辑器会自动转化为base64格式的图片，之后步骤与网络base64图片一致
   • 若有防盗链， 编辑器会将网络图片替换为上传失败的图片，用以提醒用户
7. 网络图文混杂
   • 循环图片执行网络base64 以及网络连接图片 。步骤与5.6一致。
8. 新氧域名下的图片
   • 直接添加入编辑器中，不做过滤。

图片配置

1. watermark 是否有水印
   • 0 无水印
   • 1 有水印
2. 点击图片toolbar
   • 若图片本身已有水印， 则工具栏会出现（替换图片的功能）
   • 若图片本身无水印，则工具栏会出现（添加水印、替换图片的功能）
   • 图片大小拉伸（暂不放开，若有需求，可联系）
3. 上传图片参数
   • editor.config.uploadImgUrl 检查是否支持上传图片，若配置为false ，则不再进行图片上传 功能
   • editor.config.sys 检查图片上传参数， 默认值为0（www站点）若admin站点，需改为1
   • editor.config.sysType 检查图片上传参数。 默认值为1（发帖） 。 若为日记 ，需改为2

视频相关

视频来源

1. 通过工具栏视频按钮上传视频。
   • 需在配置项 editor.config.menus 中加入 'video' 开启图片工具栏按钮
   • 一篇文章只能插入一段时间
   • 视频默认取第一帧作为封面
   • 视频有素材库，会将近期上传的视频进行记录
   • 视频的宽高均为视频本身的宽高，未做任何处理

Vue使用说明：

需先切换至新氧私有NPM源

  $ npm install sy-editor --save

自定义组件，例子如下：

<template>
  <div :ref="editorId"></div>
</template>

<script>
import syEditor from "sy-editor";
export default {
  props: {
    config: Object,
    editorId: {
        default: 'syEditor'
    },
    width: {
        default: null
    },
    height: {
        default: 300
    }
  },
  data() {
    return {
      editor: ""
    };
  },
  mounted() {
    const _el = this.$refs[this.editorId];
     if (this.width) {
         _el.style.width = `${this.width}px` 
     }
     _el.style.height =  `${this.height}px`
     // 实例化syeditor
    const editor = new syEditor(_el);
    // 配置化
    // const { entries } = Object;
    // for (let [key, value] of entries(this.config)) {
    //     editor.config[key] = value;
    // }
    editor.config = Object.assign(editor.config,this.config)
    
    editor.onchange = this.handlerChange;

    // 创建
    editor.create();
    this.editor = editor;
  },
  methods: {
    handlerChange() {
      this.$emit("handlerChange", this.editor.$txt.text());
    }
  }
};
</script>
<style scoped>
</style>

使用：

<template>
  <div id="app">
    <Editor @handlerChange="handlerChange"  :config="config"/>
  </div>
</template>

<script>
import Editor from './components/Editor'
export default {
  name: 'App',
  components: {
    Editor
  },
  data(){
    return {
      config: {
        // ... 具体配置化
      }
    }
  },
  methods:{
    handlerChange(text){
    }
  }
}
</script>

config具体配置信息请查看本文中（编辑器字段说明）