CKEDITOR - 模板从阿贾克斯装 [英] CkEditor - Template loaded from AJAX
问题描述
我使用CKEDITOR，想定义的自定义模板，使用一个AJAX功能加载HTML字符串。我已经能够定义自定义模板，但如果我用一个函数模板的html属性对象的函数永远不会exectuted。是否有可能加载使用AJAX的默认模板插件模板或者我需要写我自己？
config.js
CKEDITOR.editorConfig =功能（配置）{
config.templates_files = ['/pathtomyfile/custom.js'];
};
custom.js（定义我的自定义模板）
CKEDITOR.addTemplates（默认，{
imagesPath：CKEDITOR.getUrl（CKEDITOR.plugins.getPath（'模板'）+'模板/图像/'），
模板：
{
标题：模板1'，
图片：template1.gif，
说明：不工作的自定义模板'，
HTML：函数（）{
警报（'这个警报从来没有所谓的'）;
VAR HTML ='';
$阿贾克斯（{
网址：MyGetURL，
键入：GET，
异步：假的，
成功：函数（结果）{
HTML =结果;
}，
错误：函数（jqXhr，textStatus，errorThrown）{
警报（错误+ jqXhr.status +'（textStatus：'+ textStatus +'，errorThrown：'+ errorThrown +'））;
}
}）;
返回HTML;
}
}，
{
标题：模板2'，
图片：template2.gif，
描述：一个工作自定义模板，
HTML：'！＆LT; H1＆GT;我工作＆LT; / H1＆GT;
}
]
}）;
您不能按照这种方式。第一个原因是，编辑预计 HTML 是一个字符串，而不是一个函数。第二个原因是，你的AJAX请求是没有意义的，因为它被称为异步返回HTML 请求完成之前执行。
总之，你想要做的是preLOAD你的圣殿（S），一旦编辑器已准备就绪。你可以简单地更改与jQuery的code以下XHR请求，但你要记住，你应该叫 CKEDITOR.addTemplates 在成功回调：
CKEDITOR.replace（'editor1'，{
模板：'我的'，
上： {
instanceReady：函数（参数）{
VAR HTT prequest =新XMLHtt prequest（）;
HTT prequest.onreadystatechange =功能（）{
CKEDITOR.addTemplates（'我'，{
模板：
{
标题：我的AJAX驱动模板，
HTML：this.responseText
}
]
}）;
};
HTT prequest.open（GET，yourFile.html'）;
HTT prequest.send（）;
}
}
}）;
如果你真的想要做这活（硬盘的方式，我不把它推荐给你），你应该覆盖模板命令你的code这加载自定义模板，然后执行实际的命令。我不认为你需要做到这一点，虽然。
玩得开心！
I am using CkEditor and would like to define a custom template, that uses an AJAX function to load a HTML string. I have been able to define custom templates, but if I use a function for the html property of the template object the function is never exectuted. Is it possible to load a template using AJAX with the default template plugin or do I need to write my own?
config.js
CKEDITOR.editorConfig = function (config) {
config.templates_files = ['/pathtomyfile/custom.js'];
};
custom.js (defining my custom templates)
CKEDITOR.addTemplates('default', {
imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates') + 'templates/images/'),
templates: [
{
title: 'Template 1',
image: 'template1.gif',
description: 'A custom template that does not work',
html: function () {
alert('This alert is never called');
var html = '';
$.ajax({
url: 'MyGetURL',
type: "GET",
async: false,
success: function (result) {
html = result;
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
}
});
return html;
}
},
{
title: 'Template 2',
image: 'template2.gif',
description: 'A working custom template',
html: '<h1>I Work!</h1>'
}
]
});
You can't follow this way. The first reason is that editor expects html to be a string, not a function. The second reason is that your AJAX request doesn't make sense since it's called asynchronously and return html is executed before the request is finished.
Anyway, what you want to do is to preload your temple(s) once the editor is ready. You can simply change the following XHR request with a jQuery code but you have to remember that you should call CKEDITOR.addTemplates in success callback:
CKEDITOR.replace( 'editor1', {
templates: 'my',
on: {
instanceReady: function( argument ) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
CKEDITOR.addTemplates( 'my', {
templates: [
{
title: 'My AJAX-driven template',
html: this.responseText
}
]
});
};
httpRequest.open( 'GET', 'yourFile.html' );
httpRequest.send();
}
}
});
If you really wanted to do this live (hard way, I don't recommend it to you), you should overwrite templates command with your code which loads custom templates and then executes the real command. I don't think you need to do this though.
Have fun!
这篇关于CKEDITOR - 模板从阿贾克斯装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
