search

Juicy / juicy-ace-editor

Custom Element with the Ace code editor
http://juicy.github.io/juicy-ace-editor/
MIT License
93 stars 34 forks source link

Nothing is working #15

Closed karlito40 closed 8 years ago

karlito40 commented 8 years ago

Hello,

i've tried to include this editor which seems cool. Unfortunalely there is just the content that disptay (google or firefox).

I tried to fix it myself but as a ste note there is no ace-build in the project. I don't understand.


`<head>
    <!--<script src="//cdn.bower_coponents/.net/webcomponentsjs/0.6.0/webcomponents.min.js"></script>-->
    <script src="bower_components/webcomponentsjs/webcomponent.js"></script>

<script src="http://juicy.github.io/ace-builds/src-min-noconflict/mode-html.js"></script>
<script src="http://juicy.github.io/ace-builds/src-min-noconflict/theme-monokai.js"></script>

   <link rel="import" src="bower_coponents/juicy-ace-editor/juicy-ace-editor.html"> 
</head>
<style>
    body{
        height:100%;
        background-color: blue;
    }
</style>
<body>

<juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"><p>Here you have:
    <pre>&lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&gt;
&lt;/juicy-ace-editor&gt;</pre>element.
</p>
<p>
    You can switch modes and themes as regular HTML attributes to
    <a href="https://github.com/ajaxorg/ace-builds/tree/master/src">
        whatever is supported by Ace
    </a>
</p></juicy-ace-editor>    
</body>`
tomalec commented 8 years ago

First of all, you have a typo in 3rd line (missing s), it should be:

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

Then HTML Imports uses href not src, and the default path is bower_components not bower_coponents:

<link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">

And you do not need to attach modes and theme for HTML and Monokai, so entire HTML that would work for you should look like:

<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
</head>
<style>
    body {
        height: 100%;
        background-color: blue;
    }
</style>

<body>

    <juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html">
        <p>Here you have:
            <pre>&lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&gt;
&lt;/juicy-ace-editor&gt;</pre>element.
        </p>
        <p>
            You can switch modes and themes as regular HTML attributes to
            <a href="https://github.com/ajaxorg/ace-builds/tree/master/src">whatever is supported by Ace</a>
        </p>
    </juicy-ace-editor>
</body>

there is no ace-build in the project

Did bower install finished without an error? What do you see in bower_components/ folder?

@karlito40 , Please let me know if it works for you now.

karlito40 commented 8 years ago

You are right. Thank you !