vue-simple-html-editor

A simple html rich-text editor based on Vue3 and Typescript.

Install

npm install vue-simple-html-editor --save

Usage

1. local usage

import { VueSimpleHtmlEditor, version } from 'vue-simple-html-editor'
import "vue-simple-html-editor/style.css"

export default {
   components: {
      VueSimpleHtmlEditor
   }
}

2. regiter globally

import { createApp } from 'vue'
import App from './App.vue'
import VueSimpleHtmlEditorPlugin from 'vue-simple-html-editor'
import "vue-simple-html-editor/style.css"

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

<script setup lang="ts">
import { ref } from 'vue'

const articleCode = ref(`
  <h2 style="font-size: 20px;">this is a title block</h2>
  <p>
    click to enter 
    <a href="https://www.baidu.com">baidu</a>
    website
  </p>
  <section>
    <p style="text-indent: 2em;">this is a paragraph block</p>
    <section style="margin: 0 auto;">
        <caption>image caption</caption>
        <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" width="400" />
    </section>
    <section style="margin: 0 auto;">
        <caption>image caption(with link)</caption>
        <a href="https://baidu.com" target="_blank">
          <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" width="400" />
        </a>
    </section>
    </section>
`)
function uploadFunction() {
  return Promise.resolve({
    url: "https://csimg.91xiaojia.com/UpFiles/xj/1000059/2022/000101/01/2022041209560591533120.jpg"
  })
}
function syncArticleCode(code: string) {
  console.info("changed with code: ", code)
}
</script>

<template>
  <div>
    <vue-simple-html-editor :value="articleCode" @change="syncArticleCode" :upload-function="uploadFunction"/>
  </div>
</template>

<style scoped>
</style>

Props

| name | description | type | default value | | --- | --- | --- | --- | | value | rich-text, v-modal is not supported | string | - | | upload-function | image upload function | (file: File) => Promise<{ url: string }> | - | | editorClass | class name for editor wrapper | string | - | | style | style for editor wrapper | CSSProperties | - | | linkActionModalProps | props for link modal | Object | - | | imageActionModalProps | props for image modal | Object | - | | sourceCodeModalProps | props for source code modal | Object | - | | prettifyCodeWhenPreview | should prettify code or not when openning source code preview | true | - |

v-modal is not supported, please use :value and @change instead, and make sure Not to sync the value prop in the @change handler, otherwise it will cause the editor caret reset to editor start point.

Events

| name | description | callback | | --- | --- | --- | | change | triggered whenever value changes | (value: string) => void |

License

MIT