vue3富文本编辑器wangeditor
时间: 2023-11-03 14:06:51 浏览: 250
HTML前端wangEditor富文本编辑器demo(jQuery)
wangeditor是一个Vue3富文本编辑器。要使用它,您需要下载所需的依赖并引入CSS和组件。然后,您可以在Vue模板中插入相应的标签来使用编辑器。
以下是使用wangeditor的基本步骤:
1. 下载依赖:使用npm命令`npm i @wangeditor/editor @wangeditor/editor-for-vue`下载所需的依赖。
2. 引入CSS和组件:在您的Vue组件中,使用`import`语句引入wangeditor的CSS和编辑器组件。例如: `import '@wangeditor/editor/dist/css/style.css'` 和 `import { Editor, Toolbar } from '@wangeditor/editor-for-vue'`。
3. 在模板中插入编辑器标签:在您的Vue模板中,插入以下代码来使用wangeditor编辑器:
```
<div style="border: 1px solid #dcdfe6;width: 100%;border-radius: 4px;">
<toolbar style="border-bottom: 1px solid #dcdfe6;width: 100%;border-radius: 4px;" :editor="editorRef" :default-config="toolbarConfig" mode="default" />
<editor v-model="ruleForm.noticeContent" style="height: 300px; overflow-y: hidden;" :default-config="editorConfig" mode="default" @onCreated="onCreated" />
</div>
```
以上是使用wangeditor的基本步骤,您可以按照这些步骤进行配置和使用该富文本编辑器。
阅读全文