使用多个CKEditor实例

时间:2015-11-10 16:53:26

标签: image ckeditor

我在现有客户端网站中使用CKeditor 3.5.6。他们有一个表单页面,其中包含产品的简短描述。这两个字段都是在页面加载时转换为ckEditor实例的文本区域。一般情况下它们工作正常,但是,当我们使用选择图像选项并选择图像时,URL图像URL属性框中没有设置URL。

如果我只启动两个实例中的一个,则会选择并正确设置URL。

我从一些搜索中读到,这可能是ckEditor无法确定要填充哪个字段的情况,因此它什么都不做。但是在检查时,看起来我将唯一的函数引用传递给浏览图像窗口:CKEditorFuncNum = 1然后CKEditorFuncNum = 93。

所以这是我的设置。愿意帮助确定为什么这不起作用。

HTML / JS:

<textarea id="Short_Desc" name="Short_Desc"></textarea>
<textarea id="Long_Desc" name="Long_Desc"></textarea>

<script type="text/javascript" src="/includes/ckeditor/ckeditor.js"></script>

<script language="JavaScript" type="text/javascript">
    var shortEditor = CKEDITOR.replace( 'Short_Desc', {toolbar : 'Basic', height:150, toolbarStartupExpanded: false});  

    var longEditor = CKEDITOR.replace( 'Long_Desc', {toolbar : 'Default'});  
</script>

GLOBAL CKEDITOR CONFIG:

CKEDITOR.editorConfig = function( config )
{
    config.emailProtection = 'encode';
    config.pasteFromWordPromptCleanup = true;
    config.scayt_autoStartup = true;
    config.templates_replaceContent = false;
    config.skin = 'silver-master';
    config.format_tags = 'p;pre;h1;h2;h3;h4;h5;h6;div;address';
    config.fillEmptyBlocks = false;
    config.IgnoreEmptyParagraphValue = true;
    config.height = 400;
    config.allowedContent = true; 
    config.extraAllowedContent = 'iframe[*]|[id](*)';
    config.extraPlugins = 'iframe';
    config.protectedSource.push(/<i[^>]*><\/i>/g);

    config.toolbar = 'Default';

    config.toolbar_Default = [  
        ['Source','Maximize'],['Templates'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker','Scayt'],
        ['Find','Replace','-','SelectAll','RemoveFormat'],
        ['Bold','Italic','Underline','Strike','-','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['TextColor','BGColor'],['Link','Unlink'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Image','MediaEmbed','Table','HorizontalRule','fileicon','SpecialChar'],
        ['Format','Font','FontSize']
    ];

    config.toolbar_Basic = [
        ['Source','Maximize'],
        ['Bold','Italic','Underline'],
        ['NumberedList','BulletedList'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['TextColor','BGColor'],
        ['Link','Unlink'],
        ['Image','Flash','MediaEmbed','fileicon','SpecialChar'],
        ['Styles','Format','Font','FontSize']
    ];

    config.filebrowserBrowseUrl = '/index.cfm?fuseaction=home.admin&select=image&fieldname=fckeditor' ;
    config.filebrowserWindowHeight = 680;
    config.filebrowserWindowWidth = 880;
};

这些是从IMage Properties&#39;发送到我的图像选择窗口的URL。 &#34;浏览服务器&#34;按钮:

简短说明:
http://www.example.com/index.cfm?fuseaction=home.admin&select=image&fieldname=fckeditor&CKEditor=Short_Desc&CKEditorFuncNum=1&langCode=en

long desc: http://www.example.com/index.cfm?fuseaction=home.admin&select=image&fieldname=fckeditor&CKEditor=Long_Desc&CKEditorFuncNum=93&langCode=en

1 个答案:

答案 0 :(得分:0)

函数是全局注册的(通过CKEDITOR.tools.addFunction),因此CKEditor应该始终知道它们属于哪个编辑器实例。您可以手动测试图像URL插入(第一个参数是您的CKEditorFuncNum(1或93):

CKEDITOR.tools.callFunction(1, '/path/to/your/image');

如果您可以通过这种方式正确插入图片,则问题可能出在自定义图片浏览器上。否则我会考虑升级CKEditor。我能够在v.4。*。

中使用带有图像浏览器的多个实例而没有任何问题