❤
npm
Sign UpSign In

um-note

1.0.11 • Public • Published

um-note是基于prismjs开发的语法高亮vue3组件, 支持编辑和提交

♦ vue2版um-note -> 请看 doc-note


Um-note is a syntax highlighting vue3 component developed based on prismjs, which supports editing and submission

♦ um-note for vue2 -> see doc-note


中文文档 | English Api


完整demo -> Demo & Sound Code




-- 基本用法 --


- 下载依赖

npm i um-note -S

-   注册组件

// main.js
import { UmNote, UmNoteConfig } from 'um-note'

// UmNoteConfig是um-note组件的配置方法, 相当于初始化方法, 必须在createApp(App).use(UmNote)之前执行.
UmNoteConfig()

createApp(App).use(UmNote).mount('#app')

* UmNoteConfig 配置

-   .vue文件中使用

<template>
  <um-note :codes="code"/>
</template>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const code = ref(`const helloWord = 'Hello, um-note!'`)

    return {
      code,
    }
  }
})

-- props --


参数 说明 类型 默认值
width 组件的宽度. *必须带单位. string '100%'
height 组件的高度. *必须带单位. string 'auto'
editable 是否开启可编辑功能. 如果editable的值是false, 则隐藏组件右上角的编辑开关. boolean false
foldable 是否开启折叠功能. 如果foldable的值是false, 则unfold属性将失效, 组件将保持展开状态. boolean true
unfold 是否默认展开组件. boolean false
*codes 需要展示的代码. 查看属性codes的格式. string | object | array []
language 组件的默认语言. string 'javascript'

-- event --


名称 说明 回调参数 回调参数类型 回调参数说明
submit 组件提交操作时的回调函数. 完整示例demo submitInfo object 当前提交的内容信息和初始化编辑状态方法.

--- codes的格式 ---

类型 格式 示例
string - `const value = 'Hello Word!'`
object {
    language:  [ string | 可选 | 默认: 'javascript' ],
    code:  [ string | 可选 | 默认: '' ]
}		 {
    language:  'javascript',
    code:  `const value = 'Hello Word!'`
}
array [
    {
        language:  [ string | 可选 | 默认: 'javascript' ],
        code:  [ string | 可选 | 默认: '' ]
    },
    ......
]		 [
    {
        language:  'html',
        code:  `<div>{{ msg }}<div>`
    },
    {
        language:  'javascript',
        code:  `const msg = 'Hello Word!'`
    },
    ......
]

--- submitInfo ---

submitInfo的属性 类型 说明
data array 需要提交的数据. [
    {
        code : [ 原始展示用代码 | string ],
        language : [ 实际代码语言 | string ],
        processedCode : [ prismjs处理过的代码 | string ],
        showingLanguage : [ 展示的语言 | string ]
    },
    ......
]
close function 初始化组件的编辑状态为'未编辑'状态.

-- UmNoteConfig 配置 --   [完整UmNoteConfig示例]

- UmNoteConfig     * UmNoteConfig必须在组件挂载之前被调用

名称 类型 功能 回调参数 回调参数类型 回调参数说明
UmNoteConfig function 配置um-note的主题、支持语言、权限等. Configure object UmNoteConfig方法的配置对象

--- Configure ---

Configure的属性 类型 功能 默认值 回调参数 回调参数类型 回调参数说明
theme string 配置um-note的主题. [所有主题]. [示例]. 'default' - - -
languages array 配置um-note支持的语言. [所有可被支持的语言]. [示例] ['html', 'javascript', 'css'] - - -
contentNames object 配置um-note中删除代码块弹框中的相关文字描述. [示例] undefined - - -
editConfigure function 配置um-note中的编辑权限. [示例] undefined next function 继续下一步.
addConfigure function 配置um-note中添加代码块权限. [示例] undefined next function 继续下一步.
removeConfigure function 配置um-note中删除代码块权限. [示例] undefined next function 继续下一步.
submitConfigure function 配置um-note中的提交权限. [示例] undefined next function 继续下一步.

$ - 配置示例


       - 配置主题

              - 所有支持的主题 

// 本组件一共可支持8中主题, 分别是: 'default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'
// 可通过全局属性Prism.allThemes来获取所有支持的主题
console.log(Prism.allThemes) // ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']

              - 主题配置示例 

