一分钟入门vue+ueditor

来源:简书 分类: 文章浏览史 发布时间:2020-09-07 20:06:31 最后更新:2020-09-07 浏览:20
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-07 20:06:31

UEditor是百度的一个javascript富文本编辑器,功能强大,常见的富文本编辑器中总有它的一席之地,今天我们就写一个简单的demo来学习如何在vue-cli中使用它,以及图片上传!

第一步,先下载依赖

npm i vue-ueditor-wrap -S

第二步,引入到项目中

import VueUeditorWrap from 'vue-ueditor-wrap'

第三步,注册组件

components: {
    VueUeditorWrap
}

第四步,在模板中使用组件

<template>
  <div>
    <VueUeditorWrap/>
  </div>
</template>

这个时候我们已经可以在页面中看到编辑器的样子了


WX20190603-234937@2x.png

但是我们往往需要更多的功能,比如图片上传,因此我们需要一些其他东西来支持我们的工作,这里通过点赞后盗用大神的一份文件(n(≧≦)n)https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads,我在本项目中所使用的是utf8-php.zip,解压后放在static下并命名为UEditor

WX20190603-234802@2x.png

接下来,请看全部代码

<template>
  <div>
    <VueUeditorWrap 
      v-model="message" 
      :config="editorConfig" 
      @ready="ready"
    />
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import evtHub from '@/common/eventHub.js'
export default {
  name: "Editor",
  components: {
    VueUeditorWrap
  },
  props: ["content"],
  data() {
    return {
      evtHub: evtHub,
      message: '',
      // 简单配置
      editorConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口, 报错属于正常,若需要验证可使用(也是盗大神的)http://35.201.165.105:8000/controller.php
        // 调试完毕打包上线则切换回/static/UEditor/php/controller.php即可,不用做其他处理
        serverUrl: '/static/UEditor/php/controller.php',
      }
    };
  },
  mounted() {
    // 这里是从列表页编辑时做的内容注入,没有需要可以不写
    this.message = this.content;
  },
  methods: {
    ready(editorInstance) {
    // 这里可以拿到ueditor的实例,比如editorInstance.getContent()就可以拿到编辑器的html内容
      this.evtHub.$emit('editor.data', editorInstance);
    }
  }
};
</script>

参考自:https://github.com/HaoChuan9421/vue-ueditor-wrap

php技术微信