Angular inline editor styling issues

[tmmiller6]

In the documentation it says that the styling is done differently for inline editors. All of the examples I have found for inline editors are not Angular and use the selector like selector: "#mydiv". When trying this in Angular, the tinymce editor is not connected to the element of the selector.

Using the tag is easy to implement except for the styling. Is there an Angular example somewhere showing how to implement the inline editor that also shows how to style the editor? (Like getting rid of the border). The goal is to have it look like the examples provided for non Angular implementations.

My apologies if this is not the place to ask such a question.

[exalate-issue-sync[bot]]

Ref: INT-2476

[jscasca]

Hey @tmmiller6

When using Angular, the wrapper will create an element to mount the editor for you. If you want an inline editor you can specify the tag used by the editor to better suit your style. Additionally, you can use an id to find a specific editor. Here is a quick example. component.html:

<editor
  apiKey="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
  [inline]="true"
  tagName="div"
  id="my-editor"
></editor>

style.css:

div#my-editor {
  border: 2px solid red;
}

Let me know if this helps

[tmmiller6]

This is very helpful. Because your example does not have a

, tagName="div" is not needed.

I played with the example a little and added a div around the editor. So then I could use "div #my-editor". The space was required.

Thank you for your help.

[tmmiller6]

After playing with it some more, the issue that got me looking into styling was the blue border around the editor when it has focus. Is there a way to get rid of that?

https://user-images.githubusercontent.com/73195387/113320289-9627ac00-92cf-11eb-9eab-e79a8a6224dd.png

[tmmiller6]

Actually, never mind about that. I see how it's working. Making progress again. Thank you.