Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can we display placeholder only when editor.js is not in readonly mode #2495

Open
MussaratAziz opened this issue Sep 26, 2023 · 5 comments
Open

Comments

@MussaratAziz
Copy link

MussaratAziz commented Sep 26, 2023

can we display editor.js placeholder only when editor.js is not in readonly mode?

const editor = new EditorJS({
  ...
  
  placeholder: 'Let`s write an awesome story!'   <----- only display when readOnly is false.

  ...
});

Thank you.

@bekogeko
Copy link

Makes so much sense

@timsun28
Copy link

timsun28 commented Jan 26, 2024

I'm currently having an issue (v 2.29.0) where when I put the editor as readOnly mode, an empty paragraph is added at the top of the editor.
image

This is even the case when I don't add placeholder to my config. When I do add it, the message is added after data-placeholder, but it's not shown in the editor itself. And putting the placeholder to false, also doesn't help with this.

When turning off readOnly mode, the bug is gone as well. So it's only a readOnly issue.

I've replicated the bug in a code sandbox here:
Edit Editor JS (forked)

@kokamvd
Copy link

kokamvd commented Feb 28, 2024

I'm currently having an issue (v 2.29.0) where when I put the editor as readOnly mode, an empty paragraph is added at the top of the editor.

I have the same bug

@OmkarShinde1996
Copy link

OmkarShinde1996 commented May 4, 2024

For time being I have implemented a workaround for it to remove empty paragraph blocks from the editor when it is in readOnly mode. Below is the function which we can pass in Editor instance to remove empty paragraphs from the editor js.

onReady: ()=>{
                    if(readOnly){
                        const array = document.getElementsByClassName('ce-paragraph')
                        const elementsArray = [...array]; 
                        const elementsTobeRemoved = elementsArray.filter(p => p.innerHTML === '')
                        elementsTobeRemoved.map(element => element.remove())
                    }
                }

@timsun28
Copy link

timsun28 commented May 4, 2024

I have switched to a different package for my project that met my requirements better, but it seems like there is an open pr right now that would fix this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants