vue+element-ui 使用富文本编辑器

  1. npm安装编辑器组件
    npm install vue-quill-editor –save

  2. 在components文件夹创建ue.vue组件,如下
    新增ue.vue文件
    ue.vue代码如下:

<!-- 组件代码如下 -->
<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data() {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后,放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy()
    }
  }

</script>
  1. 页面代码部分
<template>
  <div>
    <el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
      </quill-editor>
    </el-card>
  </div>
</template>

<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    data() {
      return 
### 关于 VueElement-UI 实现富文本编辑 #### 插件推荐 对于在 Vue 项目中集成富文本编辑器,`vue-quill-editor`是一个不错的选择[^1]。此插件不仅易于配置而且具有丰富的功能集。 #### 安装过程 为了开始使用 `vue-quill-editor` ,可以通过 npm 来安装该包到项目里: ```bash npm install vue-quill-editor --save ``` #### 示例代码 下面是一段简单的例子来展示如何在一个基于 VueElement-UI 的应用中引入并使用 Quill 编辑器: ```html <template> <div id="app"> <!-- 富文本编辑器 --> <quill-editor v-model="content"></quill-editor> <!-- 预览区 --> <div class="ql-container ql-snow preview" v-html="content"></div> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor, }, data() { return { content: '', } } } </script> <style scoped> .preview{ margin-top:20px; border:1px solid #ccc; min-height:100px; } </style> ``` 这段代码展示了基本的设置方式以及如何通过双向绑定 (`v-model`) 将输入的内容存储起来,并提供了一个预览区域用于显示渲染后的 HTML 结果。 另外,在某些场景下可能还会涉及到初始化 UEditor 这样的第三方库的情况,比如如下所示的方式可以用来创建一个名为 editor 的实例[^2]: ```javascript this.editor = UE.getEditor('editor', this.config); ``` 不过需要注意的是,UEditor 并不是专门为 Vue 设计的组件,因此如果希望获得更好的开发体验,建议优先考虑像 `vue-quill-editor` 这样更贴近框架特性的选项。 #### 更多功能需求下的解决方案 当面对更加复杂的需求时,还可以参考成熟的管理平台模板如 `vue-element-admin` 。这个开源项目已经实现了许多实用的功能模块,其中包括了对富文本编辑的支持[^3]。这不仅可以节省大量的时间成本,同时也能够借鉴其优秀的架构设计思路。
评论 30
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值