https://github.com/inmount/codegg
码蛋（Codegg），原生JS编写的代码编辑器
https://github.com/inmount/codegg
html javascript lark
Last synced: 7 months ago
JSON representation
码蛋（Codegg），原生JS编写的代码编辑器
- Host: GitHub
- URL: https://github.com/inmount/codegg
- Owner: inmount
- License: mit
- Created: 2021-06-21T11:53:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-28T16:25:46.000Z (over 2 years ago)
- Last Synced: 2024-05-30T06:05:14.958Z (over 1 year ago)
- Topics: html, javascript, lark
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Codegg Editor
English | [简体中文](README_zhCN.md)
## Introduction
Codegg is an easy-to-use front-end editor written in vanilla JavaScript. This editor mainly supports HTML editing, and supports a functional scripting language called **Lark** in addition.
## Getting Started
The editor is easy-to-use and free-to-extend. This is only a core editor which you can add some mostly-used code into it quickly. Extensions developments are welcome.
Here's an example:
```js
// Construct an object.
var codegg = new Codegg("editor", {
// Configure colors
colors: {
borderColor: "#cccccc",
toolbarItemColor: "#d81e06",
toolbarItemBackgroudColorHover: "#ffffff",
toolbarBackgroundColor: "#ebebeb",
toolbarSpliteColor: "#dddddd",
},
// Configure toolbar
toolbar: [["h1", "h2", "h3", "p", "div"], ["b", "i", "s"], ["table", "ol", "ul"], ["link", "image", "audio", "video"], ["view"]]
});
// onError callback.
codegg.bind("error", function (ex) {
alert(ex);
});
// Save event callback.
codegg.bind("save", function () {
alert("Save");
});
// On adding image. Should give a URL to the image by calling e.setResult.
codegg.bind("image", function (e) {
// Setting the result.
e.setResult({ src: "https://a.com/b.jpg" });
});
// Getting the content inside the editor.
function getContent() {
alert(codegg.getContent());
}
// Setting the content inside the editor.
function setContent() {
codegg.setContent("
Testing content");
}
```
## Toolbar Event Registration
Every item in the toolbar provides a event registration, by using method `bind(string, void)`.
Use `setResult(object)` to set the related arguments.
## `setResult(object)` for Simple Elements
For simple elements, just pass the new properties object into the `setResult(object)` method. The object will be used as the properties of the corresponding HTML element. For example,
```js
codegg.bind("div", function (e) {
// Set the result
e.setResult({ name: "d1" });
});
```
After running that, you're expected to get the following content while clicking the `div` toolbar item:
```html
```
## `setResult(object)` for Complex Elements
So-called **complex elements** are `table`, `ol` and `ul`, which you can set the their own properties and children's properties, respectively.
`table` related settings:
```javascript
codegg.bind("table", function (e) {
// Setting the result.
e.setResult({
rows: 2,
columns: 4,
table: { name: "tab1" },
tr: { style: "background-color:#ebebeb;" },
td: { style: "color:#222;" }
});
});
```
You'll get the following result after clicking the `table` toolbar item:
```html
```
`ul` and `ol` related settings:
```js
// If you want to set the `ul`, just replace the first
// argument with `"ul"`.
codegg.bind("ol", function (e) {
// Setting the result.
e.setResult({
lines: 2,
ol: { name: "list1" },
li: { style: "color:#222;" }
});
});
```
Result after clicking the `ol` (or `ul`) toolbar item:
```html
-
-
-
```