Vue2.0에서 서식 있는 텍스트 편집기를 구현하는 방법

이번에는 Vue2.0에서 리치 텍스트 editor를 구현하는 방법을 보여드리겠습니다. Vue2.0에서 리치 텍스트 편집기를 구현하기 위한 노트가 무엇인지 살펴보겠습니다.

vue 프로젝트에서 서식 있는 텍스트 편집기를 사용해야 한다는 점을 알게 되었어요. github에서 많은 vue 캡슐화 편집기 플러그인을 살펴보았지만 그 중 대부분이 이미지 업로드와 비디오 업로드를 잘 지원하지 않기로 결정했습니다. UEditor를 사용합니다.

인터넷에는 그러한 기사가 많이 있습니다. 나는 이 기사를 구성하기 위해 탐색하고, 손으로 작성한 코드를 요약하고, 조판했습니다.

해당 UEditor 소스 코드를 다운로드하세요

먼저 공식 웹사이트로 이동하여 UEditor의 소스 코드를 다운로드하고 배경 언어에 따라 해당 버전(PHP, Asp, .Net, Jsp)을 다운로드합니다.

http://ueeditor.baidu.com/website/download.html

다운로드 후 리소스를 /<a href="http://www.php.cn/wiki/188.html" target="_blank">static<code>/<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>/ue/ 静态目录下。

（我把UEditor放到了static静态目录下面，这里的文件不会被webpack打包，当然你也可以选择性地放进src中）

编辑 UEditor 编辑器 配置文件

我们打开 ueditor.config.js，修改其中的window.UEDITOR_HOME_UR配置，如下：

window.UEDITOR_HOME_URL = "/static/UE/";   //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

ueditor.config.js文件有很多配置，可以在这里进行一些初始化的全局配置，比如编辑器的默认宽高等：

,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
,initialFrameHeight:320 //初始化编辑器高度,默认320

其他的参数配置，在该文件中有详细列出，或者参考官方文档 http://fex.baidu.com/ueditor/

将编辑器集成到系统中

打开 /src/main.js 文件，插入下面的代码：

//ueditor
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'

开发公共组件 UE.vue

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

下面代码提供简单功能，具体使用根据需求完善该组件即可。

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

组件暴露了两个接口：

• value是编辑器的文字

• config/ue/ 정적

  디렉토리.

(저는 UEditor를 static static 디렉터리에 넣었습니다. 여기에 있는 파일은 webpack에 의해 패키징되지 않습니다. 물론 선택적으로 src에 넣을 수도 있습니다)

UEditor 편집기 편집 구성 파일

ueditor.config.js를 열고 window.UEDITOR_HOME_UR 구성을 다음과 같이 수정합니다.

<template>
  <p>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <button @click="returnContent">显示编辑器内容</el-button>
    <p>{{dat.content}}</p>
  </p>
</template>
<script>
  import Uediter from '@/components/UE.vue';
  export default {
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 800,
            initialFrameHeight: 320
          }
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      }
    },
    components: {
      Uediter
    },
  }
</script>

ueditor.config.js 파일에는 편집기의 기본 너비 및 높이와 같은 몇 가지 초기 전역 구성을 만들 수 있습니다.

// 服务器统一请求接口路径
, serverUrl: 'http://172.16.254.49:83/File/UEditor'  //地址管你们后端要去

다른 매개변수 구성은 이 파일에 자세히 나열되어 있거나 공식 문서 http://fex.baidu.com/ueditor/

를 참조하세요. 편집기를 시스템에 통합

/src/main.js 파일을 열고 다음 코드를 삽입하세요:

rrreee 공개 구성 요소 UE.vue 개발
/src/comComponents/ 디렉토리에 UE.vue 파일을 편집기 구성 요소 파일로 생성합니다.

다음 코드는 간단한 기능을 제공합니다. 특정 용도에 대해서는 필요에 따라 구성 요소를 개선하면 됩니다. rreee 구성 요소는 두 가지 인터페이스를 노출합니다:

• 값은 편집기의 텍스트입니다.

• 
  

• config는 편집기의 구성 매개변수입니다 🎜🎜🎜🎜 다른 페이지에서 이 구성요소를 사용하세요🎜🎜 간단히 UEditor가 필요한 페이지를 생성한 다음, 페이지에 캡슐화된 UE.vue 컴포넌트를 사용하세요: 🎜rrreee🎜 위 콘텐츠를 구성한 후 콘솔에 "백그라운드 구성 항목의 반환 형식이 올바르지 않아 업로드 기능이 제대로 작동하지 않습니다!"라는 오류 메시지가 표시될 수 있습니다. 🎜 편집기에서 이미지나 동영상을 업로드하면 응답 오류가 발생합니다. 🎜Configuring the server🎜에 대한 요청 인터페이스가 없기 때문에 ueditor.config.js에서 serverUrl을 구성하세요. 🎜rrreee🎜 이 글의 사례를 읽으신 후 방법을 익히셨을 것입니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요! 🎜🎜추천 자료: 🎜🎜🎜Vue 구성 요소 개발 기술은 무엇입니까? 🎜🎜🎜🎜🎜Vue 프로젝트를 패키징하고 Baidu에 업로드하는 BAE 단계에 대한 자세한 설명🎜🎜🎜🎜🎜@HostBinding()과 @HostListener의 차이점 () AngularJS🎜 🎜🎜🎜

위 내용은 Vue2.0에서 서식 있는 텍스트 편집기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!