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',
})