# 【富文本编辑器】应用示例

<bst-editor/> 组件文档

# 基础使用

组件使用代码

<template>
  <div style="padding:32px;max-width: 600px;">
    <bst-editor :defaultHtml="defaultHtml" @input="onInputText" hasPreview></bst-editor>
  </div>
</template>
<script>
  export default {
    name: "index",
    data() {
      return {
        defaultHtml: `<p>静夜思</p><p>床前明月光,疑似地上霜。</p><p>举头望明月,低头思故乡。</p><img src="https://image.tz12306.com/media/frontResources/images/others/0b07ec1f66833358f724e463.jpg" width="30%">`
      }
    },
    methods: {
      onInputText({html, text}) {
        console.log({html, text})
      }
    }
  }
</script>
显示代码

编辑此文档 (opens new window)