精华内容
下载资源
问答
  • 主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近在做后台管理系统的时候遇到要使用富文本编辑器。最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建,  1、下载UEditor官网最新的jsp版本的包,下载完成解压之后...
  • 前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… ...
  • VUE+百度富文本编辑器

    2020-10-16 16:00:53
    但是总有那么一点吊胃口,百度富文本编辑器官网也不再做更新了,在vue项目中使用的话很难配置,开发过程中遇到的问题! 前期准备工作下载好UEditor 后续提供下载UEditor下载地址 下载好的UEditor文件放置在位置 vue...

    在我们开发过程中或多或少会遇到需要富文本的功能,富文本编辑器其实也很多,但是我们常用的就是那么几个,比如百度UEditor富文本编辑器,这个使用起来也方便,功能也很完善。但是总有那么一点吊胃口,百度富文本编辑器官网也不再做更新了,在vue项目中使用的话很难配置,开发过程中遇到的问题!

    前期准备工作下载好UEditor

    后续提供下载UEditor下载地址UEditor下载

    下载好的UEditor文件放置在位置

    vue-cli3版本放在public目录下,vue-cli2版本放在静态static目录下
    以vue-cli2为例在这里插入图片描述

    其次安装vue-ueditor-wrap

    npm install vue-ueditor-wrap 或者cnpm install vue-ueditor-wrap
    

    Vue中使用步骤实现

    vue文件中html部分代码

     <vue-ueditor-wrap v-model="remark" :config="myConfig"></vue-ueditor-wrap>
    

    vue文件中Js代码部分

     const VueUeditorWrap = window.VueUeditorWrap;// 全局变量,通过 script 标签引入
        export default {
      data(){
             return {
              remark:'我是渲染字段',
              myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 400,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
                serverUrl: '文件上传的接口地址,自己去实现',
                // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
                UEDITOR_HOME_URL: '/static/UEditor/'
              },
    }
    }
    }
    
    展开全文
  • vue 使用百度富文本编辑器,由于element带的编辑器样式过于简单,所以使用百度富文本编辑器。 **第一步:**登陆富文本官网百度富文本编辑器下载最新版本,具体选择哪个语言的版本,你可以问下后端,其实哪个都一样,...

    vue 使用百度富文本编辑器,由于element带的编辑器样式过于简单,所以使用百度富文本编辑器。

    第一步登陆百度富文本官网http://ueditor.baidu.com/website/download.html#ueditor下载最新版本,具体选择哪个语言的版本,你可以问下后端,其实哪个都一样,区别只是为了后面图片上传的配置提供方便。

    在这里插入图片描述
    第二步将下载下来的文件存放在static目录下,并在main.js文件下引入
    在这里插入图片描述
    在这里插入图片描述
    复制代码如下:

    import '../static/utf8-jsp/ueditor.config.js'
    import '../static/utf8-jsp/ueditor.all.min.js'
    import '../static/utf8-jsp/lang/zh-cn/zh-cn.js'
    import '../static/utf8-jsp/ueditor.parse.min.js'
    

    第三步 创建一个ueEdit.vue组件来存放编辑器文本代码,方便引用。
    ueEdit.vue 代码如下,直接复制就好

    <template>
      <div>
        <script id="editor" type="text/plain"></script>
      </div>
    </template>
    <script>
      export default {
        name: 'UE',
        data () {
          return {
            editor: null
          }
        },
        props: {
          defaultMsg: {
            type: String
          },
          config: {
            type: Object
          }
        },
        mounted() {
          const _this = this;
          this.editor = UE.getEditor('editor', this.config); // 初始化UE
          this.editor.addListener("ready", function () {
            _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
          });
        },
        methods: {
          getUEContent() { // 获取内容方法
            return this.editor.getContent()
          }
        },
        destroyed() {
          this.editor.destroy();
        }
      }
    </script>
    

    第四步 在需要的vue 页面里引入百度富文本组件

    //html
    <ueEdit :defaultMsg='content' :config='config' ref="ue"></ueEdit>
    <el-button type="primary" @click="baocun">保存</el-button>
    // content为默认内容  config为配置项 ue方便调用方法 如下
    
    
    //引入组件
    import ueEdit from "./ueEdit"  //可根据自己的实际路径修改
    
    //注册组件
    components:{ueEdit}
    
    //初始配置
    data(){
    		return {
    		 content:'请编辑相关内容',
    	      config: {
    	          initialFrameWidth: null,
    	          initialFrameHeight: 350,
    	       },        
    		}
    },
    methods:{
    	baocun(){
          console.log(  this.$refs.ue.getUEContent())    
      },
    }
       
    

    第五步这是最后一步,就是在static文件夹中找到刚刚存放的富文本文件,找到ueditor.config.js文件,修改里面的参数
    window.UEDITOR_HOME_URL ,如下图。后面的/static/utf8-jsp/ 为存放富文本依赖文件的地方。
    在这里插入图片描述
    完成,到这里基本就出来了。最后还需要配置一下图片上传,不然上传图片icon会是灰色的。
    在这里插入图片描述
    照片上传打开ueditor.config.js 这就需要和后端统一路径啦
    在这里插入图片描述
    大功告成,小伙伴们赶紧去试试吧,有帮助记得给个赞哟!

    展开全文
  • Vue集成百度富文本编辑器UEditor前言实现第一种:Github上网友提供的插件:`vue-ueditor-wrap `第二种:集成官方源码 前言 最近公司的项目需要用的百度的富文本编辑器UEditor,就研究了一下Vue怎么集成UEditor,通过...

    前言

    最近公司的项目需要用的百度的富文本编辑器UEditor,就研究了一下Vue怎么集成UEditor,通过网上查找资料发现了两种实现方法
    资料博客:伏特人族

    实现

    第一种:Github上网友提供的插件:vue-ueditor-wrap

    在这里插入图片描述
    这种方式是最简单的,有非常详细的文档,想使用的小伙伴可以自己去看看,我就不具体实现了
    Github地址:https://github.com/HaoChuan9421/vue-ueditor-wrap

    第二种:集成官方源码

    官网地址:https://github.com/fex-team/ueditor
    先从官网下载UEditor的jsp版本源码
    在这里插入图片描述
    但是发现直接下载jsp版本的入口已经不提供了,只有开发版的完整源码
    在这里插入图片描述
    因为vue集成需要源码的js文件,开发版显然没有直接提供,所有我们需要本地部署编译一下
    在这里插入图片描述
    下载压缩包,解压后以管理员的方式打开cmd进入当前目录

    在这里插入图片描述

    先安装grunt
    官网地址:https://www.gruntjs.net/getting-started

     npm install -g grunt-cli
    

    在这里插入图片描述
    安装项目依赖的库

     npm install
    

    在这里插入图片描述
    执行 grunt 命令

     grunt default
    

    在这里插入图片描述
    完成,没有错误
    然后我们可以看到编译后生成了一个dist文件夹
    在这里插入图片描述
    里面有一个utf8-php文件夹,这是php版本的源码,不过这个也可以用,拿到js源码之后就是vue集成了
    在这里插入图片描述
    将整个utf8-php文件夹复制到vue项目的static目录下,修改目录名称为ueditor
    在这里插入图片描述
    在main.js中引入js文件
    在这里插入图片描述

     import '../static/ueditor/ueditor.config.js'
     import '../static/ueditor/ueditor.all.min.js'
     import '../static/ueditor/lang/zh-cn/zh-cn.js'
     import '../static/ueditor/ueditor.parse.min.js'
    

    创建ueditor富文本组件,组件内容如下
    在这里插入图片描述

    <template>
      <div>
        <script :id="id" type="text/plain"></script>
      </div>
    </template>
    <script>
    export default {
      name: 'ueditor',
      data() {
        return {
          editor: null
        }
      },
      props: {
        defaultMsg: {
          type: String
        },
        config: {
          type: Object
        },
        id: {
          type: String
        },
      },
      mounted() {
        const _this = this;
        this.editor = UE.getEditor(this.id, this.config); // 初始化UE
        this.editor.addListener("ready", function () {
          //延时添加, 防止页面加载富文本编辑器来不及赋值/或网络延时加载不上
          setTimeout(function () {
            _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
          }, 300)
    
        });
      },
      methods: {
        getUEContent() { // 获取内容方法
          return this.editor.getContent()
        },
        getUEContentTxt() { // 获取纯文本内容方法
          return this.editor.getContentTxt()
        }
      },
      destroyed() {
        this.editor.destroy();
      }
    }
    </script>
    

    最后还需要修改一下ueditor.config.js,设置

     window.UEDITOR_HOME_URL = "/static/ueditor/";
    

    在这里插入图片描述
    即可正常使用UEditor了
    在这里插入图片描述

    展开全文
  • vue集成百度UEditor富文本编辑器

    千次阅读 2019-04-29 17:01:29
    百度富文本编辑器的使用: vue-cli实例 1. 百度下载插件, 整个文件夹, 放入static 里面 2. main.js引入 import '../static/UE/ueditor.config.js' import '../static/UE/ueditor.all.min.js' import '../static/UE/...

    vue集成百度UEditor富文本编辑器

    1. 百度下载插件, 整个文件夹, 放入static 里面
    在这里插入图片描述
    2. main.js引入
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190429165617937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg2NDc5Mw==,size_16,color_FFFFFF,t_70

    import '../static/UE/ueditor.config.js'
    import '../static/UE/ueditor.all.min.js'
    import '../static/UE/lang/zh-cn/zh-cn.js'
    import '../static/UE/ueditor.parse.min.js'
    

    3. 组件: Ctrl+c Ctrl+v
    在这里插入图片描述

    <template>
      <div>
        <script :id=id type="text/plain"></script>
      </div>
    </template>
    <script>
      export default {
        name: 'UE',
        data () {
          return {
            editor: null
          }
        },
        props: {
          defaultMsg: {
            type: String
          },
          config: {
            type: Object
          },
          id: {
            type: String
          },
        },
        mounted() {
          const _this = this;
          this.editor = UE.getEditor(this.id, this.config); // 初始化UE
          this.editor.addListener("ready", function () {
            //延时 lkw20190307 添加, 防止页面加载富文本编辑器来不及赋值/或网络延时加载不上
            setTimeout(function () {
              _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
            }, 300)
            
          });
          console.log("上传这堆错误不用理会,上传接口需自行开发配置");
        },
        methods: {
          getUEContent() { // 获取内容方法
            return this.editor.getContent()
          },
          getUEContentTxt() { // 获取纯文本内容方法
            return this.editor.getContentTxt()
          }
        },
        destroyed() {
          this.editor.destroy();
        }
      }
    </script>
    
    

    4. 使用, 在需要的页面使用

    (1) 引入插件
    在这里插入图片描述

    import UE from '../../components/ue/ue.vue';
    
    components: {UE},
    

    (2) 表现层
    在这里插入图片描述
    (3) 定义初始值, 及组件宽高等(在data里面定义)
    在这里插入图片描述

    config: {
    	initialFrameWidth: null,
    	initialFrameHeight: 350
    },
    ue1: "ue1", // 不同编辑器必须不同的id
    ue2: "ue2",
    ue3: "ue3",
    

    (4) 富文本值的获取, methods中:
    在这里插入图片描述

    /**全富文本 */
        getUEContent(ue) {
          let content = this.$refs.ue.getUEContent(); // 调用子组件方法
          this.$notify({
            title: '获取成功,可在控制台查看!',
            message: content,
            type: 'success'
          });
        },
        getUEContentTxt() {
          let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
          this.$notify({
            title: '获取成功,可在控制台查看!',
            message: content,
            type: 'success'
          });
        },
    

    (5) 以formate提交为例, 获取多个富文本的值
    在这里插入图片描述

    if(key == 'abstract') {
    	formData.append('abstract', this.$refs.ue.getUEContent()); // 调用子组件方法, 获取课程介绍富文本值
    } else if(key == 'feature') {
    	formData.append('feature', this.$refs.ue2.getUEContent()); // 调用子组件方法, 获取课程介绍富文本值
     } else if(key == 'teacher') {
    	formData.append('teacher', this.$refs.ue3.getUEContent()); // 调用子组件方法, 获取课程介绍富文本值
     }
    
    展开全文
  • 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ...
  • 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vue,3.0vue讲得非常对模糊。废话不多我们现在开始 第一步: ...
  • vue中使用百度富文本编辑器

    千次阅读 2020-01-06 15:45:06
    一、下载 ...二、下载完成后将文件放入vue项目中的静态资源文件中 按照自己的实际路径修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 在main.js中引用如下 import '....
  • 引入项目的是编译后的1.5.0版本的UEditor,我另一篇文章写的如何编译1.5.0版本的UEditor ...之后在component文件夹下创建一个UEditor.vue文件,在里面初始化UEditor。 <template> <div id="ueditor">
  • 富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用。具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor –save 编写...
  • vue项目中引入UE的方式: 1.首先,当然是去官网把ue的本地下载下来,使用vue-cli构建项目的话通常都是把外部插件放到static文件夹中,所以目录就会呈现如下: 2.配置Ueditor.config.js 主要的还是 ···var URL = ...
  • 但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。 我尝试过 github 上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出...
  • 一、安装依赖 npm i vue-ueditor-wrap ...import VueUeditorWrap from 'vue-ueditor-wrap' // 引入富文本组件 components: { VueUeditorWrap } 四、实例化、v-model绑定数据 <VueUeditorWrap v-model=
  • // 配置 server 接口地址 _this.editorE.config.uploadImgServer = process.env.VUE_APP_API_HOST+'/api/v1/file/uploadImage' //设置富文本的高度 _this.editorE.config.height = 600 //默认限制图片大小是 5M _...
  • 1、百度UEditor插件的安装过程请查看我的另篇博文:http://blog.csdn.net/lzc4869/article/details/784381212、组件(1)组件页面ueditor.vue <script :id=id type="text/plain"></script> </template><script> ...
  • Vue项目引入百度文本编辑器 针对,引入百度文本编辑器,封装组件,多页面引用只加载一些的解决方法,话不多说,上图: 看到有些文章 下面补充一种解决方法,仅供参考: 像这样可以直接解决多个页面引用,不重复...
  • 主要为大家详细介绍了vue2.x集成百度UEditor富文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue 中使用富文本编译器wangEditor3的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 百度ueditor上传图片超范围后有两个问题,一是编辑器里图片显示不完整,二是添加图片后的网页在显示时也会超出网页不好看。想让它自适应100%,网上的方案能解决第一个问题,基本没有第二个问题的方案,经过多次测试...
  • SpringBoot+ Vue + vue-cli SpringBoot+ Vue + vue-cli3+ UEditor详细教程第一步,下载UEditor官网代码:地址:https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads如图,楼主...
  • 开发环境:vue.js 2.0 文件名称:ueditor.vue 使用示例...new Vue({ el:"#app", data:{ }, methods:{ }, components: { // 引入富文本编辑器组件 'ueditor':"url:/component/ueditor.vue" } }) 3) 在页面上调用组件
  • 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'Ueditor', ...
  • 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vue,3.0vue讲得非常对模糊。废话不多我们现在开始 第一步: ...
  • vue富文本编辑器中上传图片

    千次阅读 2019-08-07 19:33:23
    曾经写过一个文档管理的项目,用到最多的就是富文本编辑器。 说说遇到的坑吧:最终的提交结果,后端不要文档流,后端要上传成功返回的路径,不知道正在阅读此文的小伙伴是如何处理的,瞅着挺简单,但写起来还真有点...
  • 当我们需要使用富文本编辑器时,直接调用公共组件即可 ()">获取内容 <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE> .info{ border-radius: 10px; line-height: 20px; padding: ...
  • 先在官网下载压缩包!...解压后放到项目的public里面 安装依赖包npm i vue-ueditor-wrap 在main.js中全局引入 ...Vue.component('vue-ueditor-wrap', VueUeditorWrap) 最后在你要使用的页面注册引入配置即可 <temp

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,088
精华内容 835
关键字:

vue百度富文本编辑器

vue 订阅