doc-note v1.0.5

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

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

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

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

中文文档 | English Api

完整demo -> Demo & Sound Code

-- 基本用法 --

- 下载依赖

npm i doc-note -S

-   注册组件

// main.js
import { DocNote, DocNoteConfig } from 'doc-note'

// DocNoteConfig是doc-note组件的配置方法, 相当于初始化方法, 必须在Vue.use(DocNote)之前执行.
DocNoteConfig()

Vue.use(DocNote)

* DocNoteConfig 配置

-   .vue文件中使用

<template>
  <doc-note :codes="code"/>
</template>

export default {
  data() {
    return {
      code: `const helloWord = 'Hello, doc-note!'`
    }
  }
}

-- props --

-- event --

--- codes的格式 ---

--- submitInfo ---

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

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

--- Configure ---

$ - 配置示例

       - 配置主题

              - 所有支持的主题

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

              - 主题配置示例

DocNoteConfig({
  theme: 'okaidia'
})

       - 配置语言

              - 所有支持的语言

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

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

              - 语言配置示例

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

       - 配置删除文本

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

       - 配置编辑权限

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

       - 配置添加权限

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

       - 配置删除权限

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

       - 配置提交权限

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

       - 完整DocNoteConfig配置

DocNoteConfig({
  /**
   * 权限配置-使页面可被编辑
   * 
   * @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 doc-note -S

-   Register components

// main.js
import { DocNote, DocNoteConfig } from 'doc-note'

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

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

* Umnoteconfig configuration

-   Used in .vue files

<template>
  <doc-note :codes="code"/>
</template>

import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const code = ref(`const helloWord = 'Hello, doc-note!'`)

    return {
      code,
    }
  }
})

-- props --

-- event --

--- Format of codes ---

--- submitInfo ---

-- Umnoteconfig configuration --   [Complete example]

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

--- Configure ---

$ - Configuration example

       - Configure theme

              - All supported themes

// doc-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

DocNoteConfig({
  theme: 'okaidia'
})

       - Configuration language

              - All supported languages

// doc-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

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

       - Configure delete text

DocNoteConfig({
  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

DocNoteConfig({
  // 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

DocNoteConfig({
  // 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

DocNoteConfig({
  // 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

DocNoteConfig({
  // 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 DocNoteConfig configuration

DocNoteConfig({
  /**
   * 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',
})