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

ace editor setting theme has a delay #3286

Closed
ym13349140 opened this issue May 2, 2017 · 5 comments
Closed

ace editor setting theme has a delay #3286

ym13349140 opened this issue May 2, 2017 · 5 comments

Comments

@ym13349140
Copy link

when I use ace editor in my project,I set the theme to tommorow_night,but every time the web page firstly set the editor to the default theme,and then about a second later changed to tommorow_night,this caused the editor to have a one-second empty time,just like the picture below:
image
then it turned to this:
image
and then quickly changed to tomoorow_night:
image

Is there a way to disable the default theme and just load the tomorrow_night theme directly?

@nightwing
Copy link
Member

include the file for the theme right after the ace.js file, instead of letting ace to load it.

@ym13349140
Copy link
Author

<script src="//cdn.bootcss.com/ace/1.2.6/ace.js"></script>
<script src="//cdn.bootcss.com/ace/1.2.6/theme-tomorrow_night.js"></script>
<script>
        var editor = ace.edit("editor");
<script>

I tried like above,but it didn't set theme to tomorrow_night. If I also keep the follow statement,then the editor also has a blank view at first then turn to tomorrow_night. editor.setTheme("ace/theme/tomorrow_night");

@nightwing
Copy link
Member

you need to keep the setTheme line.
With it is added, you should see, the first and the third images above.
The first screenshot, is the state before ace.edit call. You can either add loader screen, or keep editor element hidden, to prevent blank screen from showing up

@slidenerd
Copy link

Ahan so that is the problem! I am trying to get the computed background color from my editor but it returns white everytime. Is there an event that is triggered once the theme is loaded

@slidenerd
Copy link

setTheme('ace/theme/monokai', ()=>{}) has a callback, notice the function that gets triggered after the theme has been loaded.

tgxworld added a commit to discourse/discourse that referenced this issue Mar 8, 2024
Why this change?

On a slow network, using the `AceEditor` component will result in a blob
of text being shown first before being swapped out with the `ace.js`
editor after it has completed loading.

There is also a problem when setting the theme for the editor which
would result in a "flash" as reported in
ajaxorg/ace#3286. To avoid this, we need to
load the theme js file before displaying the editor.

What does this change do?

1. Adds a loading spinner and set the `div.ace` with a `.hidden` class.
2. Once all the relevant scripts and initialization is done, we will
   then remove the loading spinner and remove `div.ace`.
tgxworld added a commit to discourse/discourse that referenced this issue Mar 8, 2024
Why this change?

On a slow network, using the `AceEditor` component will result in a blob
of text being shown first before being swapped out with the `ace.js`
editor after it has completed loading.

There is also a problem when setting the theme for the editor which
would result in a "flash" as reported in
ajaxorg/ace#3286. To avoid this, we need to
load the theme js file before displaying the editor.

What does this change do?

1. Adds a loading spinner and set the `div.ace` with a `.hidden` class.
2. Once all the relevant scripts and initialization is done, we will
   then remove the loading spinner and remove `div.ace`.
tgxworld added a commit to discourse/discourse that referenced this issue Mar 10, 2024
Why this change?

On a slow network, using the `AceEditor` component will result in a blob
of text being shown first before being swapped out with the `ace.js`
editor after it has completed loading.

There is also a problem when setting the theme for the editor which
would result in a "flash" as reported in
ajaxorg/ace#3286. To avoid this, we need to
load the theme js file before displaying the editor.

What does this change do?

1. Adds a loading spinner and set the `div.ace` with a `.hidden` class.
2. Once all the relevant scripts and initialization is done, we will
   then remove the loading spinner and remove `div.ace`.
tgxworld added a commit to discourse/discourse that referenced this issue Mar 10, 2024
…26099)

Why this change?

On a slow network, using the `AceEditor` component will result in a blob
of text being shown first before being swapped out with the `ace.js`
editor after it has completed loading.

There is also a problem when setting the theme for the editor which
would result in a "flash" as reported in
ajaxorg/ace#3286. To avoid this, we need to
load the theme js file before displaying the editor.

What does this change do?

1. Adds a loading spinner and set the `div.ace` with a `.hidden` class.
2. Once all the relevant scripts and initialization is done, we will
   then remove the loading spinner and remove `div.ace`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants