vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用

这篇具有很好参考价值的文章主要介绍了vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.效果图

vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用,vue,组件,vue.js,javascript

 2.安装依赖

npm install wangeditor

 3.在main.js 全局引入 富文本组件

import editorBar from "@/components/editor/editor.vue";
Vue.component('editorBar', editorBar) 

全局引入页面使用 

<editor-bar v-model="form.nr" :flag="false" @change="getcontent" />

mothods:{

     //获取富文本内容

    getcontent (content) {

       this.form.nr = content;

    },

}

或者直接在组件中使用

<editor-bar v-model="form.nr" :flag="false" @change="getcontent" />

import EditorBar from "@/components/editor/editor"; 

components: {

    EditorBar,

  },

mothods:{

     //获取富文本内容

    getcontent (content) {

       this.form.nr = content;

    },

}

4.封装富文本文件   在src公共文件下新建一个命名为editor.vue的文件

详情可参考:富文本编辑器安装使用_editor-bar_可不&可以的博客-CSDN博客

 

<template>
  <div id="wangeditor" class="editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import {
  uploadPictures
} from '@/api/user'
export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      required: true,
    },

    //是否禁用
    flag: {
      type: Boolean,
      required: true,
    },
  },
  data () {
    return {
      editor: null,
      info_: null,
      tableHeight: '600px',
      uploadurl: process.env.VUE_APP_BASE_API + '/cs/localStorage/pictures',
    }
  },

  watch: {
    value (newval) {
      if (newval !== this.editor.txt.html()) {
        this.editor.txt.html(newval)
      }
    },
    flag: {
      immediate: true,
      handler: function (newval) {
        this.$nextTick(() => {
          this.editor.$textElem.attr('contenteditable', newval)
        })
      },
      deep: true,
    },
  },
  mounted () {
    //初始化富文本编辑器
    this.seteditor();
    // 这一步非常重要,用于富文本修改信息的时候,数据回显
    // this.value是父子传参,动态传值的
    this.editor.txt.html(this.value);

  },
  methods: {
    seteditor () {
      let that = this
      that.editor = new E(that.$refs.toolbar, that.$refs.editor)
      that.editor.customConfig.uploadImgShowBase64 = false
      that.editor.customConfig.pasteFilterStyle = true

      // 配置菜单
      that.editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        // 'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        // 'video', // 插入视频
        // 'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
        // 'fullscreen', // 全屏
      ]
      that.editor.customConfig.onchange = (html) => {
        that.info_ = html // 绑定当前逐渐地值
        that.$emit('change', that.info_) // 将内容同步到父组件中
      }
      // 字号
      // console.log(this.editor)
      that.editor.customConfig.uploadImgServer = that.uploadurl
      that.editor.customConfig.uploadFileName = 'file'

      //自定义图片上传
      that.editor.customConfig.customUploadImg = function (files, insert) {
        // file是是input中选中的文件列表 
        //  insert是获取图片url后,插入到编辑器中的方法
        var formData = new FormData();
        var obj = {};
        for (var i = 0; i < files.length; i++) {
          obj = files[i]
        }
        //后端所需的参数
        formData.append('file', obj);
        uploadPictures(formData).then(result => {
          let url = 'http://192.168.2.40:8080/cs/file/' + result.type + '/' + result.realName
          insert(url);
        })
      };
      // 创建富文本编辑器
      that.editor.create()
    }
  }
}
</script>

<style lang="scss" scoped>
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

::v-deep table {
  border-collapse: collapse;
}

.toolbar {
  border: 1px solid #ccc;
}

.text {
  border: 1px solid #ccc;
}

::v-deep .w-e-text-container {
  height: 500px !important;
}

::v-deep #wangeditor {
  .w-e-text-container {
    z-index: 1 !important;
    // table {
    // margin-left: 0 !important;
    // }
  }

  .w-e-toolbar {
    flex-wrap: wrap;
  }

  .w-e-menu {
    z-index: auto !important;

    .w-e-droplist {
      z-index: 2 !important;
    }
  }
}
</style>
 文章来源地址https://www.toymoban.com/news/detail-537682.html