UmNoteConfig({
  theme: 'okaidia'
})

       - 配置语言

              - 所有支持的语言 

// 本组件一共可支持270+种语言
// 可通过全局属性Prism.allLanguages来获取所有支持的语言
console.log(Prism.allLanguages) // ['html', 'javascript', 'css', ...]

// 可通过全局方法Prism.hasLanguage来判断某种语言是否被支持
/**
 * 检测语言是否被支持
 * 
 * @param {String} 被检测的语言字符串
 * 
 * @returns {Boolean} 
 */
console.log(Prism.hasLanguage('html')) // true

              - 语言配置示例 

UmNoteConfig({
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)']
})


       - 配置删除文本 


UmNoteConfig({
  contentNames: {
    cancel: 'cancel', // 取消按钮展示文本
    confirm: 'done', // 确定按钮展示文本
    explain: 'Are you sure to delete??', // 删除弹框内容展示文本
  }
})


       - 配置编辑权限 


UmNoteConfig({
  // 如果不想配置edit权限, 请不要设置editConfigure, 或者在editConfigure内部直接调用next()方法
  editConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - 配置添加权限 


UmNoteConfig({
  // 如果不想配置add权限, 请不要设置addConfigure, 或者在addConfigure内部直接调用next()方法
  addConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - 配置删除权限 


UmNoteConfig({
  // 如果不想配置remove权限, 请不要设置removeConfigure, 或者在removeConfigure内部直接调用next()方法
  removeConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - 配置提交权限 


UmNoteConfig({
  // 如果不想配置submit权限, 请不要设置submitConfigure, 或者在submitConfigure内部直接调用next()方法
  submitConfigure (next) {
    if (store.getters.isLogin) { // 如果用户已登录
      next() // 继续下一步
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - 完整UmNoteConfig配置 


UmNoteConfig({
  /**
   * 权限配置-使页面可被编辑
   * 
   * @param {Function} next 继续下一步
   */
  editConfigure (next) { // 如果不想配置edit权限, 请不要设置editConfigure, 或者在editConfigure内部直接调用next()方法
    if (store.getters.isLogin) { // 如果用户已登录
      next()
    } else {
      alert(`Oh, no! You don't have 'edit' permission! Please log in first!!!`)
    }
  },
  /**
   * 权限配置-添加代码块
   * 
   * @param {Function} next 继续下一步
   */
  addConfigure (next) { // 如果不想配置add权限, 请不要设置addConfigure, 或者在addConfigure内部直接调用next()方法
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'add' permission! Please log in first!!!`)
    }
  },
  /**
   * 权限配置-删除代码块
   * 
   * @param {Function} next 继续下一步
   */
  removeConfigure (next) { // 如果不想配置remove权限, 请不要设置removeConfigure, 或者在removeConfigure内部直接调用next()方法
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'remove' permission! Please log in first!!!`)
    }
  },
  /**
   * 权限配置-确认编辑的代码
   * 
   * @param {Function} next 继续下一步
   */
  submitConfigure (next) { // 如果不想配置submit权限, 请不要设置submitConfigure, 或者在submitConfigure内部直接调用next()方法
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'submit' permission! Please log in first!!!`)
    }
  },
  /**
   * 配置删除代码块弹框内的文字描述
   * 
   * {Object} contentNames
   * {String} contentNames.cancel 取消按钮描述
   * {String} contentNames.confirm 确定按钮描述
   * {String} contentNames.explain 弹框内容描述
   */
  contentNames: {
    cancel: '取消',
    confirm: '确定',
    explain: '确定删除?',
  },
  /**
   * 配置添加代码块时可选择的语言
   * 
   * {Array} languages
   * 你可以通过 console.log(Prism.allLanguages) 打印出所有被支持的语言, 返回一个数组
   * 你可以通过 console.log(Prism.hasLanguage(<languageName>)) 打印出 <languageName> 语言是否被支持, 返回 true 或 false
   */
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)'],
  /**
   * 配置主题
   * 
   * {String} theme
   * 可配置主题一共有8种: ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']
   */
  theme: 'default',
})

中文文档 | English Api


-- Basic Usage --


- Download dependency

npm i um-note -S

-   Register components

// main.js
import { UmNote, UmNoteConfig } from 'um-note'

// Umnoteconfig is the configuration method of um-note components, Equivalent to initialization method, Must be executed before createapp(APP).use(UmNote).
UmNoteConfig()

createApp(App).use(UmNote).mount('#app')

* Umnoteconfig configuration

-   Used in .vue files

<template>
  <um-note :codes="code"/>
</template>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const code = ref(`const helloWord = 'Hello, um-note!'`)

    return {
      code,
    }
  }
})

-- props --


Params Description Type Default
width Width of component. *Must bring unit. string '100%'
height Height of component. *Must bring unit. string 'auto'
editable Whether to turn on the editable function. If the value of editable is false, the edit switch in the upper right corner of the component is hidden. boolean false
foldable Whether to turn on the folding function. If the value of foldable is false, the unfold attribute will become invalid and the component will remain unfold. boolean true
unfold Whether to unfold components by default. boolean false
*codes Code to show. View the format of attribute codes. string | object | array []
language The default language of the component. string 'javascript'

-- event --


Name Description CB Arguments Arg Type Arg Description
submit Callback function when component submits operation. Full sample demo submitInfo object Content information currently submitted and method of initializing editing status.

--- Format of codes ---

Type Format Example
string - `const value = 'Hello Word!'`
object {
    language:  [ string | Optional | Default: 'javascript' ],
    code:  [ string | Optional | Default: '' ]
}		 {
    language:  'javascript',
    code:  `const value = 'Hello Word!'`
}
array [
    {
        language:  [ string | Optional | Default: 'javascript' ],
        code:  [ string | Optional | Default: '' ]
    },
    ......
]		 [
    {
        language:  'html',
        code:  `<div>{{ msg }}<div>`
    },
    {
        language:  'javascript',
        code:  `const msg = 'Hello Word!'`
    },
    ......
]

--- submitInfo ---

Props of submitinfo Type Description
data array Data to be submitted. [
    {
        code : [ Original display code | string ],
        language : [ Actual code language | string ],
        processedCode : [ Processed code by prismjs | string ],
        showingLanguage : [ Language of presentation | string ]
    },
    ......
]
close function Initialize the edit state of the component to the 'not edited' state.

-- Umnoteconfig configuration --   [Complete example]

- UmNoteConfig     * Umnoteconfig must be called before the component is mounted

Name Type Description CB Arguments Arg Type Arg Description
UmNoteConfig function Configure the theme, supported language, permissions, etc. of um-note. Configure object Configuration object of UmNoteConfig method

--- Configure ---

Props of Configure Type Description Default CB Arguments Arg Type Arg Description
theme string Configure topics for um-note. [All themes]. [Example]. 'default' - - -
languages array Configure languages supported for 'um-note'. [All supported languages]. [Example] ['html', 'javascript', 'css'] - - -
contentNames object Configure the relevant text description in the delete code block pop-up box for 'um-note'. [Example] undefined - - -
editConfigure function Configure edit permissions for 'um-note'. [Example] undefined next function Continue to the next step.
addConfigure function Configure add code block permissions for 'um-note'. [Example] undefined next function Continue to the next step.
removeConfigure function Configure delete code block permission for 'um-note'. [Example] undefined next function Continue to the next step.
submitConfigure function Configure submit permissions for 'um-note'. [Example] undefined next function Continue to the next step.

$ - Configuration example


       - Configure theme

              - All supported themes 

// um-note supports a total of 8 themes: 'default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight'
// All supported topics can be obtained through the global attribute Prism.allThemes
console.log(Prism.allThemes) // ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']

              - Theme configuration example 

UmNoteConfig({
  theme: 'okaidia'
})

       - Configuration language

              - All supported languages 

// um-note can support 270+ languages
// All supported languages can be obtained through the global attribute Prism.allLanguages
console.log(Prism.allLanguages) // ['html', 'javascript', 'css', ...]

// The global method Prism.hasLanguage can be used to determine whether a language is supported
/**
 * Check whether the language is supported
 * 
 * @param {String} language to be detected
 * 
 * @returns {Boolean} 
 */
console.log(Prism.hasLanguage('html')) // true

              - Language configuration example 

UmNoteConfig({
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)']
})


       - Configure delete text 


UmNoteConfig({
  contentNames: {
    cancel: 'cancel', // text of cancel butto
    confirm: 'done', // text of confirm butto
    explain: 'Are you sure to delete??', // text of delete popup
  }
})


       - Configure edit permissions 


UmNoteConfig({
  // If you do not want to configure 'edit' permission, please do not set 'editconfiguration', or directly call the 'next()' method inside 'editconfiguration'
  editConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - Configure add permissions 


UmNoteConfig({
  // If you do not want to configure 'add' permission, please do not set 'addConfigure', or directly call the 'next()' method inside 'addConfigure'
  addConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - Configure delete permissions 


UmNoteConfig({
  // If you do not want to configure 'remove' permission, please do not set 'removeConfigure', or directly call the 'next()' method inside 'removeConfigure'
  removeConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - Configure submit permissions 


UmNoteConfig({
  // If you do not want to configure 'submit' permission, please do not set 'submitConfigure', or directly call the 'next()' method inside 'submitConfigure'
  submitConfigure (next) {
    if (store.getters.isLogin) { // If the user is logged in
      next() // Continue to the next step
    } else {
      alert(`You don't have permission! Please log in first!!!`)
    }
  }
})

       - Full UmNoteConfig configuration 


UmNoteConfig({
  /**
   * Permission configuration-Make the page editable
   * 
   * @param {Function} next Continue to the next step
   */
  editConfigure (next) { // If you do not want to configure 'edit' permission, please do not set 'editconfiguration', or directly call the 'next()' method inside 'editconfiguration'
    if (store.getters.isLogin) { // If the user is logged in
      next()
    } else {
      alert(`Oh, no! You don't have 'edit' permission! Please log in first!!!`)
    }
  },
  /**
   * Permission configuration-Add code block
   * 
   * @param {Function} next Continue to the next step
   */
  addConfigure (next) { // If you do not want to configure 'add' permission, please do not set 'addConfigure', or directly call the 'next()' method inside 'addConfigure'
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'add' permission! Please log in first!!!`)
    }
  },
  /**
   * Permission configuration-Delete code block
   * 
   * @param {Function} next Continue to the next step
   */
  removeConfigure (next) { // If you do not want to configure 'remove' permission, please do not set 'removeConfigure', or directly call the 'next()' method inside 'removeConfigure'
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'remove' permission! Please log in first!!!`)
    }
  },
  /**
   * Permission configuration-Confirm edited code
   * 
   * @param {Function} next Continue to the next step
   */
  submitConfigure (next) { // If you do not want to configure 'submit' permission, please do not set 'submitConfigure', or directly call the 'next()' method inside 'submitConfigure'
    if (store.getters.isLogin) {
      next()
    } else {
      alert(`Oh, no! You don't have 'submit' permission! Please log in first!!!`)
    }
  },
  /**
   * Configure the text description in the delete code block pop-up box
   * 
   * {Object} contentNames
   * {String} contentNames.cancel text of cancel butto
   * {String} contentNames.confirm text of confirm butto
   * {String} contentNames.explain text of delete popup
   */
  contentNames: {
    cancel: '取消',
    confirm: '确定',
    explain: '确定删除?',
  },
  /**
   * Configure the language that can be selected when adding code blocks
   * 
   * {Array} languages
   * You can print out all supported languages through 'console.log(Prism.allLanguages)', return an array
   * You can print out whether the '<languename>' language is supported through 'console.log(Prism.hasLanguage(<languageName>))', return true or false
   */
  languages: ['html', 'javascript', 'css', 'c++', 'ASP.NET (C#)'],
  /**
   * Configure theme
   * 
   * {String} theme
   * There are 8 configurable themes: ['default', 'coy', 'dark', 'funky', 'okaidia', 'solarizedlight', 'tomorrow', 'twilight']
   */
  theme: 'default',
})

Readme

Keywords

Package Sidebar

Install

npm i um-note

Repository

github.com/ModernFarmer/um-note

Homepage

github.com/ModernFarmer/um-note

Weekly Downloads

10

Version

1.0.11

License

ISC

Unpacked Size

1.2 MB

Total Files

3

Last publish

Collaborators

  • unclemao
Try on RunKit
Report malware