Skip to content

Commit d0e2085

Browse files
author
Ilya P
committed
Initial commit
1 parent aec52d6 commit d0e2085

19 files changed

+641
-1
lines changed

‎.babelrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"presets": [
3+
"es2015",
4+
"react",
5+
"stage-0"
6+
],
7+
"plugins": [
8+
"transform-decorators-legacy",
9+
"react-hot-loader/babel"
10+
]
11+
}

‎.eslintignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/**
2+
dist/**
3+
examples-vanilla-js/**
4+
5+
6+

‎.eslintrc

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"parser" : "babel-eslint",
3+
4+
"plugins": [
5+
"react"
6+
],
7+
8+
"env": {
9+
"browser": true,
10+
"es6": true
11+
},
12+
13+
"rules": {
14+
"semi" : ["error", "never"],
15+
"max-len": ["off", 120, 4],
16+
"jsx-quotes": ["error", "prefer-single"],
17+
"jsx-indent": "off",
18+
"indent": "off"
19+
}
20+
}

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎.npmignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
src/**
2+
examples-vanilla-js/**
3+
examples-es6/**
4+
demo.gif
5+
webpack.config.js
6+
.eslintrc
7+
.eslintignore
8+
.babelrc
9+
.npmignore

‎README.md

Lines changed: 125 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,126 @@
1-
# react-trumbowyg
1+
# React-Trumbowyg
2+
23
React wrapper for [trumbowyg](https://alex-d.github.io/Trumbowyg/ "trumbowyg").
4+
5+
![](demo.gif)
6+
7+
# Table of contents
8+
9+
- [How do I add this to my project?](#how-do-i-add-this-to-my-project)
10+
- [Configure](#configure)
11+
- [Usage](#usage)
12+
- [Props](#props)
13+
14+
# How do I add this to my project?
15+
16+
Install react-trumbowyg via npm:
17+
```
18+
> npm i react-trumbowyg --save
19+
```
20+
21+
# Configure
22+
23+
1. Install jQuery via npm:
24+
```
25+
> npm i jquery --save
26+
```
27+
28+
2. If you are using webpack, add in webpack.config.js:
29+
```
30+
new webpack.ProvidePlugin({
31+
$: "jquery",
32+
jQuery: "jquery"
33+
})
34+
```
35+
# Usage
36+
Add Trumbowyg React component in your project
37+
```
38+
import Trumbowyg from 'react-trumbowyg'
39+
40+
<Trumbowyg/>
41+
```
42+
43+
And don't forget to add default css
44+
```
45+
import 'react-trumbowyg/dist/trumbowyg.min.css'
46+
```
47+
48+
That's it!
49+
50+
# Props
51+
| Prop | Default | Type |
52+
|:------------------------------------------------------------------------------------------------------------------------|:--------------|:--------------------|
53+
| [id](#id) | | ```String``` |
54+
| [data](#data) | | ```String``` |
55+
| [placeholder](#placeholder) | | ```String``` |
56+
| [buttons](https://alex-d.github.io/Trumbowyg/documentation.html#button-pane "buttons") | | ```Array<String>``` |
57+
| [semantic](https://alex-d.github.io/Trumbowyg/documentation.html#semantic "semantic") | ```true``` | ```Bool``` |
58+
| [resetCss](https://alex-d.github.io/Trumbowyg/documentation.html#reset-css "resetCss") | ```false``` | ```Bool``` |
59+
| [removeformatPasted](https://alex-d.github.io/Trumbowyg/documentation.html#remove-format-pasted "removeformatPasted") | ```false``` | ```Bool``` |
60+
| [autogrow](https://alex-d.github.io/Trumbowyg/documentation.html#auto-adjust-height "autogrow") | ```false``` | ```Bool``` |
61+
| [disabled](https://alex-d.github.io/Trumbowyg/documentation.html#enable-disable-edition "disabled") | ```false``` | ```Bool``` |
62+
| [onFocus](#onFocus) | | |
63+
| [onBlur](#onBlur) | | |
64+
| [onInit](#onInit) | | |
65+
| [onChange](#onChange) | | |
66+
| [onResize](#onResize) | | |
67+
| [onPaste](#onPaste) | | |
68+
| [onOpenFullScreen](#onOpenFullScreen) | | |
69+
| [onCloseFullScreen](#onCloseFullScreen) | | |
70+
| [onClose](#onClose) | | |
71+
| [shouldUseSvgIcons](#shouldUseSvgIcons) | ```true``` | ```Bool``` |
72+
| [svgIconsPath](#svgIconsPath) | | ```String``` |
73+
| [shouldInjectSvgIcons](#shouldInjectSvgIcons) | ```true``` | ```Bool``` |
74+
75+
## id
76+
**Type**: ```String```
77+
78+
This id is used by jQuery.
79+
80+
## data
81+
**Type**: ```String```
82+
83+
Text to be entered in the editor by default.
84+
85+
## placeholder
86+
**Type**: ```String```
87+
88+
Add a placeholder.
89+
Placeholder is visible only if the element is empty (no HTML/text).
90+
91+
## Event handlers
92+
### onFocus
93+
Event handler when the focus is on editor
94+
### onBlur
95+
Blur on editor
96+
### onInit
97+
Editor is initialized
98+
### onChange
99+
Change in editor
100+
### onResize
101+
Resize the editor on autogrow
102+
### onPaste
103+
Paste something in the editor
104+
### onOpenFullScreen
105+
Switch to fullscreen mode
106+
### onCloseFullScreen
107+
Leave editor's fullscreen mode
108+
### onClose
109+
Close the editor
110+
111+
## shouldUseSvgIcons
112+
**Type**: ```Bool```
113+
**Default**: ```true```
114+
115+
Should use default svg icons
116+
117+
## svgIconsPath
118+
**Type**: ```String```
119+
120+
The path to your own svg icons
121+
122+
## shouldInjectSvgIcons
123+
**Type**: ```Bool```
124+
**Default**: ```true```
125+
126+
If this prop is false, you should specify the path to your own svg icons in ```svgIconsPath``` prop

‎demo.gif

307 KB
Loading

‎examples-es6/.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"es2015",
4+
"react",
5+
"stage-0"
6+
],
7+
"plugins": [
8+
"transform-decorators-legacy"
9+
]
10+
}

‎examples-es6/package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "react-trumbowyg-example-es6",
3+
"version": "1.0.0",
4+
"description": "React-trumbowyg example with webpack",
5+
"main": "dist/main.js",
6+
"scripts": {
7+
"build": "webpack -p"
8+
},
9+
"author": "RD17",
10+
"license": "ISC",
11+
"dependencies": {
12+
"babel-core": "^6.18.2",
13+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
14+
"babel-polyfill": "^6.16.0",
15+
"babel-preset-es2015": "^6.18.0",
16+
"babel-preset-react": "^6.16.0",
17+
"babel-preset-stage-0": "^6.16.0",
18+
"jquery": "^3.1.1",
19+
"react": "^15.3.2",
20+
"react-dom": "^15.3.2",
21+
"react-trumbowyg": "file:..\\react-trumbowyg-0.0.1.tgz"
22+
},
23+
"devDependencies": {
24+
"babel-core": "^6.18.2",
25+
"babel-loader": "^6.2.7",
26+
"css-loader": "^0.25.0",
27+
"extract-text-webpack-plugin": "^1.0.1",
28+
"html-webpack-plugin": "^2.24.1",
29+
"style-loader": "^0.13.1",
30+
"webpack": "^1.13.3"
31+
}
32+
}

‎examples-es6/src/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>React-Trumbowyg</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

0 commit comments

Comments
 (0)