본문 바로가기

JQuery-js-css

daumOpen에디터 다중처리



안녕하세요 :)

3개 이상의 에디터도 2개를 쓸때와 마찬가지 방법으로 사용가능합니다.

  • 3번째 에디터용 html을 넣음
  • id값을 중복되지 않게 설정
  • 설정한 id값에 맞추어 3번째 에디터용 config값을 설정
  • 2번째 에디터가 IFRAME_LOAD_COMPLETE가 되면 3번째 에디터를 생성



 var config4 = {

        txHost: '', 

        txPath: '', 

        txService: 'sample', 

        txProject: 'sample', 

        initializedId: "4", /* 다른 editor와 구분 */

        wrapper: "tx_trex_container4", /* 에디터를 둘러싸고 있는 레이어 이름(에디터 컨테이너) */

        form: "tx_editor_form4"+"", /* 등록하기 위한 Form 이름 */

        txIconPath: "images/icon/editor/", 

        txDecoPath: "images/deco/contents/", 

        canvas: {

            styles: {

                color: "#123456", 

                fontFamily: "굴림",

                fontSize: "10pt", 

                backgroundColor: "#fff", 

                lineHeight: "1.5", 

                padding: "8px" 

            },

            showGuideArea: false

        },

        events: {

            preventUnload: false

        },

        sidebar: {

            attachbox: {

                show: true

            },

            attacher: {

                file: {

                    popPageUrl: "pages/trex/file.html?config=4"

                }

            }

        },

        size: {

            contentWidth: 700 

        }

    };



EditorJSLoader.ready(function (Editor) {

        new Editor(config2);

        Editor.getCanvas().observeJob(Trex.Ev.__IFRAME_LOAD_COMPLETE, function() {

            Editor.modify({

                content: 'Editor2'

            });

            new Editor(config3);

            Editor.getCanvas().observeJob(Trex.Ev.__IFRAME_LOAD_COMPLETE, function(ev) {

                Editor.modify({

                    content: 'Editor3'

                });

                new Editor(config4);

                Editor.getCanvas().observeJob(Trex.Ev.__IFRAME_LOAD_COMPLETE, function(ev) {

                    Editor.modify({

                        content: 'Editor4'

                    });


                });

            });

        });

    });