VUE 富文本 wangEditor v4版本增加源码模式与 Monaco Editor结合使用

最新推荐文章于 2026-05-25 17:27:29 发布

原创

最新推荐文章于 2026-05-25 17:27:29 发布 · 2.8k 阅读

VUE 富文本找了好多开源库 , 发现 wangEditor Github的星最多应该也是值得信赖的
但是在使用过程中发现wangEditor 没有源码模式, 文档也说明需要自己对接

wangEditor官方文档

于是自己写了一个与 Monaco Editor结合使用例子

废话不多说,先上效果

wangEditor 效果
Monaco Editor 效果

// 在需要使用富文本 使用自己 封装自定义的组件

import Wangeditor from "@/components/customEditor";

 <customEditor
     v-model="value"
 />

customEditor.vue

//  customEditor
<template lang="html">
  <div>
    <editor v-if="!showCode" :height="height"  @change="changeValue" :value="value" />
    <monaco v-else :height="height"  @change="changeValue" :value="value" />
    <div class="bottom"><el-link  :underline="false" @click="showCode = !showCode"><i class="el-icon-view el-icon--right"></i>  
    {
   
   {
   
    showCode?"可视化界面":"查看源码"}}</el-link></div>
  </div>
</template>

<script>
import monaco from "./monaco";
import editor from "./editor";

export default {
   
   
  components:{
   
   
    monaco,editor
  },
  data() {
   
   
    return {
   
   
      showCode:false, // 是否查看源码
    };
  },
  props: {
   
   
    value: {
   
   
      type: String,
      default: "",
    },
    height: {
   
   
      type: Number,
      default: 0,
    }
  },
  mounted() {
   
   
   
  },
  methods: {
   
   
  		// wangEditor/Monaco Editor 改变的值做保存
      changeValue(value){
   
   
         this.$emit("input",value)
      }
  },
};
</script>