UEditor 리치 텍스트 편집기를 통합하는 방법

이번에는 UEditor 리치 텍스트 에디터 통합 방법과 UEditor 리치 텍스트 에디터 통합 시 주의사항에 대해 알려드리겠습니다.

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

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

해당 UEditor 소스 코드 다운로드

우선, 공식 웹사이트에 가서 UEditor 소스 코드를 다운로드하고, 배경 언어에 따라 해당 버전(PHP, Asp, .Net, Jsp)을 다운로드하세요.

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

다운로드 후 리소스를 /static/ue/ 정적 디렉터리에 넣으세요. 문서 구조는 다음과 같습니다: /static/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

  

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

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

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

개발 /src에 <code>UE.vue생성 /comComponents/ 디렉토리 > 파일을 편집기 구성 요소 파일로 사용합니다. 다음 코드는 간단한 기능을 제공합니다. 특정 용도에 대해서는 필요에 따라 구성 요소를 개선하세요.
rrreee

• value는 편집기
  
• config의 텍스트입니다. 는 편집기의 구성 매개변수입니다🎜🎜🎜🎜다른 페이지에서 이 구성요소 사용🎜🎜UEditor가 필요한 페이지를 생성한 다음 이 페이지에 캡슐화된 UE.vue 구성요소를 사용하세요:🎜rrreee🎜Effect As 🎜🎜🎜🎜🎜🎜추가 사항: 서버 측에서 수행해야 하는 구성🎜🎜🎜위 콘텐츠를 구성한 후 콘솔에 "백그라운드 구성 항목의 반환 형식이 올바르지 않으며, 업로드 기능이 제대로 작동하지 않습니다!" 🎜편집기에서 사진이나 동영상을 업로드하면 응답 오류도 나타납니다. 이는 🎜서버 구성🎜에 대한 요청 인터페이스가 없기 때문입니다. ueditor.config.js에서 구성 the serverUrl: 🎜rrreee🎜이 기사를 읽으셨을 것입니다. 사례 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜웹 애플리케이션을 위한 역방향 새로 고침 구현🎜🎜🎜🎜🎜ionic2에서 자동 생성기를 사용하는 방법🎜🎜🎜

위 내용은 UEditor 리치 텍스트 편집기를 통합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!