富文本编辑器1.0.x

作者: 该走就走吧 | 来源:发表于2018-12-04 14:42 被阅读0次

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 强制不添加

图片相关

图片来源

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

图片配置

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

视频相关

视频来源

通过工具栏视频按钮上传视频。
- 需在配置项 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具体配置信息请查看本文中（编辑器字段说明）

富文本编辑器1.0.x

sy-editor 新氧富文本编辑器

功能简介

编辑器字段说明

editor.config

图片相关

图片来源

图片配置

视频相关

视频来源

Vue使用说明：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读