在网页中使用富文本编辑器editor+vue

Z时代
2024-01-10
分类：综合

vue

先下载一个富文本编辑器（官网地址）

在vue中新建一个editor.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>
<style></style>

把下载好的uditor压缩文件夹放在static中

改一下config里面的这一行（第一行）。

然后在需要用到的vue中使用它，具体如下：

<template>
    <div class="components-container">
       <div class="info"></div>
       <div class="editor-container">
       <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
       </div>
    </div>
</template>
<script>
import UE from '../../editor.vue';
export default {
    components: {UE},
    data () {
        return: {
          defaultMsg: '这里是UE测试',
          config: {
            initialFrameWidth: null,
            initialFrameHeight: 350
          },
        }    
    }
}
</script>
<style>
.info{
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}</style>