wangeditor介绍文档

wangeditor的原文博客链接


自己配置了下……

一些常见配置：

  1. 设置可编辑器内容区域的高度
 instance.config.height = 350;
  1. 同步获取富文本编辑器的内容是方法onchange()，内容是instance.txt.html()
    onchange() {
          // 将值instance.txt.html() 传递至父组件
          content.emit('getWangEditorValue', instance.txt.html());
        },
  1. 设置富文本编辑器的内容是 instance.txt.html('富文本内容')
 instance.txt.html()
  1. 清空编辑器内容
instance.txt.clear()

1. 安装wangeditor

cnpm install wangeditor
2. WangEditor.vue基本配置

WangEditor.vue

<template>
    <div ref='editor'></div>
</template>
<script lang="ts">
import { onMounted,defineComponent, onBeforeUnmount, ref, toRefs } from 'vue';
// 引入wangeditor组件
import WangEditor from 'wangeditor';
// 引入代码高亮组件
import hljs from 'highlight.js'
// 公共状态文件
// 官方文档：https://www.kancloud/wangfupeng/wangeditor3/335774
export default  defineComponent({
  name: 'Wangeditor',
 // 设置富文本编辑器的HTML内容
  props:{
      contentHtml:String,
  },
  setup(props: any, content: any) {
    // 获取编辑器实例html
    const editor = ref();
    // 编辑器实例对象
    let instance: any = '';
    onMounted(() => {
      // 编辑器实例对象
      instance = new WangEditor(editor.value);
        // 自定义菜单
      instance.config.menus = [
        // 'head',
        'bold', //字体加粗
        'fontSize',//字号
        'fontName',//字体
        // 'italic',
        // 'underline',//下划线
        // 'strikeThrough',//删除线
        // 'indent',
        // 'lineHeight',
        'foreColor',
        // 'backColor',
        'link',
        'list',//列表
        // 'todo',
        'justify',//对其
        // 'quote',// 引用
        'emoticon',
        'image',
        // 'video',//视频
        // 'table',//表格
        'code',
        // 'splitLine',
        'undo',//撤销
        'redo',//恢复
      ];
      // 代码高亮
      instance.highlight = hljs;
      // 开启本地上传图片(这是后端上传链接)
      instance.config.uploadImgServer = '/upload-img';
      // 限制上传图片格式
      instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
      // 开启本地上传视频(这是后端上传链接)
      instance.config.uploadVideoServer = '/api/upload-video';
      // 设置编辑器高度
      instance.config.height = 350;
      // 设置编辑器页面层级
      instance.config.zIndex = 10;
      // 设置编辑器placeholder
      instance.config.placeholder = '请输入您的文字！';
      // 配置编辑器显示颜色
      instance.config.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf'
      ];
      // 忽略粘贴内容中的图片
      instance.config.pasteIgnoreImg = true;
 
      Object.assign(instance.config, {
        // wangeditor 值发生变化的时候
        onchange() {
          // 将值instance.txt.html() 传递至父组件
          content.emit('getWangEditorValue', instance.txt.html());
        },
        // 上传网络图片回调
        linkImgCallback(src:string){
          console.log('图片 src ', src)
        },
        // 上传网络视频回调
        onlineVideoCallback(video:string) {
          // 自定义回调内容，内容成功插入后会执行该函数
          console.log('插入视频内容', video)
        }
      });
       instance.create();

        // 设置富文本编辑器的页面内容，父组件传递的
        instance.txt.html(props.contentHtml)
    });
   //  页面卸载
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    return {
      editor,
    };
  },
});
</script>
3. 使用demo:
<template>
  <div>
    {{data.contentHtml}}
    <div class="wangeditor">
      <wang-editor :contentHtml="data.contentHtml" v-on:getWangEditorValue="getWangEditorValue"></wang-editor>
    </div>
    <button @click="submit">提交获取富文本内容</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import WangEditor from "@/components/WangEditor.vue";
export default defineComponent({
  components: {
    WangEditor,
  },
  setup() {
    const data = reactive({
      // 设置富文本内容 contentHtml:'渲染的富文本内容'
      contentHtml: "",
    });
    const getWangEditorValue = (str: string) => {
      data.contentHtml = str;
    };
    // 保存提交文章内容
    const submit = () => {
      console.log("富文本编辑器内容是:", data.contentHtml);
    };
    return {
      data,
      submit,
      getWangEditorValue,
    };
  },
});
</script>

后续再写……

更多推荐

wangeditor富文本编辑器在vue3中的使用