search

abalmus / aurelia-ace-editor

Aurelia ace editor plugin
Creative Commons Zero v1.0 Universal
4 stars 4 forks source link

Error initializing theme and mode #3

Closed giacomodeliberali closed 8 years ago

giacomodeliberali commented 8 years ago

After registring it as a plugin in main.ts, I can't figure out how to use this component. When i try to change mode/theme it search for it in wrong folder (http://localhost:8080/src/ace/theme-monokai.js, http://localhost:8080/src/ace/mode-javascript.js). How can i solve that?

Furthermore, the plugin doesnt render in safari browser. How can i fix that? Thanx in advance

abalmus commented 8 years ago

Hi @deliberaligiacomo, Could you post your jspm config ?

giacomodeliberali commented 8 years ago

map: { ..., "abalmus/aurelia-ace-editor": "github:abalmus/aurelia-ace-editor@master", "github:abalmus/aurelia-ace-editor@master": { "ace": "github:ajaxorg/ace-builds@1.2.3" }, ... }

abalmus commented 8 years ago

@deliberaligiacomo, It looks good, I didn't try it with TS project, maybe this is the problem. Let me check it and get back to you.

abalmus commented 8 years ago

Hi @deliberaligiacomo, I've just checked it with fresh TS skeleton app, it works pretty well even in safari.

please make sure you included styles into your project.

`

`

giacomodeliberali commented 8 years ago

Can you give me a working piece of code? Because from the examples that i've seen I don't know where I'm wrong.

  1. main.ts: aurelia.use.plugin('abalmus/aurelia-ace-editor');
  2. ace-test.html:
    • <style> .ace_editor { display: block; border: 1px solid lightgray; margin: auto; height: 300px; width: 100%; } </style>
    • <ace config-theme="ace/theme/monokai" config-mode="ace/mode/javascript" class="ace_editor"> console.log("content"); </ace>

Furthermore when i start typing, the content doesn't change, and the console signlas me an error (the last red line). ace

abalmus commented 8 years ago

Yes sure.

  1. Download the skeleton
  2. npm install
  3. jspm install
  4. jspm install github:abalmus/aurelia-ace-editor
  5. insert following line in main.ts aurelia.use.plugin('abalmus/aurelia-ace-editor');

And here is how I inserting editor component:

 <style>
    .ace_editor {
        display: block;
        border: 1px solid lightgray;
        margin: auto;
        height: 300px;
        width: 100%;
    }
  </style>
    <ace config-theme="ace/theme/eclipse"
         config-mode="ace/mode/json">
        {
            "menu": {
                "id": "file",
                "value": "File",
                "popup": {
                    "menuitem": [
                        {"value": "New", "onclick": "CreateNewDoc()"},
                        {"value": "Open", "onclick": "OpenDoc()"},
                        {"value": "Close", "onclick": "CloseDoc()"}
                    ]
                }
            }
        }
    </ace>
</template>```
giacomodeliberali commented 8 years ago

That's seems equal to mine. Can't figure out what the problem is

abalmus commented 8 years ago

I compressed my app, please run npm install && jspm install -y skeleton-typescript.zip

abalmus commented 8 years ago

after that I'm running gulp watch

giacomodeliberali commented 8 years ago

It always giving me the same errors of above. Even your skeleton project. Ideas? ace1

abalmus commented 8 years ago

Yes after clear cache, I'm getting this errors in the console. Loos like some changes in new version of System.JS. I'll take a look today, it is something with System normalize url.

abalmus commented 8 years ago

Hi @deliberaligiacomo, could you please try to run jspm install ace and see if it works after that?

giacomodeliberali commented 8 years ago

Seems fixed, I had installed ace-builds with npm. Where did you find that jspm package?

abalmus commented 8 years ago

github:ajaxorg/ace-builds

giacomodeliberali commented 8 years ago

OK, seems good the plugin, but still can't render in safari browser. Am I missing any tricks?

abalmus commented 8 years ago

In Safari 9.0.2 works well for me :(

screen shot 2016-07-13 at 1 56 05 pm
abalmus commented 8 years ago

Do you see nay errors in Safari ?

giacomodeliberali commented 8 years ago

Ok fixed safari issue. In my component i used your <style> before <template>. After moving that class inside global .less it's all fixed. Seems that safari ignores my <style> inside the component <html>. Thanks for the support, all closed.