当前位置: 首页 > 工具软件 > wangEditor > 使用案例 >

wangEditor

那昊
2023-12-01

项目中用到了wangEditor,遇到了两个非常奇葩的问题

1、在进行内容输入的时候,输入中文,总是会将第一个字母变成英文展示到文本区域,去官网试了一下,发现也有这个问题,暂时的解决办法就是

 text(val) {
      if (val&&val!='<p><br/></p>') {
        this.editor.config.focus = true
        this.editor.txt.html(val)
      }else{
        this.editor.config.focus = false
        this.editor.txt.html('<p>&nbsp;</p>');
      }

监听输入内容的变化,在没有值的时候加一个空格

2、输入中文字符,按一下字符按键,会出现两个这个字符

就在change下面将焦点置为false,在text进行watch监听的时候再给true

具体代码如下:

initWangEditor() {
      this.editor = new E(this.$refs.wangEditor);
      //配置颜色
      this.editor.config.colors = [
        "#000000",
        "#F40",
        "#FFB6C1",
        "#1E90FF",
        "#00CED1",
        "#00FF00",
        "#FF7F50",
        "#808000",
        "#00FFFF",
        "#4169E1",
        "#800080",
      ];
      //配置显示菜单项
      this.editor.config.menus = [
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        // 'head',  // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        // "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        // "video", // 插入视频
        // "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
      ];
      // 本地图片上传:关闭外部图片引入
      // this.editor.config.showLinkImg = false;
      this.editor.config.uploadImgServer = this.$config.baseUrl+'uploadPicAndFile';
      this.editor.config.uploadImgHooks={
        before: function (xhr, editor, files) {
          this.loading=true
        },
        customInsert: function (insertImg, result, editor) {
          var url = result.data.fileUrl
          insertImg(url)
          this.loading=false
        }
      }
      // //本地上传视频
      // this.editor.config.showLinkVideo = false;
      // this.editor.config.uploadVideoServer = this.$config.baseUrl+'uploadPicAndFile';
      // this.editor.config.uploadVideoHooks={
      //   customInsert: function (insertvideo, result, editor) {
      //     var url = result.data.fileUrl
      //     insertvideo(url)
      //   }
      // }
      //获取文本区域中的内容
      this.editor.config.onchange = (html) => {
        this.newHtml = html; // html文本
        this.newText = this.editor.txt.text(); // text文本
        this.$emit("change", this.newHtml, this.newText);
      };
      // 配置触发 onchange 的时间频率,默认为 200ms
      this.editor.config.onchangeTimeout = 500; // 修改为 500ms
      // 去除复制过来文本的默认样式
      this.editor.config.pasteFilterStyle = true;
      //自定义 placeholder 提示文字
      this.editor.config.placeholder = "请填写工作内容";
      //设置高度
      this.editor.config.height = 250;
      this.editor.config.focus = false
      this.editor.create();
      // 添加内容前做异常捕获,避免this.text值问题导致报错
      // try {
      //   //继续追加内容(用于初始化查询回填数据)
      //   // this.editor.txt.append(this.text);
      // } catch (e) {
      //   console.info(e);
      // }
    },

 

 类似资料: