mkhstar / suneditor-react

A React Component for SunEditor (WYSIWYG editor)
http://suneditor.com/
427 stars 105 forks source link

Photo edit tooltips show even if the editor is disabled #307

Closed SorinGabriel02 closed 1 year ago

SorinGabriel02 commented 1 year ago

The image edit tooltips show in the component even though the component is disabled

Related repository

To Reproduce Have a list of disabled SunEditors that contain images. When the SunEditor components load first, these tooltips show. If I click anywhere else on the page, they dissapear.

Expected behavior The tooltips do not show while the editors are disabled

Screenshots image image

Desktop (please complete the following information):

Additional context

const setOptionsObj = {
    height: "80%",
    width: "90%",
    mode: "balloon",
    resizingBar: false,
  };

const postsList =
    posts &&
    posts
      .map(post => (
        <article key={post.id} className={"editorContainer"}>
          <NavLink
            style={{ textDecoration: "none" }}
            to={`/articol/${pageName}/${post.id}`}
          >
            <SunEditor
              lang={"ro"}
              hideToolbar={true}
              setContents={post.content}
              autoFocus={false}
              disable={true}
              setDefaultStyle={
                "background-color: rgb(240, 240, 230); overflow-x: hidden; overflow-y: hidden; max-width: 100%;"
              }
              setOptions={setOptionsObj}
            />
          </NavLink>
        </article>
      ));
fkbeys commented 1 year ago

I had the same issue. So i decided to use an other library to view the html content. So, i had to install react-simple-wysiwyg library. I use Sun editor for input, wysiwyg for view html content.

SorinGabriel02 commented 1 year ago

I tried using react-simple-wysiwyg but it does not center the photos that I have inserted into the posts. Funny thing is if I click anywhere on the screen besides the SunEditor elements these tooltips dissapear.

fkbeys commented 1 year ago
    Yes, you are right. 

If you save an image file in the center of the component , and then if you want to view it with the SunEditor component,it shows it in the center of the component. There s no problem.

But other html renderers brings the image to the left. I also tried the code below. It also did the same thing.

    <div>
        <div dangerouslySetInnerHTML={{ __html: htmlContext }} />
    </div>

On the other hand, i tried to give a random key to the viewer <SunEditor key={Math.random()} like that, but it also did not work. I also could not solve it, but left aligned images are okey for me.

SorinGabriel02 commented 1 year ago

My fix was adding this CSS inside the container class, were the list of disabled SunEditors was.

.sun-editor {
    .se-container {
      .se-controller {
        display: none !important;
      }
      .se-line-breaker-component {
        display: none !important;
      }
    }
  }
mkhstar commented 1 year ago

Maybe the core suneditor package could address this