标签: ckeditor

如果我在基于Bootstrap模板的HTML页面中使用CKEditor插件,它可以很好地工作,但是如果我在这样的Bootstrap模式上插入编辑器

<!-- Modal --> 
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria labelledby="modalAddBrandLabel" aria-hidden="true">   
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="modalAddBrandLabel">Add brand</h4>
       </div>
       <div class="modal-body">
             <form>
             <textarea name="editor1" id="editor1" rows="10" cols="80">
             This is my textarea to be replaced with CKEditor.
             </textarea>            <script>
             CKEDITOR.replace('editor1');
             </script>
             </form> 
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>
       </div>
     </div>   
   </div> 
</div>

编辑器可以工作,但编辑器弹出窗口中的所有表单控件都被禁用,例如,如果您尝试添加链接或图像,则无法插入URL或任何描述,因为输入已禁用.

针对此问题的任何解决方法？

这是一个小提琴的例子:http://jsfiddle.net/7zDay/

我有一个CKEditor用于编辑网页中的文本.

在网页中,文本在其上下文中呈现,因此遵循页面CSS格式.

我的问题是如何告诉CKEditor将CSS样式表应用于编辑器渲染？当然没有改变生成的源？

我的代码:

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
        window.onload = function()
        {
                CKEDITOR.replace( 'actu-content' );
        };
</script>

和我的CSS:

.ActuContent{
    padding:10px 10px 10px 10px;
    color:#416a8b;
    font-size:1.6em;
}

我的CKEditor Config.js文件只包含工具栏配置.

CKeditor不会将".ActuContent"的设置应用于其渲染...

我正在使用最新的CKeditor和jQuery适配器.

我成功地让它工作,并显示.

但是,由于我对CKeditor完全不熟悉,如何使用jQuery方法传递配置变量？

这就是我所拥有的

$( '#input-content' ).ckeditor('', {
    toolbar: 'basic'
});

我想从我读过的内容来看,第一个参数是一个回调,第二个参数是配置.但这样做并没有改变编辑器.

如何使用jQuery适配器使用这些配置属性等？

我似乎无法根据文档销毁CKEdit的实例.

考虑以下:

<input name="txt1" type="text" id="txt1" /><br />
<a href="javascript:void(0);" onclick="create()">Create</a><br />
<a href="javascript:void(0);" onclick="destroy()">Destroy</a>
<script type= "text/javascript" >
<!--
function create() {
    var hEd = CKEDITOR.instances['txt1'];
    if (hEd) {
        CKEDITOR.remove(hEd);
    }
    hEd = CKEDITOR.replace('txt1');
}
function destroy(){
    var hEd = CKEDITOR.instances['txt1'];
    if (hEd) {
        CKEDITOR.remove(hEd);
    }
}
-->
</script>

当destroy()运行时,CKEDITOR.remove(hEd); 被称为.多次单击create()会在屏幕上生成多个CKEditor实例,但它们的实例不再出现在CKEDITOR.instances中.

我错过了什么吗？

有人知道如何禁用CKEditor的上下文(右键单击)菜单吗？我期待一个配置选项,但我找不到一个.我正在使用v3.1.谢谢.

如何确定CKEditor是否已加载？我查看了API文档,但只能找到加载的事件.我想检查CKEditor是否已加载,因为如果我第二次加载它,我的textareas会消失.

我已将CKEditor 3(以前称为FCKEditor)集成到我的asp.net MVC(v3为特定)应用程序中.我的模型中有一个RequiredAttribute用于需要编辑器的字段,但客户端验证与CKEditor无法正常工作.当我尝试提交并且我已将数据输入CKEditor时,所需的验证不会看到数据.如果我再次尝试重新提交,那么它可以正常工作.我在网上环顾四周,无法找到解决方案.我也在使用Jquery并使用Jquery适配器

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter

如果我使用像capybara-webkit或selenium这样的支持javascript的驱动程序,我如何填充Capybara中的CKEditor区域？

我想在ckeditor的工具栏上添加多个插件(我已创建).我在config.js中写了下面的代码

CKEDITOR.editorConfig = function( config ) {
    config.toolbar_Full =  [
        ['Styles', 'Bold', 'Italic', 'Underline', 'SpellChecker', 'Scayt', '-', 'NumberedList', 'BulletedList'],
        ['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll'], '/', ['timestamp', '-', 'linkbutton']
    ];
    config.extraPlugins = 'linkbutton, timestamp';
};

我有两个不同的自定义插件.但是不接受另一个插件.如何在一个工具栏上添加另一个插件？

当在主体上完成滚动时,内联CKEditor正确滚动文本.以下是官方演示.

http://sdk.ckeditor.com/samples/inline.html

但是,当滚动不在主体中但在iframe或div中时,滚动甚至在最新版本之前都不起作用(版本4.5.5).这里有一些问题,例如,

滚动"可滚动"div时,Ckeditor内联编辑器会保留在屏幕上

这个解决方案有效,但我可能在同一页面上有超过20个编辑器,并且检查每个人对我的页面来说太重了.

关于iframe中元素的CKEditor内联编辑器

另一个看起来不错的解决方案对我来说不起作用,但我想要的是像这样的轻量级解决方案.

PS对于那些想要测试你的解决方案是否有效的人来说,这里是你可以测试的代码的开头:https: //jsfiddle.net/pteryvk3/6/

  <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<div id='' style="overflow: scroll;height:500px;width:90%;position:absolute">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

Lorem ipsum dolor …