Javascript 如何为不同高度的多个实例设置CKEditor？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11124182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set up CKEditor for multiple instances with different heights?
提问by Wick
I'd like to have multiple instances of CKEditor based on the same config settings, but with different heights. I tried setting up configwith the default height, setting up the 1st instance, then overriding the height & setting up the 2nd instance:
我想基于相同的配置设置有多个 CKEditor 实例，但高度不同。我尝试使用默认高度设置配置，设置第一个实例，然后覆盖高度并设置第二个实例：
var config = {
.....
height:'400'
};
$('#editor1').ckeditor(config);
config.height = '100';
$('#editor2').ckeditor(config);
...but I get two CKEditor instances that both have 100px height.
...但我得到两个 CKEditor 实例，它们的高度均为 100px。
I also tried this:
我也试过这个：
CKEDITOR.replace('editor2',{
height: '100'
});
.. I got error messages that the instance already existed. I searched around a bit & found someone in a similar situation got advice that you have to destroy() the instance before replace(), but that seems too complicated for just setting a different initialheight.
.. 我收到错误消息，指出实例已经存在。我搜索了一下，发现有类似情况的人建议您必须在 replace() 之前销毁 () 实例，但这对于仅设置不同的初始高度来说似乎太复杂了。
In the end I set up two different configs & copied over the toolbar_Full property:
最后，我设置了两个不同的配置并复制了 toolbar_Full 属性：
var config1 = {
height:'400',
startupOutlineBlocks:true,
scayt_autoStartup:true,
toolbar_Full:[
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
'/',
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','HorizontalRule' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] },
{ name: 'document', items : [ 'Source' ] }
]
}
var config2 = {
height:'100',
startupOutlineBlocks:true,
scayt_autoStartup:true
};
config2.toolbar_Full = config1.toolbar_Full;
$('#editor1').ckeditor(config1);
$('#editor2').ckeditor(config2);
Is there a better way? Anything I'm missing? There's this questionbut they didn't post quite enough to be useful, & this very similar questionhasn't been answered. Thanks!
有没有更好的办法？我缺少什么吗？有这个问题，但他们发布的内容不够有用，而且这个非常相似的问题尚未得到解答。谢谢！
Update:
更新：
This seems to be a timing/config handling quirk of CKEditor -- the config is read & applied later (I'm guessing after the editor's DOM framework has been set up) rather than when the editor is first instantiated.
这似乎是 CKEditor 的计时/配置处理怪癖——稍后读取和应用配置（我猜是在设置编辑器的 DOM 框架之后），而不是在第一次实例化编辑器时。
So, any changes to the config settings made immediately afterthe 1st editor is instantiated with .ckeditor() are actually appliedby the editor at some point in the following several milliseconds. I'd argue this isn't normal behavior, or logical.
因此，在使用 .ckeditor() 实例化第一个编辑器后立即对配置设置所做的任何更改实际上会在接下来的几毫秒内由编辑器应用。我认为这不是正常行为，也不是合乎逻辑的。
For instance, you can get the expected behavior in my first example (overriding the config.heightproperty after the first editor has been instantiated) to work by delaying the 2nd CKEditor instance with setTimeout(). Firefox needed ~100ms, IE needed 1ms. Wacky & wrong.
例如，您可以config.height通过使用 setTimeout() 延迟第二个 CKEditor 实例来使我的第一个示例中的预期行为（在第一个编辑器实例化后覆盖该属性）工作。Firefox 需要约 100 毫秒，IE 需要 1 毫秒。古怪和错误。
CKEditor should read the config settings when each editor is first instantiated. For now, everyone has to work around that quirk.
当第一次实例化每个编辑器时，CKEditor 应该读取配置设置。现在，每个人都必须解决这个怪癖。
回答by Reinmar
The easiest way to initialize two editors with custom heights is:
用自定义高度初始化两个编辑器的最简单方法是：
$('#editor1').ckeditor({ height: 100 });
$('#editor2').ckeditor({ height: 200 });
or without jQuery:
或不使用 jQuery：
CKEDITOR.replace('editor1', { height: 100 });
CKEDITOR.replace('editor2', { height: 200 });
AFAIK it isn't possible to change editor's height on the fly.
AFAIK 无法即时更改编辑器的高度。
If these methods weren't working for you, then you were doing sth else wrong.
如果这些方法对您不起作用，那么您就做错了其他事情。
Update:
更新：
Answering to your comment - your question in fact wasn't about CKEditor, but rather about sharing one object with only two different properties. So you can try like this:
回答您的评论-您的问题实际上与 CKEditor 无关，而是关于共享一个仅具有两个不同属性的对象。所以你可以这样尝试：
var configShared = {
startupOutlineBlocks:true,
scayt_autoStartup:true,
// etc.
},
config1 = CKEDITOR.tools.prototypedCopy(configShared),
config2 = CKEDITOR.tools.prototypedCopy(configShared);
config1.height = 100;
config2.height = 200;
CKEDITOR.replace('editor1', config1);
CKEDITOR.replace('editor2', config2);
CKEDITOR.tools.prototypedCopyis a tool that creates new object with prototype set to the passed one. So they share all properties except of these you override later.
CKEDITOR.tools.prototypedCopy是一种创建新对象的工具，原型设置为传递的对象。因此，它们共享所有属性，但您稍后会覆盖这些属性。
Update 2:
更新 2：
This is the update for the "Update" section in the question :).
这是问题中“更新”部分的更新:)。
There's no quirk in CKEditor's timing or bug or whatsoever - it's pure JavaScript and how BOM/DOM and browsers work plus some practical approach.
在 CKEditor 的时间安排或错误或任何方面都没有怪癖——它是纯 JavaScript 以及 BOM/DOM 和浏览器的工作方式以及一些实用的方法。
First thing - 90% of BOM/DOM is synchronous, but there are a couple of things that aren't. Because of this entire editor has to have asynchronous nature. That's why it provides so many events.
第一件事 - 90% 的 BOM/DOM 是同步的，但有几件事不是。因此，整个编辑器必须具有异步性质。这就是它提供这么多事件的原因。
Second thing - in JS object are passed by reference and as we want CKEditor to initialize very quickly we should avoid unnecessary tasks. One of these is copying config object (without good reason). So to save some msecs (and because of async plugins loading too) CKEditor extends passed config object only by setting its prototype to object containing default options.
第二件事 - 在 JS 中对象是通过引用传递的，因为我们希望 CKEditor 非常快速地初始化，所以我们应该避免不必要的任务。其中之一是复制配置对象（没有充分理由）。因此，为了节省一些毫秒（也因为异步插件加载），CKEditor 仅通过将其原型设置为包含默认选项的对象来扩展传递的配置对象。
Summarizing - I know that this may look like a bug, but it's how JS/BOM/DOM libs work. I'm pretty sure that many other libs' async methods are affected by the same issue.
总结 - 我知道这可能看起来像一个错误，但这就是 JS/BOM/DOM 库的工作方式。我很确定许多其他库的异步方法受到相同问题的影响。
回答by Mahesh-Mayappa Patil
Add this you will get the different toolbar for both CKeditor in single page
添加此选项，您将在单页中获得两个 CKeditor 的不同工具栏
<script>
CKEDITOR.on('instanceCreated', function (event) {
var editor = event.editor,
element = editor.element;
if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') {
editor.on('configLoaded', function () {
// Remove unnecessary plugins to make the editor simpler.
editor.config.removePlugins = 'find,flash,' +
'forms,iframe,image,newpage,removeformat,' +
'smiley,specialchar,stylescombo,templates';
// Rearrange the layout of the toolbar.
editor.config.toolbarGroups = [
{ name: 'editing', groups: ['basicstyles'] },
{ name: 'undo' },
//{ name: 'clipboard', groups: ['selection', 'clipboard'] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' }
// { name: 'about' }
];
});
}
});
</script>
回答by CodeRunner
If you add the ckeditor.js to page more than once too, it may cause that problem.
The script code must be defined once in every page.
<script type="text/javascript" src="Fck342/ckeditor.js"></script>
如果您将 ckeditor.js 也多次添加到页面，则可能会导致该问题。脚本代码必须在每个页面中定义一次。
<script type="text/javascript" src="Fck342/ckeditor.js"></script>
回答by jmnerd
just use CKEDITOR.replaceAll();
只是使用 CKEDITOR.replaceAll();
回答by waqas khan
Update 25 Jun 2019.
2019 年 6 月 25 日更新。
Please Use this code to add multiple CKEditor instances with custom height for each one. Easiest way ever.
请使用此代码为每个实例添加多个自定义高度的 CKEditor 实例。有史以来最简单的方法。
<textarea name="editor1" style="height:30px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
CKEDITOR.add
</script>
<textarea name="editor2" style="height:40px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor2' );
CKEDITOR.add
</script>
<textarea name="editor3" style="height:50px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor3' );
CKEDITOR.add
</script>
<textarea name="editor4" style="height:60px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor4' );
CKEDITOR.add
</script>
<textarea name="editor5" style="height:70px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor5' );
CKEDITOR.add
</script>
Ref: Here
参考：这里
回答by Mr Br
Solution above from Reinmar is working for me, however I decided to give 1 more solution that i used before this one.
上面来自 Reinmar 的解决方案对我有用，但是我决定再提供 1 个我在此之前使用的解决方案。
It's really simple, all you need to know is that ckeditor create content div element for every instance with almost the same id, only difference is incremental value. So if you have 2,3,4.. instances only difference will be ordinal number. Code is here:
这真的很简单，你只需要知道 ckeditor 为每个具有几乎相同 id 的实例创建内容 div 元素，唯一的区别是增量值。所以如果你有 2,3,4.. 实例，唯一的区别是序号。代码在这里：
CKEDITOR.on('instanceReady', function(){
$('#cke_1_contents').css('height','200px');
});
This event will be activated for every instance you have, so if you want to set height for all instances you could create global variable and use it like x in #cke_"+x+"contents, every time event is activated increase x for 1, check which instance in row is with simple if and then set height.
此事件将为您拥有的每个实例激活，因此如果您想为所有实例设置高度，您可以创建全局变量并像 x in 一样使用它#cke_"+x+"contents，每次激活事件时增加 x 为 1，检查行中的哪个实例是简单的 if 然后设置高度。
var x=1;
CKEDITOR.on('instanceReady', function(){
if(x==1) h='200px';
else if(x==2)h='400px';
else if(x==3)h='700px';
$('#cke_'+x+'_contents').css('height',h);
x++;
});
This is not best solution but it is working, problem is you actually see content div resizing.
这不是最好的解决方案，但它是有效的，问题是你实际上看到了内容 div 的大小调整。
