CKEditor 的动态模板

Question

我在我们的 Web 应用程序的 UserControl 上嵌入了 CKEditor。在我的本地机器和我们的服务器上加载 CKEditor 的默认模板时一切正常。

我正在从数据库表中获取模板，将结果转换为适当的 JSON 格式，然后将其写入 javascript 文件以添加到 CKEDITOR.template_files。

我在js文件中生成的js内容示例：

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

现在我的问题是，在我们的服务器上，我动态创建的 js 文件似乎被阻止了，因为它应该通过 HTTPS 加载。找不到这个文件或我的文件。

[blocked] 'https://...' 的页面是通过 HTTPS 加载的，但运行 来自“http://...”的不安全内容（找不到页面 url）：此内容 也应该通过 HTTPS 加载。

在此 CKEDITOR.config 尝试加载“templatesKey”模板但失败后：

未捕获的类型错误：无法读取未定义的属性“imagesPath”

我已经下载了 CKEditor 的 ASP.Net 版本，并将该项目包含在我的解决方案中。我在后面的代码中设置了 myCKEditor.TemplatesFiles 和 myCKEditor.Templates：

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

是我动态生成js文件的问题吗？还是模板插件通过 HTTP 而不是 HTTPS 加载内容的问题？有没有更好的方法来动态添加模板到 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 调用：

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);
    }

});