CKeditor becomes not editable

asked 2021-04-09 00:44:41 +0800

softteam gravatar image softteam
120 8

Hi, I got two questions about CKeditor.

First: I got a Grid with a <detail> and inside I have a <ckeditor> like this: image description

When I open this Ckeditor by clicking "+" icon, the three checks and the ckeditor become visible and editable and everything work fine. The code of this part is:

  <a onClick="@command('nuevoApunteCurso')" iconSclass="z-icon-plus z-icon-lg" tooltiptext="@bind(vm.literalNuevoCurso)" sclass="aHerramientas" ></a>
  <a iconSclass="z-icon-ellipsis-v z-icon-lg" tooltiptext="@bind(vm.literalOpcionesCurso)" sclass="aHerramientas" popup="popFiltrarCurso, after_start"></a>
  <a onClick="@command('refrescarApunteCurso')" iconSclass="z-icon-refresh z-icon-lg" tooltiptext="@bind(vm.literalRefrescarCurso)" sclass="aHerramientas"></a>
<div visible="@load(vm.nuevoApunteBean.edicion)"  sclass="cursoEvolutivo" style="padding:10px">
  <div style="padding-bottom:5px;display:inline-block; text-align:center" width="100%">
    <checkbox label="Nota de especial atención" checked ="@bind(vm.nuevoApunteBean.notaEspecialActivada)"/>
    <checkbox label="Incluir apunte en informes" checked ="@bind(vm.nuevoApunteBean.marcarApunteEnviar)"/>
    <checkbox label="Notificación a la familia" checked ="@bind(vm.nuevoApunteBean.notificarFamilia)" visible="@load(vm.visibleNotificarFamilia)"/></div>   

 <ckeditor width="100%" height="100%" 
 toolbar="MiToolbar" visible="true" value="@bind(vm.nuevoApunteBean.contenidoHtml)"></ckeditor>

<hlayout style="padding-top:5px;">
  <button label="Guardar" onClick="@command('guardarNuevoApunteCurso')"/>
  <button label="Cancelar" onClick="@command('cancelarNuevoApunteCurso')"/>

But when I open a new row from the grid, the Ckeditor becomes not editable. With the DevTools I realised that <body> is empty. Here we have the CKeditor when is editable and when it is not:

image description image description

Is there any option to make CKeditor editable in this case?

We use this javascript file (/recursos/js/BarrasCkeditor/CKBarraMinima.js):

CKEDITOR.editorConfig = function(config){
    config.toolbar = 'MiToolbar';

    config.allowedContent = true;
    config.contentEditable = true;
    config.resize_enabled = false;
    config.disableNativeSpellChecker = false;//Esta instruccion permite que ckeditor subraye en rojo las palabras mal escritas teniendo en cuenta el idioma del navegador (el locale)
    config.toolbar_MiToolbar = [
    { name: 'clipboard', items : [ 'Source','-','Save','Undo','Redo','SpellChecker' ] },
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline'] },
    { name: 'colors', items : [ 'TextColor','BGColor' ] },
    { name: 'styles', items : ['Font','FontSize' ] }

Second: I realised that when I click "+" button and CKeditor becomes visible, it lasts a little bit more (0.5s more or less) to render than the other components. Which is the best way to use CKeditor in order to get rended as fast as possible?

Thank you! Javier

delete flag offensive retag edit

2 Answers

Sort by » oldest newest most voted

answered 2021-04-09 18:05:45 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-04-09 18:20:09 +0800

Non-editable issue

This is a known issue: https://tracker.zkoss.org/browse/ZK-4833 You can apply the patch in the tracker.

Or another way is: I can reproduce the same issue when I bind "visible" in each to the same property. I suppose in all rows you bind to the same property: <div visible="@load(vm.nuevoApunteBean.edicion)>

If each row has its own visible property which is also more reasonable. Then this bug won't happen, for example: <div visible="@load(each.visible)> Each time when a user click +, you just modify each.visible and notify it.

link publish delete flag offensive edit

answered 2021-04-09 18:26:16 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

Rendering performance

I found the rendering is mostly controlled by CKEditor widget internally itself. It's a third-party widget. Currently, I have no simple way to speed it up.

link publish delete flag offensive edit


Does ZK have a component that could be the alternative to CKEditor?


softteam ( 2021-04-09 20:39:45 +0800 )edit

a more light-weighted editor: https://www.zkoss.org/wiki/ZK%20Component%20Reference/Input/Tbeditor

hawk ( 2021-04-12 10:59:36 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2021-04-09 00:44:41 +0800

Seen: 6 times

Last updated: Apr 09

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More