search

froala / angular-froala

Angular.js bindings for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
MIT License
306 stars 123 forks source link

Different result when adding a <br /> on windows and osx #145

Closed RHinderiks closed 6 years ago

RHinderiks commented 7 years ago
Expected behavior.

When adding a br tag through code i expect this to add an empty row on both windows and MacOS

Actual behavior.

On windows it seems to wrap the br tag in a p tag and also it seems to render it differently.

Steps to reproduce the problem.

Add a piece of text, than press a button or something to programmatically add an br tag and a piece of text to the editor. This will result in the attached files.

macos_sierra windows_10

OS.

MacOS Sierra (latest) Windows 10 (latest)

Browser.

Chrome (latest) Firefox (Latest)

stefanneculai commented 7 years ago

@RHinderiks could you please let us know the exact steps to reproduce this? Also, are you able to reproduce it here: https://www.froala.com/wysiwyg-editor/examples/enter?

RHinderiks commented 7 years ago

I am not able to reproduce it since that example doesn't use any angular. I'm not quite sure how to achieve the same effect in jQuery (Adding text to an editor). Because of the 2 way binding in angular its quite simple.

The exact steps are as follows:

  1. type a piece of text in the editor
  2. Somehow add a
    and a bit of text to the already present text. (in our system this happens when i open the message again)
stefanneculai commented 7 years ago

We couldn't reproduce it on a blank application. @RHinderiks could you make a Plunker for it?

RHinderiks commented 7 years ago

@stefanneculai i'll see if i can reproduce it. I am quite busy at the moment so it may take a while.

stefanneculai commented 7 years ago

OK. Thanks.

samhsuqld commented 7 years ago

I was experiencing a similar issue: if you're using the default enter setting, the HTML you add must start and end with a paragraph tag, or Froala will wrap the HTML you add in a paragraph tag automatically.

You can reproduce this without using Angular by using the code-view plugin. Hope this helps.

stefanneculai commented 7 years ago

@samhsuqld could you please send the HTML you're using for this?

samhsuqld commented 7 years ago

See this plunker for a basic reproduction (or this one for a reproduction without Angular).

stefanneculai commented 7 years ago

@samhsuqld this is the editor default behavior. When using the default options, new lines are automatically being wrapper with a P tag. If you want to disable it, then you should change enter option to $.FroalaEditor.ENTER_BR. https://www.froala.com/wysiwyg-editor/examples/enter