vue 에서 ueditor 부 텍스트 편집기 사용 하기

2916 단어 vueueditor
최근 배경 관리 시스템 을 만 들 때 부 텍스트 편집 기 를 사용 해 야 합 니 다.마지막 으로 ueditor 를 선 택 했 습 니 다.제 프로젝트 는 vue+vuex+vue-router+webpack+elementUI 를 사용 하여 프레임 워 크 구축 을 완 료 했 습 니 다.
 1.UEditor 홈 페이지 의 최신 jsp 버 전의 패 키 지 를 다운로드 하고 압축 해제 가 완료 되면 utf8-jsp 폴 더 를 얻 을 수 있 습 니 다.그 안에 포 함 된 내용 은 다음 과 같 습 니 다.

2.이 폴 더 를 ueditor 로 이름 을 바 꾸 고 프로젝트 의 static 폴 더 에 옮 겨 서 ueditor.config.js 폴 더 의 내용 을 수정 합 니 다.다음 그림:

3.하위 구성 요소 작성

<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>
4.부모 구성 요소 에서 사용

<UE :config="configEditor" :id="ue1" ref="ue" :defaultMsg="val"></UE>
5.다 한 후에 사진 을 올 리 면 백 엔 드 설정 항목 http 오 류 를 알 리 고 파일 업로드 시 업로드 오 류 를 알 립 니 다.여기 서 설명 하지 마 세 요.ueditor 는 전단 에 설정 한 후 백 엔 드 부분 과 협조 하여 진행 해 야 합 니 다.그리고 ueditor.config.js 에 있 는 server Url 의 접 두 사 를 백 엔 드 접근 요청 경로 주 소 를 변경 합 니 다.

serverUrl: "      "
총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue 에서 ueditor 부 텍스트 편집 기 를 사용 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
Vue 에서 highCharts 를 사용 하여 3d 떡 그림 을 그 리 는 방법
React Native 사용자 정의 컨트롤 아래쪽 서랍 메뉴 의 예제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage