Ckeditor

Hi everyone, actually I’m working with a rich editor (CKEDITOR) and it is working but I’m facing a problem which it is disappearing when any other of the form fields change:

I created this file in assets

import 'ckeditor4';

// Insert your code here.
// The code below is an example of using CKEditor 4.

export function initRichEditor(){
  CKEDITOR.replace( 'rich_description', {

  } );
}

export function updateData(){
  var data = CKEDITOR.instances.rich_description.getData();
  console.log(data)
  return data;
}

and in app.js I’m using a liveview hook

import { initRichEditor } from "./RichEditor"
import { initRichEditorEpisodes } from "./RichEditor"

// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"

import { Socket } from "phoenix"
import LiveSocket from "phoenix_live_view"
import { MediaPlayer } from "./media_player"

let Hooks = {};
Hooks.loadUploadForm = {
  mounted() {
    loadUploadForm(this.el);
  }
};

Hooks.initRichEditor = {
  mounted() {
    initRichEditor(this.el);
  }
};

I read in many post about using the phx-update =“ignore”, and using the phx-change and phx-hook not in the form but in a div that contains the text area I’m using for the editor but no success.

This is the actual behavior.

if anyone know how can I solve this i will appreciate it!!! thanks in advice!!

2 Likes

Hello, can you show me the part of your .leex file that is rendering? :blush:

2 Likes

Hi, if its useful for anyone, the problem is solved adding the phx-update=“ignore” attribute to the div that contains the editor.

1 Like