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

Copy and paste in text angular adds extra <br> and nests elements on chrome windows #1071

Open
caiyo opened this issue Feb 10, 2016 · 10 comments

Comments

@caiyo
Copy link

caiyo commented Feb 10, 2016

If i type something into a text angular wysiwyg and copy paste it, 2 extra
tags get prepended and 3
tags get appended to the original copied text. Also, consecutively pasting something will cause subsequent pastes to be child elements of the original paste instead of being pasted into a new block This is happening in chrome on windows (there is no issue on osx).

I threw some breakpoints into the paste action listener and it seems like he issue may be coming from the way windows and osx chrome output pasted clipboard data. If I am copying 'This is a test' in a textangular box in windows and osx, i get the following clipboard data respectively:

<html> <body> <!--StartFragment--><p style="box-sizing: border-box; margin: 0px 0px 10px; color: rgb(85, 85, 85); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">Test 1234</p><br class="Apple-interchange-newline"><!--EndFragment--> </body> </html>

<meta charset='utf-8'><span style="color: rgb(85, 85, 85); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);">This isa  test </span>

@caiyo
Copy link
Author

caiyo commented Feb 10, 2016

I edited a line in the processPaste function:

text = text.replace(/<(|\/)meta[^>]*?>/ig, '');
to

text = text.replace(/<(|\/)(html|body|meta)[^>]*?>/ig, '').trim();

and that seems to have fixed it

@iwontcode
Copy link

I can confirm the same issue on Chrome. I am wary of implementing a change myself in the function, as I think it is always best to stay with the latest offering of the component. Any chance we can get this in the next milestone?

@pbassut
Copy link
Contributor

pbassut commented Feb 19, 2016

We're having a few problems with pasting in every way possible.
I was thinking about creating a generic way to handle pasting if that's required.
Tackling this issue now, might interfere with things like #1022, #124.

I don't think @caiyo approach would have any problem since it still supports a meta tag.

A PR would be welcome.

@aditcmarix
Copy link

copy paste takes more
tags in the html

@cvaliere
Copy link

+1 on this bug

indeed, replacing

text= text.replace(/<(|\/)meta[^>]*?>/ig, '');
with
text = text.replace(/<(|\/)(html|body|meta)[^>]*?>/ig, '').trim();
fixes the problem

@ajayreddy56
Copy link

@caiyo @cvaliere where do i add above code in textangular.js file?
if i add this,when i paste the data in the editor i'm unable to select the toolbars

@cvaliere
Copy link

personnally, I changed textAngular.min.js, it's line 804

note: it's a replacement, not something that you add

@girichippada
Copy link

Is it fixed?
I can still see the issue in http://plnkr.co/edit/hz3x2f?p=preview
in Windows Chrome.

@quanzhiyuan
Copy link

add class="ql-editor" for the editor has worked for me

@girichippada
Copy link

add class="ql-editor" for the editor has worked for me

Hey quanzhiyuan, Thanks for the reply.
I couldn't find the ql-editor css class in textAngular. Can you specify the exact name if it different?
I'm using latest version (v1.5.16)

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

8 participants