vue2使用wangeditor，富文本编辑器

最新推荐文章于 2024-05-21 23:21:19 发布

咸鱼肥美妖娆

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量392

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_51754096/article/details/136826634

版权

下载

cnpm i wangeditor --save

子组件


<template>
  <div class="son">
    <template>
      <div ref="editor"></div>
    </template>
  </div>
</template>

<script>
import WangEditor from 'wangeditor'

export default {
  data () {
    return {
      editor: null,
    }
  },
  props: {
    content: {
      type: String,
      default: ""
    }
  },
  mounted () {
    this.editor = new WangEditor(this.$refs.editor)
    // this.editor.config.menus = []; // 隐藏工具栏，但是全屏隐藏不了
	// this.editor.config.excludeMenus = ['bold', 'italic']; // 隐藏加粗和斜体按钮
    this.editor.create()
    //this.editor.disable() //设置为只读

    this.editor.txt.html(this.content)
    this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config;
    this.editor.customConfig.onchange = html => {
      this.$emit('update:content', html)
    }
  },
}


</script>

<style lang='less' scoped>
//隐藏工具类
/deep/ .w-e-toolbar {
  display: none;
}
//内容头部加边框
/deep/ .w-e-text {
  border-top: 1px solid #000;
}
</style>

父组件

<template>
  <div class="home">
    {{ fuContent }}
    <Son :content="fuContent" @update:content="fuContent=$event" />
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  data () {
    return {
      fuContent: "<p><i><b>你好，我是初始值大叔大婶</b></i></p>",
    };
  },
  components: {
    Son,
  },
};
</script>

<style lang="less" scoped>
</style>