富文本编辑器1.0.x

2018-12-04  本文已影响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

图片相关

图片来源

  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具体配置信息请查看本文中（编辑器字段说明）

上一篇下一篇

猜你喜欢

热点阅读