• uploadImgUrl
  • 默認(rèn)值：true
  • 描述： 上傳圖片的配置
  • 值類型： boolean (true 允許上傳) （false 禁止上傳）

• menus
  • 默認(rèn)值： [ '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' ];
  • 描述：此字段控制菜單的顯示隱藏，以及分組和排序。 通過 '|' 進(jìn)行菜單的歸類和分組， 通過索引來判斷顯示順序。
  • 值類型： Array
• colors
  • 默認(rèn)值：{ // 'value': 'title' '#880000': '暗紅色', '#800080': '紫色', '#ff0000': '紅色', '#ff00ff': '鮮粉色', '#000080': '深藍(lán)色', '#0000ff': '藍(lán)色', '#00ffff': '湖藍(lán)色', '#008080': '藍(lán)綠色', '#008000': '綠色', '#808000': '橄欖色', '#00ff00': '淺綠色', '#ffcc00': '橙黃色', '#808080': '灰色', '#c0c0c0': '銀色', '#000000': '黑色', '#ffffff': '白色' };
  • 描述： 文字顏色和文字背景色的控制。
  • 值類型： Object (key:value 形式來添加刪除)
• lineheight
  • 默認(rèn)值：{ // 格式： '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
  • 默認(rèn)值：{ // 格式：'value': 'title' 1: '12px', 2: '13px', 3: '16px', 4: '18px', 5: '24px', 6: '32px', 7: '48px' };
  • 描述： 文字字號(hào)的配置
  • 值類型： Object (key:value 形式來添加刪除)

• familys
  • 默認(rèn)值：[ '宋體', '黑體', '楷體', '微軟雅黑', 'Arial', 'Verdana', 'Georgia', 'Times New Roman', 'Microsoft JhengHei', 'Trebuchet MS', 'Courier New', 'Impact', 'Comic Sans MS', 'Consolas' ];
  • 描述： 字體
  • 值類型： Array
• emotions
  - 默認(rèn)值：{ '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 編輯器會(huì)根據(jù)url去請(qǐng)求數(shù)據(jù)，塞回頁面）
• parseFilterRule（目前禁用）
  • 默認(rèn)值：{ p: ['style'],img: ['src','width','height','watermark','style'] ,video: [] }
  • 描述： 粘貼過濾的規(guī)則
  • 全字段： {h1: [ ], //和標(biāo)題關(guān)聯(lián) h2: [ ], //和標(biāo)題關(guān)聯(lián)h3: [ ], 和標(biāo)題關(guān)聯(lián)h4: [ ], 和標(biāo)題關(guān)聯(lián)h5: [ ], 和標(biāo)題關(guān)聯(lián) h6: [ ], 和標(biāo)題關(guān)聯(lián) ol: [ ], 和有序列表關(guān)聯(lián) ul: [ ], 和無序列表關(guān)聯(lián) li: [ ], 和有序、無序列表關(guān)聯(lián) u: [ ], 和下劃線有關(guān) ins: [ ], 和下劃線有關(guān) i: [ ], 和斜體字有關(guān) em: [ ], 和斜體字有關(guān) b: [ ], 和字體加粗有關(guān) strong: [ ], 和字體加粗有關(guān) strike: [ ], 和字體刪除線有關(guān) s: [ ], 和字體刪除線有關(guān) del: [ ], 和字體刪除線有關(guān) a: ['href', 'target'], 和超鏈接有關(guān) font: ['face','size','color','style'], 和字體 類型|大小|顏色|背景色 等有關(guān) blockquote: [ ], 和工具欄引用有關(guān) pre: ['style'], 和工具欄插入代碼有關(guān) code: ['class', 'codemark'], 和工具欄插入代碼有關(guān) hr: [ ] 和工具欄分割線有關(guān) };
  • 配置規(guī)則： 此項(xiàng)配置關(guān)聯(lián) 工具欄 （menus）例如：工具欄中有標(biāo)題（head）. 那么剪切板中的html 中若有標(biāo)題相關(guān)的<h1 | h2 | h3 | ...> 標(biāo)簽，則需要配置此處，不然將會(huì)被過濾，影響使用。
  • 影響范圍 ： 1.復(fù)制粘貼內(nèi)容 2.導(dǎo)入word 文檔
  • 值類型： object
• sys
  • 默認(rèn)值：0
  • 描述： 請(qǐng)求參數(shù)中攜帶 ，用來判斷站點(diǎn)
  • 值類型： number 0是www站點(diǎn) 1 是 admin站點(diǎn)
• sysType
  • 默認(rèn)值：1
  • 描述： 請(qǐng)求參數(shù)中攜帶 ，是用來判斷發(fā)帖，日記
  • 值類型： number 1是發(fā)帖 2是 日記
• compelWaterMark
  • 默認(rèn)值：0
  • 描述： 是否強(qiáng)制添加，或不能添加水印
  • 值類型： number 0 可選 1強(qiáng)制添加 2 強(qiáng)制不添加

圖片相關(guān)

圖片來源

1. 通過工具欄圖片按鈕上傳圖片。
   • 需在配置項(xiàng) editor.config.menus 中加入 'img' 開啟圖片工具欄按鈕
   • 需在配置項(xiàng) editor.config.uploadImgUrl 中查看是否值為false （若無配置過可忽略，因?yàn)槟J(rèn)是true）
   • 圖片單次可最多上傳9張
   • 圖片單次可最多插入到編輯器9張
   • 圖片支持選擇是否添加水印上傳（默認(rèn)添加水印）
   • 素材庫(kù)中會(huì)有近期上傳過的圖片記錄，可選擇直接插入
2. 表情圖片
   • 需在配置項(xiàng) editor.config.menus 中加入 'emotion' 開啟表情工具欄按鈕
   • 默認(rèn)表情為 文字版本的emoji 以及圖片版本的QQ表情。 如需修改，可查看上面的配置項(xiàng)相關(guān)內(nèi)容
   • 表情圖片都是在static.soyoung.com/images/newface 或者
     static.soyoung.com/pc/static/fe_pc/libs/editor/plugins/emoticons/images下，暫不支持其他路徑的表情。
   • 圖片表情的寬高為 18px
3. 直接拖拽上傳圖片
   • 直接拖拽上傳圖片，會(huì)先調(diào)用接口上傳。
   • 拖拽入編輯器的圖片，若顯示出來，則均已上傳至服務(wù)器
   • 拖拽入編輯器的圖片， 在素材庫(kù)中會(huì)有記錄
   • 拖拽上傳支持多張一起拖拽
   • 拖拽上傳會(huì)直接給圖片添加水印
4. word 文檔直接復(fù)制，粘貼入編輯器的圖片
   • 目前暫不支持此種方式
   • 違反了data-src 的協(xié)議，無法直接讀取用戶的磁盤對(duì)應(yīng)路徑的圖片
   • 會(huì)在原有圖片的位置，替換為上傳失敗的圖片，以便用戶在對(duì)應(yīng)地方替換圖片。
5. 網(wǎng)絡(luò)base64 格式圖片
   • 網(wǎng)絡(luò)格式base64圖片，不存在防盜鏈的問題
   • 網(wǎng)絡(luò)圖片base64的 圖片會(huì)先展示在文本編輯器中，再上傳至服務(wù)器，返回結(jié)果再次替換src路徑。
   • 網(wǎng)絡(luò)base64圖片，會(huì)直接加入水印。
6. 網(wǎng)絡(luò)鏈接圖片
   • 檢查是否有防盜鏈的問題
   • 若無防盜鏈，編輯器會(huì)自動(dòng)轉(zhuǎn)化為base64格式的圖片，之后步驟與網(wǎng)絡(luò)base64圖片一致
   • 若有防盜鏈， 編輯器會(huì)將網(wǎng)絡(luò)圖片替換為上傳失敗的圖片，用以提醒用戶
7. 網(wǎng)絡(luò)圖文混雜
   • 循環(huán)圖片執(zhí)行網(wǎng)絡(luò)base64 以及網(wǎng)絡(luò)連接圖片 。步驟與5.6一致。
8. 新氧域名下的圖片
   • 直接添加入編輯器中，不做過濾。

圖片配置

1. watermark 是否有水印
   • 0 無水印
   • 1 有水印
2. 點(diǎn)擊圖片toolbar
   • 若圖片本身已有水印， 則工具欄會(huì)出現(xiàn)（替換圖片的功能）
   • 若圖片本身無水印，則工具欄會(huì)出現(xiàn)（添加水印、替換圖片的功能）
   • 圖片大小拉伸（暫不放開，若有需求，可聯(lián)系）
3. 上傳圖片參數(shù)
   • editor.config.uploadImgUrl 檢查是否支持上傳圖片，若配置為false ，則不再進(jìn)行圖片上傳 功能
   • editor.config.sys 檢查圖片上傳參數(shù)， 默認(rèn)值為0（www站點(diǎn)）若admin站點(diǎn)，需改為1
   • editor.config.sysType 檢查圖片上傳參數(shù)。 默認(rèn)值為1（發(fā)帖） 。 若為日記 ，需改為2

視頻相關(guān)

視頻來源

1. 通過工具欄視頻按鈕上傳視頻。
   • 需在配置項(xiàng) editor.config.menus 中加入 'video' 開啟圖片工具欄按鈕
   • 一篇文章只能插入一段時(shí)間
   • 視頻默認(rèn)取第一幀作為封面
   • 視頻有素材庫(kù)，會(huì)將近期上傳的視頻進(jìn)行記錄
   • 視頻的寬高均為視頻本身的寬高，未做任何處理

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`
     // 實(shí)例化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;

    // 創(chuàng)建
    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具體配置信息請(qǐng)查看本文中（編輯器字段說明）