vue-simple-html-editor v1.2.0

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

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

License

MIT