CKEditor 용 동적 템플릿

Question

웹 응용 프로그램의 UserControl에 CKEditor가 임베드되어 있습니다. 로컬 컴퓨터와 서버에서 CKEditor의 기본 템플릿을로드하면 모두 정상적으로 작동합니다.

데이터베이스 테이블에서 템플릿을 가져 와서 결과를 적절한 JSON 형식으로 변환 한 다음이를 자바 스크립트 파일에 작성하여 CKEDITOR.template_files에 추가합니다.

내가 JS 파일에 생성있어 JS 내용의 예 :

이제

CKEDITOR.addTemplates('templateskey',{imagesPath:'',templates:[{title:'LCH - Complaint', image:'', description:'Message Template - Complaints', html:'HtmlContent'}]}); 

내 문제가 이상로드 해야하는 때문에 우리의 서버가 동적으로 JS이 생성 한에 파일이 차단 얻을 것이다 HTTPS . 이 파일 또는 내 파일을 찾을 수 없습니다.

Uncaught TypeError: Cannot read property 'imagesPath' of undefined

내가 CKEditor의 ASP.Net 버전을 다운로드에 프로젝트를 포함 시켰습니다 :이 CKEDITOR.config는 "templatesKey"템플릿을로드하려고 시도와 함께 그렇게 실패 후

[blocked] The page at 'https://...' was loaded over HTTPS, but ran insecure content from 'http://...' (page not found url): this content should also be loaded over HTTPS.

내 해결책. 나는 뒤에 코드에서 myCKEditor.TemplatesFiles 및 myCKEditor.Templates을 설정하고 있습니다 :

myCKEditor.TemplatesFiles = "['" + relativePath + "']"; 
myCKEditor.Templates = "templateskey"; 

내가 동적으로 JS 파일을 생성하고있어 문제인가? 아니면 템플릿 플러그인이 HTTPS가 아닌 HTTP를 통해 콘텐츠를로드하는 문제입니까? 동적으로 템플릿을 CKEditor에 추가하는 더 좋은 방법이 있습니까?

Answer 1

SSH와 HTTPS에 대한 전문 지식이있는 친구에게 이야기하고 있습니다. 콘텐츠를 동적으로 생성 할 때 콘텐츠를 잠재적 위협 및 안전하지 않은 것으로 간주하므로 HTTPS에 제한이 될 수 있습니다.

CkEditor - Template loaded from AJAX은 문제의 좋은 해결책입니다.

ASP .Net으로 작업하는 경우 처리기를 빌드 할 수 있습니다. ajax를 사용하여 핸들러를 호출하고 JSON을 다시 전달하십시오.

예컨대 핸들러 :

//Implement IRequiresSessionState is you want anything from the session state 
public class TemplateHandler : IHttpHandler, IRequiresSessionState 
    { 
     /// <summary> 
     /// You will need to configure this handler in the Web.config file of your 
     /// web and register it with IIS before being able to use it. For more information 
     /// see the following link: http://go.microsoft.com/?linkid=8101007 
     /// </summary> 
     #region IHttpHandler Members 

     public bool IsReusable 
     { 
      // Return false in case your Managed Handler cannot be reused for another request. 
      // Usually this would be false in case you have some state information preserved per request. 
      get { return true; } 
     } 

     public void ProcessRequest(HttpContext context) 
     { 
      try 
      { 
       //write your handler implementation here. 
       string ID = Convert.ToString(context.Session["ID"]); 

       DataSet dsTemplates = ExecuteStoredProc("uspTemplateRead"); 
       if (!dsTemplates.ContainsData()) 
        return; 

       List<Template> templates = new List<Template>(); 
       foreach (DataRow row in dsTemplates.Tables[0].Rows) 
       { 
        Template template = new Template(); 
        template.Title = row["Title"].ToString(); 
        template.Image = "template.gif"; 
        template.Description = row["Descr"].ToString(); 
        template.Html = row["Temp"].ToString(); 
        templates.Add(template); 
       } 

       byte[] b; 
       DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(typeof(List<Template>)); 
       using (MemoryStream stream = new MemoryStream()) 
       { 
        jsonSerializer.WriteObject(stream, templates); 
        b = stream.ToArray(); 
       } 
       context.Response.Clear(); 
       context.Response.ContentType = "application/json"; 
       context.Response.AddHeader("Content-Length", b.Length.ToString()); 
       context.Response.BinaryWrite(b); 
       context.Response.Flush(); 
      } 
      catch (Exception ex) 
      { 
       throw ex; 
      } 
     } 
} 

그리고 Ajax 호출 : Ajax를

CKEDITOR.on("instanceReady", function() { 
    try { 
     var httpRequest = new XMLHttpRequest(); 

     httpRequest.onreadystatechange = function() { 
      var json; 
      if (this.responseText == "") 
       json = ""; 
      else 
       json = JSON.parse(this.responseText); 

      var template = { 
       imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"), 
       templates: json 
      }; 
      CKEDITOR.addTemplates('myTemplates', template); 
     }; 
     httpRequest.open('GET', '/handlers/templatehandler.ashx'); 
     httpRequest.send(); 
    } catch (ex) { 
     console.log(ex); 
    } 

});