澳门新葡亰娱乐网站-www.142net-欢迎您

澳门新葡亰娱乐网站是因为你还没有找到一条正确的致富之路,www.142net是将所有的游戏都汇集在一起的官方平台,因为澳门新葡亰娱乐网站这个网站当中有着大量的游戏攻略,托IP定位技术,传达终端直接到达的精准传播方式。

vue项目中使用ueditor,vue项目中应用ueditor自定义上

来源:http://www.bhtsgq.com 作者:计算机知识 人气:139 发布时间:2019-08-01
摘要:鉴于上传地址难点,须要自定义上传按键,效果如图   就算百度ueditor的官方网站和文书档案都早就很详细了。可是本人依旧记录下自个儿行使u艾德itor的经过。 方今在做后台处理体系

鉴于上传地址难点,须要自定义上传按键,效果如图

 

就算百度ueditor的官方网站和文书档案都早就很详细了。可是本人依旧记录下 自个儿行使u艾德itor的经过。

方今在做后台处理体系的时候蒙受要动用富文本编辑器。最终选项了ueditor,小编的品类利用 vue项目中使用ueditor,vue项目中应用ueditor自定义上传按钮功能。vue vuex vue-router webpack elementUI的方案形成框架的搭建,

图片 1

以vue-cli生成的等级次序为例

那是 他的官方网址 http://ueditor.baidu.com/website/  例子 文书档案什么的都很详细。

 1、下载UEditor官方网站最新的jsp版本的包,下载达成解压之后获得一个utf8-jsp的公文夹,里面饱含的原委如下:**

由于在页里面未有操作dom,所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。

1.static文书夹下先放入ueditor文件

图片 2

图片 3图片 4

第一是给ueditor增添自定义按键:

2.index.html增加如下代码

<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>
  • 1
  • 2

作者下的是 开荒版中的gbk版(视项指标编码情势而定)

 

1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组增多八个自定义的开关名称,作者写的是"love"

3.webpack.base.conf.js增添如下配置

externals: {
    'UE': 'UE',
  },
  • 1
  • 2
  • 3

 下载下来后 解压 把文件夹拷到您java ee项目标webroot下如图:

 

图片 5

4.index.html中添加

<script type="text/javascript">
  window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路径设定为UEditor所放的位置
</script>
  • 1
  • 2
  • 3

图片 6

2、将那些文件夹改名称为ueditor,并且移入本人项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图:

ueditor.all.js

5.editor组件

<template>
  <div>
    <mt-button @click="geteditor()" type="danger">获取</mt-button>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  </div>
</template>

<script>
const UE = require('UE');// eslint-disable-line

export default {
  name: 'editorView',
  data: () => (
    {
      editor: null,
    }
  ),
  methods: {
    geteditor() {
      console.log(this.editor.getContent());
    },
  },
  mounted() {
    this.editor = UE.getEditor('editor');
  },
  destroyed() {
    this.editor.destroy();
  },
};
</script>

<style>

</style>

 

图片 7图片 8

2,给开关增加事件

图片 9ueditor里面的文件夹都没变 只是jsp文件夹把在那之中的图片 10前两个jar包弄到web-Inf里面的lib下面。

 

要么在ueditor.all.js文件内找到commands指令 给刚才定义的按键扩张事件,如下:

 

 

图片 11

把Uploader.java 放到src上面如图

3、编写子组件

给开关加多事件

图片 12包名和imageUp.jsp  fileUp.jsp里面援引的大同小异。

<template>
  <div :id="id" type="text/plain"></div>
</template>
<script>
  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'

  export default {
    name: 'UE',
    data() {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String,
        default: '请输入内容'
      },
      config: {
        type: Object
      },
      id: {
        type: String,
        default: `ue${Math.random(0, 100)}`
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.editor = UE.getEditor(this.id, this.config); // 初始化UE
        this.editor.addListener("ready", () => {
          this.editor.execCommand('insertHtml', this.defaultMsg);
          this.editor.focus() // 确保UE加载完成后,放入内容。
        })
      })
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      },
      clearContent() { // 清空编辑器内容
        return this.editor.execCommand('cleardoc');
      },
    },
    beforeDestroy() {
      // 组件销毁的时候,要销毁 UEditor 实例
      if (this.editor !== null && this.editor.destroy) {
        this.editor.destroy();
      }
    }
  }
</script>
<style scoped></style>

本文由澳门新葡亰发布于计算机知识,转载请注明出处:vue项目中使用ueditor,vue项目中应用ueditor自定义上

关键词: Java Vue 前台HTML/CSS 澳门新萄京网

最火资讯