vide插件介绍

VIDE插件是基于vue,vuex,es5/es6上来开发的,如果插件有视图,可以用vue来开发界面,最后通过vuex的dispatch把数据和页面给IDE即可。 开发速度非常快,视图结构清晰,省去直接操作dom的过程

配置

  • name必须是唯一,前缀是vide-plugin,这个name值跟之后返回的类名必须关联,查看下面
  • vide选项,用来读取这个插件的一些属性,具体查看不同插件类型的属性值
  • keywords其中一项必须是vide-plugin,以便npm搜索

下面是vide-plugin-prompt-text的package.json

{
  "name": "vide-plugin-prompt-text",
  "version": "0.0.1",
  "vide": {
    "type": "prompt",
    "promptExtension": ["*"],
    "promptPriority": 0
  },
  "keywords": [
    "vide-plugin",
    "text"
  ],
  "main": "lib/index.js"
}

vide的type值

说明
prompt提示类插件类型
mode主题高亮类插件类型
(空)默认是不填,表示页面等类型

插件基本结构

插件参数

  • editor:编辑器的实例
  • store:vuex对象
  • signal: event bus通信(signal.receive接受事件)
  • packageInfo:安装包信息
    • package:插件包的内容
    • path:插件包的路径
  • ace:editor是基于ace来开发的
  • baseClass 插件扩展的基类(如果需要使用vue视图
    • vm 视图渲染的instance
    • $mount ({options, props, stylePath}) 渲染vue视图
    • $destroy 销毁视图
    • $toggle 切换视图的显示和隐藏
    • $clean 当组件需要卸载时要调用的方法,默认为空,需要子类重写
  • class 如果有类名,类名必须是package name的驼峰式,如果没有,默认是package name的驼峰式

    vide-plugin-prompt-text插入的入口文件示例

    export default ({editor, store, view, packageInfo, baseClass}) => {
    // subscribe change file
    store.subscribe((mutation, state) => {
      if (['EDITOR_SET_FILE_TYPE','FILE_CREATE'].includes(mutation.type) && store.state.editor.promptName === 'videPluginPromptText') {
        analyseContent(state.editor.content)
      }
    })
    editor.session.on('change', function (action) {
      if (store.state.editor.promptName === 'videPluginPromptText' && action.action === 'insert' && action.lines.join('') === '') {
        analyseContent(editor.getValue())
      }
    })
    // return execute class
    return class videPluginPromptText extends baseClass {
      index ({action}) {
        let promptLists = []
        let promptStr = ''
        try {
          promptStr = getTypedCharacters(action, store, editor)
          if (promptStr) {
            promptLists = matchWords(promptStr)
          }
        } catch (e) {}
        if (promptLists.length) {
          prevPromptStr = promptStr
          prevPromptLists = promptLists
          store.dispatch('editor/setPromptLists', {promptStr, promptLists})
        } else {
          prevPromptStr = ''
          prevPromptLists = []
          store.dispatch('editor/cleanPromptLists')
        }
      }
    }
    }
    

开发环境

在开发过程中,为了方便测试和调试插件,在插件包管理页面中,增加了Dev Tool选项,可以使用该选项来加载开发中的插件

Copyright © www.debuggap.com 2013-2017 浙ICP备16009880号 all right reserved,powered by Gitbook  2017-06-12

results matching ""

    No results matching ""