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

React render quill ,the Chinese language bug。 #1514

Closed
yogadzx opened this issue Jun 15, 2017 · 4 comments
Closed

React render quill ,the Chinese language bug。 #1514

yogadzx opened this issue Jun 15, 2017 · 4 comments

Comments

@yogadzx
Copy link

yogadzx commented Jun 15, 2017

hi
my problem environment : quill by react render;
when, empty quill,click ‘bold’ button,input chinese language,quill.on('text-change') not execute and strong tag cursor not clear.the content insert to cursor.

i try new quill by Native dom,that problem is none;

the react ui : http://lobos.github.io/react-ui/0.7/#/editor?_k=9qxo3o;
have same problem;you can Reproduction on it.

sorry, my english not good -.-!

Expected:
你好
hello

Actual
“&#65279”;你好
hello
english language is ok.

Quill Version:1.2.6

@jhchen
Copy link
Member

jhchen commented Jun 21, 2017

What browser + OS are you using?

@stephenLYZ
Copy link

Hi, this case is the same to me, browser and OS i'm using:

  • bowser: chrome canary 61.0
  • OS: macOS Sierra 10.12

@jhchen jhchen closed this as completed in e780919 Jul 17, 2017
@jhchen
Copy link
Member

jhchen commented Jul 17, 2017

For reference the steps for reproduction are (using Chinese keyboard input):

  1. Go to https://quilljs.com/playground
  2. Click on the bold "B" button
  3. Type "a" and select 1

The <span class="ql-cursor"> should not be in the editor / DOM but it is. text-change events are also not fired.

@mqliutie
Copy link

mqliutie commented Jun 24, 2022

const GUARD_TEXT = "\uFEFF";

class Embed extends Parchment.Embed {
  constructor(node) {
    super(node);
    this.contentNode = document.createElement('span');
    this.contentNode.setAttribute('contenteditable', false);
    [].slice.call(this.domNode.childNodes).forEach((childNode) => {
      this.contentNode.appendChild(childNode);
    });
    this.leftGuard = document.createTextNode(GUARD_TEXT);
    this.rightGuard = document.createTextNode(GUARD_TEXT);
    this.domNode.appendChild(this.leftGuard);
    this.domNode.appendChild(this.contentNode);
    this.domNode.appendChild(this.rightGuard);
  }
}

I have class extend Embed so it will generate html code like

<div id="myCustomEditorId" contenteditable="true" ...and so on>
    <p>
         <CustomEmbedTagName>
               &#65279<span>There is my custom show string</span>&#65279
         </CustomEmbedTagName>
         
         
    </p>
</div>

If I paste 👌 after my embed and input Chinese the editor will not work.

system: macOS
os: electron

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

4 participants