精华内容
下载资源
问答
  • 于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor源码,地址 把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件,打开...
  • vue使用百度富文本编辑器

    千次阅读 2020-06-29 11:57:56
    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 这就需要和后端统一路径啦
    在这里插入图片描述
    大功告成,小伙伴们赶紧去试试吧,有帮助记得给个赞哟!

    展开全文
  • 前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… ...
  • 引入项目的是编译后的1.5.0版本的UEditor,我另一篇文章写的如何编译1.5.0版本的UEditor ...之后在component文件夹下创建一个UEditor.vue文件,在里面初始化UEditor。 <template> <div id="ueditor">

    引入项目的是编译后的1.5.0版本的UEditor,我另一篇文章写的如何编译1.5.0版本的UEditor
    编译后,把dist文件里面文件放到项目的public/plugins/ueditor
    在这里插入图片描述
    相关自定义配置看官方文档就行了,为了快速把项目搭建好,我就改了ueditor.config.js的根路径
    在这里插入图片描述
    注意路径最前面也要加上/

    之后在component文件夹下创建一个UEditor.vue文件,在里面初始化UEditor。

    <template>
      <div id="ueditor"></div>
    </template>
    
    <script>
    import '../../../public/plugins/UEditor/ueditor.config'
    import '../../../public/plugins/UEditor/ueditor.all'
    import '../../../public/plugins/UEditor/lang/zh-cn/zh-cn'
    import '../../../public/plugins/UEditor/themes/default/css/ueditor.css'
    
    export default {
      name: "UEditor",
      data() {
        return {
          UEditor: null
        }
      },
      mounted() {
        this.initUEditor()
      },
      beforeDestroy() {
        if (this.UEditor && this.UEditor.destroy) this.UEditor.destroy()
      },
      methods: {
        initUEditor() {
          let config = {
            fullscreen: true
          }
          // eslint-disable-next-line no-undef
          this.UEditor = UE.getEditor('ueditor', config)
          this.UEditor.addEventListener('ready', () => {
            console.log('UEditor is Ready')
          })
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    

    后面要对代码进行优化,比如config设置为可传参数、id也是(为了兼容多编辑器共存的问题)
    或者通过setContent和事件总线bus,来实现编辑器里面值得绑定。

    展开全文
  • 先在官网下载压缩包!...解压后放到项目的public里面 安装依赖包npm i vue-ueditor-wrap 在main.js中全局引入 ...Vue.component('vue-ueditor-wrap', VueUeditorWrap) 最后在你要使用的页面注册引入配置即可 <temp

    先在官网下载压缩包![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051117395313.png在这里插入图片描述
    解压后放到项目的public里面在这里插入图片描述

    安装依赖包npm i vue-ueditor-wrap

    在main.js中全局引入
    在这里插入图片描述

    import VueUeditorWrap from 'vue-ueditor-wrap'
    Vue.component('vue-ueditor-wrap', VueUeditorWrap)
    

    最后在你要使用的页面注册引入配置即可
    在这里插入图片描述

    <template>
       <vue-ueditor-wrap v-model="ruleForm.content" :config="myConfig"></vue-ueditor-wrap>
    </template>
    
    <script>
    import VueUeditorWrap from 'vue-ueditor-wrap';
       
    export default {
        omponents: { VueUeditorWrap },
        data() {
            return {
              ruleForm:{
                content:''
              },
                /* ueditor */
                myConfig: {
                    // serverUrl: `${__GATEWAYPATH__}/ueditor/ueditorConfig`, // 上传功能的后端服务器接口地址
                    UEDITOR_HOME_URL: '/ueditor/', // 你的UEditor资源存放的路径,相对于打包后的index.html
                    autoHeightEnabled: true, // 编辑器是否自动被内容撑高
                    autoFloatEnabled: false, // 工具栏是否可以浮动
                    initialFrameHeight: 340, // 初始容器高度
                    initialFrameWidth: '100%', // 初始容器高度
                    enableAutoSave: true // 关闭自动保存
                },
            };
        },
    }
    </script>
    
    <style>
    
    </style>
    
    展开全文
  • 最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。 项目地址:https://github.com/suweiteng/vue2-management-platform  1.放入静态资源并配置 首先把官网下载的Ueditor资源,放入...
  • 富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用。具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor –save 编写...
  • 但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。 我尝试过 github 上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出...

    我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢?呵呵,当然这是极好的。但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。
    在这里插入图片描述
    我尝试过 github 上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出的 UEditor 编辑器口碑不错,文档充分,还是很不错的选择(百度能有良心产品,不容易啊!)。但是 UEditor 没有 npm 安装,需要我们自己手工引入进来。这个到底怎么解决呢,我查找了一些资料,把这些给理顺了。今天出这个文章给遇到这个问题的朋友参考。
    准备集成 UEditor 编辑器

    下载 UEditor 编辑器 源码

    首先,下载 UEditor 源码。我这边下载的是 UEditor 1.4.3.3 PHP UTF-8版本 下载地址:http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-php

    下载之后,把资源放到 /static/ue/ 目录下。文档结构如下:

    在这里插入图片描述
    编辑 UEditor 编辑器 配置文件

    我们打开 ueditor.config.js 找到var URL = window.UEDITOR_HOME_UR 将它设置为:

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

    然后我们可以给一些默认的参数,比如编辑器的默认宽高等:

    initialFrameWidth: null
    
    initialFrameHeight: 480
    

    上面的编码风格也是满奇葩的,还好还好

    其他的配置参数,请参考官方文档进行配置:http://fex.baidu.com/ueditor/

    集成到 UEditor 编辑器到我们的系统中

    main.js 引用 UEditor
    

    我们打开 /src/main.js 文件,在合适位置插入下面的代码:

    // 配置百度编辑器

    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'
    

    创建 UEditor VUE 组件

    我们在 /src/components/ 目录下创建 ue.vue 文件,作为我们的编辑器组件文件。

    文件内容如下:

    <template>
    
    <div>
    
    <script id="editor" type="text/plain"></script>
    
    </div>
    
    </template>
    
    <script>
    
    export default {
    
    name: 'ue',
    
    data () {
    
    return {
    
    editor: null
    
    }
    
    },
    
    props: {
    
    value: '',
    
    config: {}
    
    },
    
    mounted () {
    
    const _this = this
    
    this.editor = window.UE.getEditor('editor', this.config)
    
    this.editor.addListener('ready', function () {
    
    _this.editor.setContent(_this.value)
    
    })
    
    },
    
    methods: {
    
    getUEContent () {
    
    return this.editor.getContent()
    
    }
    
    },
    
    destroyed () {
    
    this.editor.destroy()
    
    }
    
    }
    
    </script>
    

    好,这段代码不难,应该能够理解。如果不能够理解也没关系,只需要知道下面这段代码是接受我们的参数的就可以了。

    props: {
    
    value: '',
    
    config: {}
    
    },
    

    其中 value 是默认的编辑器的文字。一般我们留空即可,而 config 是编辑器的配置参数。这里就是上一节中讲的那些配置,这里可以接受个性配置参数。

    好,这个文件扔这里不管了。

    在其他页面引用该组件

    我们创建一个页面,路由配置以及其他内容不表,不清楚看我 github 代码演示。

    内容如下:

    <template>
    
    <div>
    
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    
    <input type="button" value="显示编辑器内容(从控制台查看)" @click="returnContent">
    
    </div>
    
    </template>
    
    <script>
    
    import Uediter from '@/components/ue.vue'
    
    export default {
    
    components: {Uediter},
    
    data () {
    
    return {
    
    dat: {
    
    content: ''
    
    },
    
    ueditor: {
    
    value: '编辑器默认文字',
    
    config: {}
    
    }
    
    }
    
    },
    
    methods: {
    
    returnContent () {
    
    this.dat.content = this.$refs.ue.getUEContent()
    
    console.log(this.dat.content)
    
    }
    
    }
    
    }
    
    </script>
    

    这里,我们将组件引用进来,并且可以配置一些参数。我不习惯把配置参数放在根下面,所以搞了一个:

    ueditor: {
    
    value: '编辑器默认文字',
    
    config: {}
    
    }
    

    亲测成功,我没有配置上传图片等接口对接,不过这是后端的工作。其他的,比如本地存储之类的,都是没有问题的。

    这里需要注意的是,编辑器的内容不能实时的保存进我们的 dat.content 里面,需要触发一下 returnContent 方法,才可以获取到这个数据,实际开发中,点击提交按钮时触发一下即可。

    展开全文
  • 使用百度富文本编辑器的同学,应该知道用原有的"代码语言"功能写出来的代码显示毫无高亮显示,让人毫无看下去的欲望,就像下面这样。所以我决定使用highlight.js来美化一下,让代码高亮显示。首先下载安装...
  • 在我们开发过程中或多或少会遇到需要富文本的功能,富文本编辑器其实也很多,但是我们常用的就是那么几个,比如百度UEditor富文本编辑器,这个使用起来也方便,功能也很完善。但是总有那么一点吊胃口,在vue项目中...
  • VUE+百度富文本编辑器

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

    千次阅读 2020-01-06 15:45:06
    一、下载 ...二、下载完成后将文件放入vue项目中的静态资源文件中 按照自己的实际路径修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 在main.js中引用如下 import '....
  • 需求(PC端用它互不直曾经明以机会式近分扯。多接相常)做一个可以使用图片上传、视频上传、文件...做法当时看到这个需求,我觉得是不难的,就去github上找富文本编辑器,因为项目比较急,当时我的想法是能找开箱即用的...
  • 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vue,3.0vue讲得非常对模糊。废话不多我们现在开始 第一步: ...
  • 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'Ueditor', ...
  • vue集成百度UEditor富文本编辑器

    千次阅读 2017-11-06 17:58:00
    在前端开发的项目中。难免会遇到需要在页面上集成一个富...于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址:http://ueditor.ba...
  • vue-cli2.0中放在static文件夹下面 新建一个js文件放在components中 export const ueditConfig = { autoHeightEnabled: false, initialFrameHeight: 300, initialFrameWidth: "100%", serverUrl: "文件...
  • 先从网上下载包 下载地址 下载之后将包放入静态文件夹 之后前端配置ueditor.config.js文件 这里配置后端的图片上传地址 之后下载vue-ueditor-wrap ...UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成
  • 1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版(有图有真相,...1.如果是在vue脚手架中集成百度富文本框,则将解压后选取部分文件新建文件夹U...
  • 一、安装依赖 npm i vue-ueditor-wrap ...import VueUeditorWrap from 'vue-ueditor-wrap' // 引入富文本组件 components: { VueUeditorWrap } 四、实例化、v-model绑定数据 <VueUeditorWrap v-model=
  • // 导入ueditor相关import '../../static/UE/ueditor.config.js'import '../../static/UE/ueditor.all.js'import '../../static/UE/lang/zh-...
  • 开发环境:vue.js 2.0 文件名称:ueditor.vue 使用示例...new Vue({ el:"#app", data:{ }, methods:{ }, components: { // 引入富文本编辑器组件 'ueditor':"url:/component/ueditor.vue" } }) 3) 在页面上调用组件

空空如也

空空如也

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

vue使用百度富文本编辑器

vue 订阅