서식있는 텍스트 편집기 VUE, 낮은 수준의 문제를 해결 TinyMCE에에 대화 상자 TinyMCE에 사용

1, 설치

NPM 설치 TinyMCE에 -S

2 TinyMCE에도로서, 모든 정적 폴더를 포함하는 폴더에 복사 파일 내부 node_modules \ TinyMCE를한다.

 

 

3, TinyMCE에 기본 인터페이스는 영어이지만, 또한 중국 언어 팩 zh_CN.js를 다운로드해야

https://www.tiny.cloud/get-tiny/language-packages/

TinyMCE에의 랭 가문이 폴더에 새 폴더에서 언어 팩 랭 가문도 아래의 폴더로 다운로드.

 

 

 main.js 4, 도입의 TinyMCE에

 

 

 

 

 

 5, 새로운 Editor.vue 파일 폴더 구성 요소

 

 

 Editor.vue :

< 템플릿 > 
  < DIV 클래스 = "SEditor" > 
    < 텍스트 영역 클래스 = "my_editor" ID = "편집기" V-모델 = "Editortext" > </ 텍스트 영역 > 
  </ DIV > 
</ 템플릿 > 

< 스크립트 > 
    수출 기본 { 
        소품 { 
            EditorTexts : ' 
        }, 
        데이터 () { 
            창 { 
                Editortext : ' ,
            }  
        }
        계산 {

        } 
        시계 { 
            EditorTexts : 함수 (newval이, 인 oldval) { 
                CONSOLE.LOG (된 newval) 
                이 .Editortext = 된 newval 
                tinyMCE.activeEditor.setContent (된 newval는) 
            } 
        }, 
        {) (장착 
            이 ) (.tinymce 단계; 
        }, 
        beforeDestroy () { 
            이 $ tinymce.remove (). 
        } 
        방법 : { 
            TinyMCE에 () { 
                _this이하자 =  이 ; 
                _this. $ tinymce.baseURL =  ' / 정적 / TinyMCE에 ' 
                _this $ tinyMCE.init ({. 
                    선택기 : " #editor " , 
                    language_url : ' ../../../../static/tinymce/langs/zh_CN.js ' , // 세트 중국어 
                    언어 : ' zh_CN으로 ' , 
                    플러그인 : // 구성 플러그 : 자신을 자유롭게 선택할 수 있지만,이 지역의 이미지와 이미지 imagetools을 업로드하는 경우 필요가있다 
                        ' advlist 자동 링크 링크 목록 문자표 미리보기 이미지 HR 앵커 페이지 나눔 ' , 
                    ], 
                    // 도구 상자도 쉽게 자신의 구성 할 수있는 
                    도구 모음 :' 
                    }insertfile 실행 취소 다시 실행 | styleselect | 굵은 이탤릭체 | alignleft aligncenter alignright alignjustify | bullist numlist내어 쓰기 들여 쓰기 | 링크 이미지 | 데 ForeColor 배경색 ' , 
                    image_advtab : 사실 , 
                    image_dimensions : 사실 , 
                    폭 : " 97 % " , 
                    높이 : 380 , 
                    table_default_styles { 
                        폭 : " 100 % " , 
                        borderCollapse : ' 축소 ' 
                    IMAGE_TITLE :false로 , // 더 여기에, 영상 타이틀 세트를 선택 켜져 없습니다 제공 
                    automatic_uploads를 : true로 ,
                     // 이미지 업로드 비동기 처리기 
                    images_upload_handler : (blobInfo, 성공, 실패) => {
                         var에 formData, 
                        formData =  새로운 새로운 FormData (); 
                        formData을. 추가] ( ' 파일 ' , blobInfo.blob ());
                         // formData.append ( '그룹', '에디터'); 
                        //이 이 나는 배경 이미지 업로드 인터페이스를 부르는 $ requestPost을 _this. 
                        const를 img_file = blobInfo.blob () 
                        을 console.log (blobInfo.blob ()) 
                        _this $ requestPost (. { 
                            URL : " / baseapi / 파일 = 편집기 그룹? " , 
                            params 객체를 파라미터 : formData, 
                        }, 데이터 => { 
                            성공 ( ' API ' + data.url)
                             // URL 주소는 달리 사진이 서식있는 텍스트 상자에 표시되지 않습니다, 제대로 접합해야 
                        ERR,} => { 
                            실패 ( ' 업로드 실패' ) 
                        )}
                    }, 
                    Init_instance_callback : 기능 (편집자) { 
                        editor.on ( ' keyUp 등 ' , () => {
                             // 내부 콘텐츠를 서식있는 텍스트 편집기 얻을 
                            _this.Editortext = editor.getContent ();
                             // editor.setContent (_this합니다. Editortext는) 

                        }); 
                    } 
                    설정 : (편집자) => {
                         //이 '에 대한 준비'이벤트 후크가 발생합니다 
                        (editor.on를
                            ' 초기화 ' () => {
                                 // CONSOLE.LOG (_this.Editortext) 
                                // CONSOLE.LOG (_this.EditorTexts는) 
                                // Editortext 데이터를 할당 된 값 소품 모니터링 
                                _this.Editortext = _this. EditorTexts 
                                editor.setContent (_this.Editortext) 
                            } 
                        ) 
                        //는 '입력'훅 이벤트 동기 데이터 값 발생 
                        editor.on (
                             " INPUT 변경 사용이 재실행을 취소 ' () => {
                                _this. $ EMIT ( " INPUT " , editor.getContent ()) 
                            } 
                        ) 
                    } 
                    }). 그 후에 (해결 => {
                     // 리치 텍스트 에디터 안에서 내용 초기화 
                    결의 [ 0 ] .setContent (_this.Editortext) 

                }) ; 
            } 

        } 
    } 
</ 스크립트 > 

< 스타일 > 

</ 스타일 >

이 구성 요소를 도입 할 필요가 6,

 

 

 

 

 

 7, 문제 해결 TinyMCE에 낮은 수준으로 대화 상자에서? ? ?

方法很简单，找到F:\hzyy-htnew\static\tinymce\skins\ui\oxide下面的skin.min.css文件，将里面的z-index统一后面加五个零

参考链接：tinymce中文文档 https://www.cnblogs.com/jvziking/p/12028275.html

富文本编辑器tinymce获取文本内容和设置文本内容：https://blog.csdn.net/u012679583/article/details/50505842

初始化：https://segmentfault.com/a/1190000012791569

主要参考：https://blog.csdn.net/vipsongtaohong/article/details/89553271