到了这里,关于vue使用富文本编辑器 Wangeditor 可显示编辑新增回显禁用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE2整合富文本编辑器 wangEditor

    2024年02月20日
    浏览(48)
  • vue2+wangEditor5富文本编辑器

    1、安装使用 安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save  在main.js中引入样式 import \\\'@wangeditor/editor/dist/css/style.css\\\'   在使用编辑器的页面引入js  import { Editor, Toolbar } from \\\"@wangeditor/editor-fo

    2024年01月22日
    浏览(50)
  • React----富文本编辑器wangEditor的使用

    wangEditor 5 —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。 官网:www.wangEditor.com 注意: wangeditor都是小写字母 Editor : 编辑器组件 Toolbar: 菜单栏组件 实例化编辑器 工具栏配置决定了在工具栏显示哪些工具,菜单配置决定了该工具使用时的相关配置。

    2024年01月21日
    浏览(57)
  • HTML——实现富文本编辑器wangEditor的使用

    背景:最近在写小说项目,关于发布文章需要用到富文本编辑器,由于还没学到Vue,最实用的还是用wangEditor富文本编辑器。 官方文档:http://www.wangeditor.com/ 使用手册:创建一个编辑器 · wangEditor3使用手册 · 看云 (kancloud.cn) 至于实现的方式有三种: 一.导入wangEditor.JS 使用方法

    2024年02月11日
    浏览(40)
  • vue2+wangEditor5富文本编辑器(图片视频上传)并加锚链接

    官网:https://www.wangeditor.com/v5/installation.html#npm 1、安装使用 安装 在main.js中引入样式 在使用编辑器的页面引入js 模板 js 到这一步编辑完就可以正常显示了 2、上传图片、视频 1)上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致 2)自定义上传(一

    2024年02月12日
    浏览(51)
  • vue2+wangEditor5富文本编辑器(图片视频自定义上传七牛云/服务器)

    1、安装使用 安装 在main.js中引入样式 在使用编辑器的页面引入js 模板 js  到这一步编辑器就可以正常显示了 2、上传图片、视频 上传到后台接口的可直接按照文档这个配置就行接口返回格式也要可文档上一致    2)自定义上传(一般上传到别的服务器上,我这边是上传到七

    2024年02月11日
    浏览(65)
  • Vue中使用 WangEditor 编辑器的详细教程

    WangEditor 是一个基于 JavaScript 的富文本编辑器,提供了丰富的编辑功能和灵活的定制能力。以下是 WangEditor 的一些优点: 易于集成和使用 :WangEditor 提供了清晰的 API 和文档,易于集成到各种前端项目中,无论是基于 Vue、React 还是其他框架。 功能丰富 :WangEditor 提供了丰富的

    2024年02月07日
    浏览(49)
  • wangEditor富文本编辑器图片/视频上传

    wangEditor 有丰富的 API 和足够的扩展性,允许我们自定义开发菜单、模块、插件等。在 Vue、React 中运用也很方便。因此本文介绍下vue中富文本上传图片和视频。 安装引入后富文本有显示上传图片按钮,点击上传后会报 没有配置上传地址 的错误,如下图所示: 所以自定义上传

    2024年02月15日
    浏览(60)
  • Vue3项目中使用富文本编辑器

    tinymce简介 一、 安装 二、使用步骤 1. 封装组件 2. 组件中挂载 3.应用富文本 总结 TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费。 一、安装Tinymce 注意:版本可根据

    2024年02月15日
    浏览(47)
  • vue使用富文本编辑器vue-quill-editor

    问题描述: 我们在开发过程中经常会遇到使用富文本编辑器进行操作,当前插件市场上关于富文本的编辑器挺多的,我们就不一一个介绍了,现在我们主要讲解一些vue-quill-editor富文本编辑器的使用操作和注意事项。 效果图 具体操作使用 1. 安装 2. 引入到项目中 有两种挂载方

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包