vue封装wangEditor-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue封装wangEditor。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

components下面创建WangEditor.vue

<template>
  <div>
    <toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <editor
      style="height: 500px; overflow-y: hidden"
      v-model="modifiedContent"
      :defaultConfig="defaultEditorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="sendMessage"
    />
  </div>
</template>

<script>
import globalConfig from "@/config";
const { zixun_host } = globalConfig;
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const defaultEditorConfig = {
  // JS 语法
  MENU_CONF: {},
  // 其他属性...
};
// 修改 uploadImage 菜单配置
defaultEditorConfig.MENU_CONF["uploadImage"] = {
  server: "上传图片地址",
  fieldName: "file",
  maxFileSize: 5 * 1024 * 1024, // 5M
  timeout: 30 * 1000, // 30秒
  //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
};
export default Vue.extend({
  name: "WangEditor",
  props: {
    content: String,
    toolbarConfig: Object,
  },
  data() {
    return {
      modifiedContent: "",
      headers: {
        Authorization:"token"
      },
      editor: null,
      defaultEditorConfig: defaultEditorConfig,
      mode: "default", // or 'simple'
    };
  },
  components: {
    Editor,
    Toolbar,
  },
  /**
   * 通过监听props的变化，在watch选项中进行处理。
   * @author  我
   */
  watch: {
    content(newVal) {
      this.modifiedContent = newVal;
    },
    modifiedContent(newVal) {
      // 在这里可以进行进一步处理
      //   console.log("Modified Content:", newVal);
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  created() {},
  mounted() {},
  methods: {
    //编辑器创建完毕时的回调函数。
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      console.log(this.editor);
    },
    sendMessage() {
      this.$emit("message-sent", this.modifiedContent);
    },
  },
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

main.js中注册这个全局组件
通过这种方式，可以在每个页面上使用组件，而无需在每个页面中重复导入和注册"@wangeditor/editor-for-vue"组件。记得确保已经安装好"@wangeditor/editor-for-vue"依赖。
组件之间可以通过props和事件来进行参数传递
使用 ↓文章来源地址https://www.toymoban.com/news/detail-706576.html

		<div style="border: 1px solid #ccc; width: 500px">
          <WangEditor
            :content="form.content"
            :toolbarConfig="toolbarConfig"
            @message-sent="handleMessage"
          />
        </div>

const toolbarConfig = {};
toolbarConfig.excludeKeys = [
  "todo", //待办
  "emotion", //表情
  "insertLink", //超链接
  "insertVideo", //表情
  "insertImage", //网络图片
  "group-video", //视频
  "codeBlock", //代码块
  "divider", //分割线
  "fullScreen", //全屏
];

data() {
    return {
      form: formInit(),
      toolbarConfig: toolbarConfig,
    };
  },

	/**
     * 接收组件传来的值
     * @author  我
     */
    handleMessage(message) {
      console.log("Received message:", message);
      this.form.content = message;
    },