精华内容
下载资源
问答
  • 2022-04-18 20:28:54

    vue使用百度富文本编辑器(ueditor)

    前言:
    最近项目中用到ueditor,但从来没有在vue上使用过,于是就简单尝试,但是始终不成功。搜索了几乎所有博客,但是基本都是从一个地方copy复制的!!!
    关键还都是错的,我的妈呀,真的受不了,被误导了好久,最后总算搞出来了。
    个人觉得博客是知识的传播载体,书写的时候还是应该带有责任感,而不是只会机械的复制粘贴,自己会的就是会,不会的就是不会,不应该做“南郭先生”。衷心的希望编辑博客的同学,在书写个人技术博客时还是负点责任,毕竟你是一个导师的角色。
    言归正传,因为这个功能很简单,但被误导好久所以有点火大,好吧继续讲安装和使用的操作。

    操作大纲:

    1.进入官网或者github下载源码
    2.使用grunt编译
    3.引入`public/static`文件夹
    4.安装`vue-ueditor-wrap`
    5.组件中引入,自定义组件
    

    1.进入官网或者github下载源码

    地址:https://github.com/fex-team/ueditor

    2.使用grunt编译

    grunt是什么

    全局安装grunt

    npm install -g grunt-cli
    

    将下载好的ueditor压缩包解压(我下载的zip格式);

    使用vscode(或其他)开发工具进入目录,输入命令npm install 安装依赖;

    依赖安装好以后,使用命令grunt default进行编译;

    进入编译后生成的dist目录中复制utf8-php目录到vue项目的static/public 目录中,修改utf8-php目录名为UEditor

    注意:

    vue-cli2中我们放入的是static文件夹,设置UEDITOR_HOME_URL/static/UEditor/

    vue-cli3中放入的是public文件夹,设置UEDITOR_HOME_URL/UEditor/

    例如:

    在这里插入图片描述

    4.安装vue-ueditor-wrap

    npm install vue-ueditor-wrap
    

    5.组件中引入,自定义组件

    引入组件:

    <vue-ueditor-wrap v-model="dataStr" :config="myConfig"></vue-ueditor-wrap>
    
    import VueUeditorWrap from 'vue-ueditor-wrap'
    
    components: {
      VueUeditorWrap
    }
    

    参数配置:

    data () {
      return {
        dataStr: '我是渲染字段',
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 400,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
          serverUrl: 'http://127.0.0.1:8080/ueditor',
          // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
          UEDITOR_HOME_URL: '/static/UEditor/'
        }
      }
    }
    

    OK,结束,效果如下:

    在这里插入图片描述

    更多相关内容
  • 于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor源码,地址 把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件,打开...
  • 主要介绍了vue中使用ueditor富文本编辑器的相关资料,需要的朋友可以参考下
  • 前端富文本编译器使用总结: 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,来实现编辑器里面值得绑定。

    展开全文
  • 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 这就需要和后端统一路径啦
    在这里插入图片描述
    大功告成,小伙伴们赶紧去试试吧,有帮助记得给个赞哟!

    展开全文
  • 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vue,3.0vue讲得非常对模糊。废话不多我们现在开始 第一步: ...

    原文链接:https://blog.csdn.net/fuyuan98520/article/details/110224802

    前言:

    在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vuecli,vuecli3.0讲得非常对模糊。废话不多我们现在开始

    第一步:

    下载百度编辑器,由于官方原因,现在官方都是使用一个超大版对,我使用对旧版对JSP版,旧版JSP版可下载

    第二步:

    (1)将下载对项目重命名到public下的static文件夹下,这里的static文件需自己新建。

    (2)添加

    第三步:

    在项目中运行安装依赖包   npm i vue-ueditor-wrap

    第四步:

    在需要使用对组件中

    (1)引用

    import VueUeditorWrap from 'vue-ueditor-wrap';


    (2)挂载

    (3)数据绑定 : msg用于数据绑定

    (4)运用 在需要用的地方

    <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>


    原文链接:https://blog.csdn.net/fuyuan98520/article/details/110224802

    展开全文
  • Vue集成百度富文本编辑器UEditor前言实现第一种:Github上网友提供的插件:`vue-ueditor-wrap `第二种:集成官方源码 前言 最近公司的项目需要用的百度的富文本编辑器UEditor,就研究了一下Vue怎么集成UEditor,通过...
  • 最近开发vue项目过程中,由于产品需要在项目中添加富文本编辑器,也在npm上找了几个基于vue开发的富文本编辑器,但是对兼容性比较高,不能兼容到IE9,10。所以最后决定使用百度UEditor。然后又是各种找如何集成到vue...
  • 基于百度富文本编辑器封装的vue 组件 链接 https://github.com/haochuan9421/vue-ueditor-wrap 下载依赖 # vue-ueditor-wrap v2 仅支持 Vue 2 npm i vue-ueditor-wrap@2.x # 或者 yarn add vue-ueditor-wrap@2.x ...
  • VUE3如何引入百度富文本编辑器 https://hc199421.gitee.io/vue-ueditor-wrap/#/home
  • vue中使用百度富文本编辑器

    千次阅读 2020-01-06 15:45:06
    一、下载 ...二、下载完成后将文件放入vue项目中的静态资源文件中 按照自己的实际路径修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 在main.js中引用如下 import '....
  • 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 ...
  • 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'Ueditor', ...
  • 项目介绍: vue---nuxt项目 vue项目:ueditor(vue-ueditor-wrap) vue+vue-ueditor-wrap+秀米 - 简书
  • vue集成百度UEditor富文本编辑器

    千次阅读 2017-11-06 17:58:00
    在前端开发的项目中。难免会遇到需要在页面上集成一个富...于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址:http://ueditor.ba...
  • 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了。 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化...
  • 在data数据中重新配置 config中的contextMenu 下载与使用可参考一下文档: vue项目中使用vue-ueditor-wrap_理想和远方_在路上的博客-CSDN博客
  • VUE+百度富文本编辑器

    2020-10-16 16:00:53
    但是总有那么一点吊胃口,百度富文本编辑器官网也不再做更新了,在vue项目中使用的话很难配置,开发过程中遇到的问题! 前期准备工作下载好UEditor 后续提供下载UEditor下载地址 下载好的UEditor文件放置在位置 vue...
  • 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vue,3.0vue讲得非常对模糊。废话不多我们现在开始 第一步: ...
  • 开发环境:vue.js 2.0 文件名称:ueditor.vue 使用示例...new Vue({ el:"#app", data:{ }, methods:{ }, components: { // 引入富文本编辑器组件 'ueditor':"url:/component/ueditor.vue" } }) 3) 在页面上调用组件
  • 富文本编辑器导出word

    2021-01-14 14:05:49
    将系统中富文本编辑器内容导出到word文件(包含图片)
  • UE编辑器示例需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。支持页面内多次调用。获取内容获取无文本内容.info {border-radius: 10...
  • 年过事工宗据指数遍互业经搞断果会要使用富文本编辑器时,直接调用公抖要支圈者器说是事天开的。年后编定功口小发还应久剑共组件即可 获取内容 如果有严格模式报错 Uncaug框互理。各近架跳机蓝种近架跳机蓝种近架跳...
  • 在我们项目中,有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有实用价值,需要的朋友可以参考下
  • vue富文本编辑器 Vue-Quill-Editor
  • 百度 UMeditor 编辑器资源免费下载地址: https://download.csdn.net/download/WanweI897/67333059 (注意:我修改了 UMeditor 源码里面的css样式文件以用于自己项目,同时在 umeditor.min.js 文件中导入了jquery以...

空空如也

空空如也

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

百度富文本编辑器vue