Problema de eco de datos de CKeditor (método setData)

Recientemente, encontré un requisito. Necesito editar una descripción de texto simple en el backend de administración para la descripción de visualización del proyecto del centro comercial. Establecer el contenido del campo cambiado de acuerdo con el editor de ckeditor integrado antes del sistema. En cuanto a la simplicidad y utilidad de ckeditor, lo presentaré brevemente aquí;
primero presenta js:
Inserte la descripción de la imagen aquí

<script src="/js/ckeditor/ckeditor.js"></script>

Luego inicialización,
Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí
El primer parámetro de reemplazo es la identificación de un área de texto en la interfaz, y luego la configuración customConfig puede ir a Baidu en línea de acuerdo con sus necesidades específicas.

 let projectIntroduceEditor = CKEDITOR.replace('projectIntroduce', {
        customConfig: '/js/ckeditor-config.js',
        height: 300,
    });

Efecto de interfaz:
Inserte la descripción de la imagen aquí

Tenga en cuenta que el método CKEDITOR.replace () tiene un valor de retorno, y las acciones relacionadas posteriores pueden usar esta operación de valor de retorno.
Luego, cuando se llama al método de guardar:
projectIntroduceEditor.getdata ();
Inserte la descripción de la imagen aquí
Aquí está el contenido del editor normal.
Pero el backend de administración debe admitir la función de edición para el contenido de datos. En este momento, debe usar el método de eco de CKEDITOR: setData (); consulto
el objeto de entidad que necesito hacer eco de acuerdo con la identificación del contenido de edición, y cárguelo de acuerdo con la interfaz Si la situación vuelve al contenido interno,

Inserte la descripción de la imagen aquí
Código:

 window.onload = function () {
 		//这里需要调查询接口,获取project的对象
		let project = {};
		// 然后回显
		paymentRulesEditor.setData(currentProject.paymentRules);
      	projectIntroduceEditor.setData(currentProject.projectIntroduce);
 }

Sin embargo, no importa cómo establezca el valor, la interfaz siempre falla en el eco (o en ocasiones no). En base a esta situación, probablemente creo que la carga del editor es asincrónica (no lo verifiqué, adiviné), así que en mi Cuando la configuración vale la pena, el editor no está completamente terminado, por lo que el eco falla;
luego, otra forma de pensar, jq juzga si un componente está completamente cargado, y la carga está completa y luego repite, Baidu un método

let paymentRulesTimer = setInterval(function () {
                        if ($("#projectIntroduce").length > 0) {
                            paymentRulesEditor.setData(currentProject.paymentRules);
                            clearInterval(paymentRulesTimer);
                            return;
                        }
                    }, 100);

Use un temporizador para monitorear si el componente está cargado, y luego configure el eco después de que se complete la carga y el problema se resuelva
Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/pjw1217/article/details/112990335
Recomendado
Clasificación