精华内容
下载资源
问答
  • vue使用百度富文本教程
    2020-12-03 12:02:30

    众所周知,富文本插件市面上多的很,国外的我们不谈,国内的也多如牛毛!!不得不说的是,百度自家的产品还是很不错的》》虽然早就不维护了。也比一些小流的好用,功能全。虽然操作起来复杂的多

    直接贴代码
    引入就不废话了,直接全局挂载

    引入

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

    模板

    <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>
    

    这里注册个组件

    <template>
      <div>
              <div class="editor-container" >
                <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
              </div>
      </div>
    </template>
    <script>
    
      import UE from '../components/ue'
      export default {
    components: {UE},
        data() {
          return {
            defaultMsg: '',
            config: {
              initialFrameWidth: 800,
              initialFrameHeight: 350
            },
            data:'',
            ruleForm: {
              content:''
            },
           
        },
        watch: {},
        methods: {
          getUEContent() {
                this.ruleForm.content = this.$refs.ue.getUEContent();     
                //console.log(this.ruleForm.content)
              },
          // 获取编辑信息
          article() {
           this.$get('td/noticeInfo' + '/' + this.$route.query.id).then(res => {
              if (res.code == 200) {
                //console.log(res)
                this.ruleForm = res.data
                if (res.data.disabled === 'true') {
                  this.ruleForm.disabled = true
                } else {
                  this.ruleForm.disabled = false
                }
                this.defaultMsg = res.data.content
              }
            })
          },
        
        created() {
          this.app_ids()
          this.id = this.$route.query.id
        },
        mounted () {
          this.$nextTick(()=> {
            //console.log('加载完毕')
             if (this.$route.query.id) {
                  this.article()
              }
          })
         
       }
      };
    </script>
    
    <style scoped>
    
    
    </style>
    
    
    
    更多相关内容
  • 主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue中使用ueditor富文本编辑器的相关资料,需要的朋友可以参考下
  • 主要介绍了vue富文本框(插入文本、图片、视频)的使用及问题小结,需要的朋友可以参考下
  • 主要介绍了Spring+Vue整合UEditor富文本实现图片附件上传的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue使用百度富文本编辑器(ueditor)

    千次阅读 2022-04-18 20:28:54
    vue使用百度富文本编辑器(ueditor) 前言:最近项目中用到ueditor,但从来没有在vue上使用过,于是就简单尝试,但是始终不成功。搜索了几乎所有博客,但是基本都是从一个地方copy复制的!!! 关键还都是错的,我...

    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,结束,效果如下:

    在这里插入图片描述

    展开全文
  • UE编辑器示例需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg...获取内容获取无文本内容.info {border-radius: 10px;line-height: 20px;padding: 10px;margin: 10px;background-color: #ffffff;}im...

    UE编辑器示例


    需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。支持页面内多次调用。

    获取内容

    获取无文本内容

    .info {

    border-radius: 10px;

    line-height: 20px;

    padding: 10px;

    margin: 10px;

    background-color: #ffffff;

    }

    import UE from "../../components/ueditor.vue";

    export default {

    components: { UE },

    data() {

    return {

    defaultMsg:

    '夏钧姗:成功的投资需具备哪些心态和掌握哪些重要止损位',

    config: {

    initialFrameWidth: null,

    initialFrameHeight: 350

    },

    ue1: "ue1", // 不同编辑器必须不同的id

    ue2: "ue2"

    };

    },

    methods: {

    getUEContent() {

    let content = this.$refs.ue.getUEContent(); // 调用子组件方法

    this.$notify({

    title: "获取成功,可在控制台查看!",

    message: content,

    type: "success"

    });

    console.log(content);

    },

    getUEContentTxt() {

    let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法

    this.$notify({

    title: "获取成功,可在控制台查看!",

    message: content,

    type: "success"

    });

    console.log(content);

    }

    }

    };

    7.运行项目效果如图:

    a9dd166b34243d7b8a954a6ac4ae58b6.png

    8.会出现这样的报错,是由于后端无配置接口请求,后续完善

    3049a520b9910c568251b1b46b637dd2.png

    觉得不错就关注点赞,欢迎评论不足之处,后期上传GitHub案例

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

    展开全文
  • 引入项目的是编译后的1.5.0版本的UEditor,我另一篇文章写的如何编译1.5.0版本的UEditor ...之后在component文件夹下创建一个UEditor.vue文件,在里面初始化UEditor。 <template> <div id="ueditor">
  • VUE+百度富文本编辑器

    2020-10-16 16:00:53
    但是总有那么一点吊胃口,百度富文本编辑器官网也不再做更新了,在vue项目中使用的话很难配置,开发过程中遇到的问题! 前期准备工作下载好UEditor 后续提供下载UEditor下载地址 下载好的UEditor文件放置在位置 vue...
  • VUE3如何引入百度富文本编辑器 https://hc199421.gitee.io/vue-ueditor-wrap/#/home
  • Vue集成百度富文本编辑器UEditor前言实现第一种:Github上网友提供的插件:`vue-ueditor-wrap `第二种:集成官方源码 前言 最近公司的项目需要用的百度的富文本编辑器UEditor,就研究了一下Vue怎么集成UEditor,通过...
  • 主要为大家详细介绍了vue2.x集成百度UEditor富文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近使用Vue工程+百度富文本ueditor碰到一个需求 需要解决多图上传图片排序的问题 参考一篇文章可以完美解决 文章连接丢失。。。 多图上传写入文本框的图片顺序和上传的顺序不一致 修改两个地方第一个ueditor/...
  • // 导入ueditor相关import '../../static/UE/ueditor.config.js'import '../../static/UE/ueditor.all.js'import '../../static/UE/lang/zh-...
  • 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'Ueditor', ...
  • 在data数据中重新配置 config中的contextMenu 下载与使用可参考一下文档: vue项目中使用vue-ueditor-wrap_理想和远方_在路上的博客-CSDN博客
  • vuevue2.x使用百度富文本(UEditor) 一、下载 github地址下载自己需要的版本,我选择的是utf8-jsp版本。 解压后如图所示,jsp文件夹是demo可以删除。 二、配置 将文件夹重命名为ueditor,移动到你项目的静态资源...
  • 本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤。 第一步:上传图片,第二步:保存到服务器,并且...
  • 项目介绍: vue---nuxt项目 vue项目:ueditor(vue-ueditor-wrap) vue+vue-ueditor-wrap+秀米 - 简书
  • 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常对乱,试了几个都没有,原因基本都是2.0版本的vue,3.0vue讲得非常对模糊。废话不多我们现在开始 第一步: ...
  • 前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery… ...
  • vue中使用百度富文本编辑器

    千次阅读 2020-01-06 15:45:06
    一、下载 ...二、下载完成后将文件放入vue项目中的静态资源文件中 按照自己的实际路径修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 在main.js中引用如下 import '....
  • vue集成百度UEditor富文本编辑器

    千次阅读 2017-11-06 17:58:00
    在前端开发的项目中。难免会遇到需要在页面上集成一个富...于是我将百度富文本编辑器放到vue项目中使用。效果图如下 废话不多说。 1、使用vue-cli构建一个vue项目。然后下载UEditor源码。地址:http://ueditor.ba...
  • 先从网上下载包 下载地址 下载之后将包放入静态文件夹 之后前端配置ueditor.config.js文件 这里配置后端的图片上传地址 之后下载vue-ueditor-wrap ...UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成
  • 多接相常)做一个可以使用图片上传、视频上传、文件上传功能的富文本组件,简单的文本编辑发布功能,采用socke览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前些模小架端如结的事告...
  • 百度富文本vue项目中的使用

    千次阅读 2018-03-16 14:52:41
    百度富文本配置这里不做过多的说明,详情请参看官网文档,http://fex.baidu.com/ueditor/#start-config定义富文本单独的组件&lt;template&gt; &lt;script ref="editor" type="text/...

空空如也

空空如也

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

vue 百度富文本