Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marketingpipeline/ace-editor-web-component

A web-component to add code editors to your web page powered via Ace Editor
https://github.com/marketingpipeline/ace-editor-web-component

ace-editor ace-editor-wc browser code-editor code-editor-online custom-element editor frontend html html-editor html-element ide javascript syntax-highlighting text-editor web-component web-components

Last synced: 30 days ago
JSON representation

A web-component to add code editors to your web page powered via Ace Editor

Awesome Lists containing this project

README 

        
# Ace-Editor-Web-Component



 



![image](https://user-images.githubusercontent.com/86180097/202600069-4a82c9b8-a033-4d04-a32d-e784906cbf01.png)



A web component that allows you to easily add code editor(s) to your web page powered via [Ace Editor](https://github.com/ajaxorg/ace) 


   Show your support! 

  


   

    

  

  

    

  






## Example and usage



You can view a demo of the Ace Editor web component in use [here.](https://marketingpipeline.github.io/Ace-Editor-Web-Component/demo.html)



How to use the Ace Editor Web Component:



Set a language attribute to a [supported programming language](#supported-languages) you prefer to use - example below



```html



```    



   include this [script](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/blob/main/dist/ace-editor-wc.min.js) in your HTML document.

         

  ```html

     

   ```

    

    

    

and include this [CSS](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/blob/main/dist/ace-editor-wc.min.css) file in your HTML document.



```html

  

```



Note: you can easily customize the look of this web component by hosting your own customized CSS file.







How to use the Ace Editor Web Component with Pre-Defined Code:



You can pre-define a code example inside the editor, simply by inserting the code inside of a ace-editor element like so - 



```html

print('hello world')

```    



    

    

### Options



Attribute

Meaning

Default

Required



language

  The language mode to use for Ace Editor

Undefined

Yes



 max-lines

 The max number of lines to set Ace Editor height too

Undefined

No



editor-title

 The editor title to use

Language

No



 editor-theme

 The Ace Editor theme to use

Monokai

No



 editor-options

 Set the ace editor options example - editor-options='{ "maxLines" : "10" }'. NOTE: This will over-write max-lines attribute (if used)

Undefined

No



## Supported Languages



`ABAP`,

`ABC`,

`ActionScript`,

`ADA`,

`Apache_Conf`,

`AsciiDoc`,

`Assembly_x86`,

`AutoHotKey`,

`BatchFile`,

`C9Search`,

`C_Cpp`,

`Cirru`,

`Clojure`,

`Cobol`,

`coffee`,

`ColdFusion`,

`CSharp`,

`CSS`,

`Curly`,

`D`,

`Dart`,

`Diff`,

`Dockerfile`,

`Dot`,

`Dummy`,

`DummySyntax`,

`Eiffel`,

`EJS`,

`Elixir`,

`Elm`,

`Erlang`,

`Forth`,

`FTL`,

`Gcode`,

`Gherkin`,

`Gitignore`,

`Glsl`,

`golang`,

`Groovy`,

`HAML`,

`Handlebars`,

`Haskell`,

`haXe`,

`HTML`,

`HTML_Ruby`,

`INI`,

`Io`,

`Jack`,

`Jade`,

`Java`,

`JavaScript`,

`JSON`,

`JSONiq`,

`JSP`,

`JSX`,

`Julia`,

`LaTeX`,

`LESS`,

`Liquid`,

`Lisp`,

`LiveScript`,

`LogiQL`,

`LSL`,

`Lua`,

`LuaPage`,

`Lucene`,

`Makefile`,

`Markdown`,

`Mask`,

`MATLAB`,

`MEL`,

`MUSHCode`,

`MySQL`,

`Nix`,

`ObjectiveC`,

`OCaml`,

`Pascal`,

`Perl`,

`pgSQL`,

`PHP`,

`Powershell`,

`Praat`,

`Prolog`,

`Properties`,

`Protobuf`,

`Python`,

`R`,

`RDoc`,

`RHTML`,

`Ruby`,

`Rust`,

`SASS`,

`SCAD`,

`Scala`,

`Scheme`,

`SCSS`,

`SH`,

`SJS`,

`Smarty`,

`snippets`,

`Soy_Template`,

`Space`,

`SQL`,

`Stylus`,

`SVG`,

`Tcl`,

`Tex`,

`Text`,

`Textile`,

`Toml`,

`Twig`,

`Typescript`,

`Vala`,

`VBScript`,

`Velocity`,

`Verilog`,

`VHDL`,

`XML`,

`XQuery`,

`YAML`



Note: the web component will still work with an un-supported language mode for the Ace Editor - tho syntax highlighting, auto-indentation features & etc.. will not work. 



## Loading extensions



To load & use extensions / plugins for Ace Editor. You will need to define a variable / list called ```AceEditor_WC_Ace_Editor_EXTS```. Each URL / file path in this list will be loaded to the page. Example below -



```js

let AceEditor_WC_Ace_Editor_EXTS = ['https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ext-language_tools.js']

```



## Install locally



The web component loads all resources for Ace Editor via CDN. You can change this to load all the resource / file paths from a local path. To set files to be loaded from your local path define a variable ```AceEditor_WC_Ace_Editor_Path``` with the path to load the files from. Example below -



```js

let AceEditor_WC_Ace_Editor_Path = "path/to/files/"

```



You can download / find the version of Ace Editor used in the web-component [here](https://cdnjs.com/libraries/ace)



## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/Ace-Editor-Web-Component)



Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!



See also the list of

[contributors](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/graphs/contributors) who

participate in this project.



## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/Ace-Editor-Web-Component)



This project is licensed under the MIT License - see the

[LICENSE.md](https://github.com/MarketingPipeline/Ace-Editor-Web-Component/blob/main/LICENSE) file for

details.