에디터 윈도우인 opener의 editorReplaceHTML를 이용하여 에디터에서 선택된 부분을 _createImg()로 만든 그래프 이미지인 <img /> tag 로 치환합니다.
차후 에디터에서 콘텐트 수정을 위해 <img />의 editor_component attribute는 "pchart"를 title attribute에 "항목1:값1, 항목2:값2 .." 로 설정합니다.

// 에디터에 추가
function insertPChart() {
    // 창을 띄운 윈도우가 없을 경우 종료
    if(typeof(opener)=='undefined') return;

    var str = _createImg();

    opener.editorFocus(opener.editorPrevSrl);
    var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)
    opener.editorReplaceHTML(iframe_obj, str);
    window.close();
}

// api를 이용하여 이미지 경로를 만들고 <img /> tag를 생성
function _createImg(){
    // init
    var title=[],value=[],h,w,t=[],v=[],info='',src='';

    // google api 기본 url를 가져옴
    var url = jQuery('#api_url').val();
    
    // 이미지의 높이 넓이
    h = jQuery('#chart_height').val();
    w = jQuery('#chart_width').val();

    // 차트 항목 타이틀
    jQuery('inputid^=title').each(function(){
        title.push(jQuery(this).val());
    });

    // 차트 항목 값
    jQuery('inputid^=value').each(function(){
        value.push(jQuery(this).val());
    });

    // 차트 항목 타이틀 및 값이 유효한 값만
    for(var i=0,c=title.length;i<c;i++){
        if(titlei.length>0 && valuei.length>0){
            t.push(titlei);
            v.push(valuei);
            info += titlei + ':' +valuei + ',';
        }  
    }  

    // 차트 이미지 tag 생성
    src = url.setQuery('cht','p3')
                .setQuery('chd','t:'+v.join(','))
                .setQuery('chs',w+'x'+h)
                .setQuery('chl',t.join('|'))
                .setQuery('dummy','.png');

    return '<img src="'+url+'" width="'+w+'" height="'+h+'" editor_component="pchart" alt="pie chart" title="'+info+'" />';

}

수정시에는 사용자가 에디터에서 만들어진 파이 차트를 더블클릭 합니다.

더블클릭 이벤트는 XE_ROOT/modules/editor/tpl/js/editor_common.js 의 editorEventCheck()가 받아 editor_component attribute값으로 해당 컴포넌트를 연결하여 pchart::getPopupContent()가 호출되어 설정창이 뜹니다.

이때 opener인 에디터 창에서 변수 editorPrevNode 값에 선택된 node가 들어가게 되어 opener.editorPrevNode를 이용하여 차트생성시 title에 셋팅해둔 값을 읽어와 jQuery ready 이벤트시(창이 로드될 때) 설정 팝업창 input에 값을 넣어 주게 됩니다.

// 수정시
jQuery(function(){
    // 선택된 노드
    var node = jQuery(opener.editorPrevNode).length;
    if(node.length){

        // title attribute 파싱
        var i=0;
        node.attr('title').replace(/(^,:+):(0-9+)/g,function(m1,m2,m3){
            jQuery('#title'+i).val(m2);
            jQuery('#value'+i).val(m3);
            i++;
        });

        // 넓이와 높이
        jQuery('#chart_height').val(node.attr('height'));
        jQuery('#chart_width').val(node.attr('width'));
    }
});