@zeedhi/zd-richtext-common 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -74
- package/dist/rich-text-common.esm.js +1 -5
- package/dist/rich-text-common.umd.js +1 -5
- package/package.json +2 -2
- package/types/interfaces.d.ts +1 -1
- package/types/rich-text.d.ts +2 -2
package/README.md
CHANGED
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
# Componente Rich Text para Zeedhi
|
|
2
|
-
O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
## Instalação
|
|
7
|
-
<code>npm i @zeedhi/zd-richtext</code>
|
|
8
|
-
Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
|
|
9
|
-
|
|
10
|
-
Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
|
|
11
|
-
```ts
|
|
12
|
-
import { ZdRichText } from '@zeedhi/zd-richtext';
|
|
13
|
-
|
|
14
|
-
Vue.component('ZdRichText', ZdRichText);
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
|
|
18
|
-
|
|
19
|
-
## Uso Básico
|
|
20
|
-
Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
|
|
21
|
-
|
|
22
|
-
```json
|
|
23
|
-
{
|
|
24
|
-
"name": "rich-text-example",
|
|
25
|
-
"component": "ZdRichText"
|
|
26
|
-
}
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## Propriedades
|
|
30
|
-
|
|
31
|
-
### outputFormat
|
|
32
|
-
<p>Tipo: <code>string</code></p>
|
|
33
|
-
<p>Default: <code>json</code></p>
|
|
34
|
-
<p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
|
|
35
|
-
|
|
36
|
-
### placeholder
|
|
37
|
-
<p>Tipo: <code>string</code></p>
|
|
38
|
-
<p>Default: <code>''</code></p>
|
|
39
|
-
<p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
|
|
40
|
-
|
|
41
|
-
### disabled
|
|
42
|
-
<p>Tipo: <code>boolean</code></p>
|
|
43
|
-
<p>Default: <code>false</code></p>
|
|
44
|
-
<p>Descrição: Desabilita o componente</p>
|
|
45
|
-
|
|
46
|
-
### toolbarColor
|
|
47
|
-
<p>Tipo: <code>string</code></p>
|
|
48
|
-
<p>Default: <code>'#772583'</code></p>
|
|
49
|
-
<p>Descrição: Define a cor da barra de tarefas</p>
|
|
50
|
-
|
|
51
|
-
### cardColor
|
|
52
|
-
<p>Tipo: <code>string</code></p>
|
|
53
|
-
<p>Default: <code>''</code></p>
|
|
54
|
-
<p>Descrição: Define a cor do cartão de entrada de texto</p>
|
|
55
|
-
|
|
56
|
-
### outlined
|
|
57
|
-
<p>Tipo: <code>boolean</code></p>
|
|
58
|
-
<p>Default: <code>false</code></p>
|
|
59
|
-
<p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
|
|
60
|
-
|
|
61
|
-
### width
|
|
62
|
-
<p>Tipo: <code>number | string</code></p>
|
|
63
|
-
<p>Default: <code>''</code></p>
|
|
64
|
-
<p>Descrição: Define a largura do componente</p>
|
|
65
|
-
|
|
66
|
-
### height
|
|
67
|
-
<p>Tipo: <code>number | string</code></p>
|
|
68
|
-
<p>Default: <code>''</code></p>
|
|
69
|
-
<p>Descrição: Define a altura do componente</p>
|
|
70
|
-
|
|
71
|
-
## Eventos
|
|
72
|
-
<p>Nome: <code>onKeyDown</code></p>
|
|
73
|
-
<p><code>{ element, component, key, content }: IEventParam</code></p>
|
|
74
|
-
<p>Descrição: Disparado quando uma tecla é digitada no editor</p>
|
|
1
|
+
# Componente Rich Text para Zeedhi
|
|
2
|
+
O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Instalação
|
|
7
|
+
<code>npm i @zeedhi/zd-richtext</code>
|
|
8
|
+
Com isso, dois pacotes serão instalados: o **@zeedhi/zd-richtext-common** e o **@zeedhi/zd-richtext-vue**.
|
|
9
|
+
|
|
10
|
+
Após a instalação, é necessário que você você importe o pacote **@zeedhi/zd-richtext-vue** dentro de seu arquivo de configuração <code>zeedhi.ts</code>
|
|
11
|
+
```ts
|
|
12
|
+
import { ZdRichText } from '@zeedhi/zd-richtext';
|
|
13
|
+
|
|
14
|
+
Vue.component('ZdRichText', ZdRichText);
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Já o pacote **@zeedhi/zd-rich-text-common** deve ser importado no arquivo <code>controller</code> do componente.
|
|
18
|
+
|
|
19
|
+
## Uso Básico
|
|
20
|
+
Para usar, defina a propriedade <code>component</code> como 'ZdRichText'.
|
|
21
|
+
|
|
22
|
+
```json
|
|
23
|
+
{
|
|
24
|
+
"name": "rich-text-example",
|
|
25
|
+
"component": "ZdRichText"
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Propriedades
|
|
30
|
+
|
|
31
|
+
### outputFormat
|
|
32
|
+
<p>Tipo: <code>string</code></p>
|
|
33
|
+
<p>Default: <code>json</code></p>
|
|
34
|
+
<p>Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')</p>
|
|
35
|
+
|
|
36
|
+
### placeholder
|
|
37
|
+
<p>Tipo: <code>string</code></p>
|
|
38
|
+
<p>Default: <code>''</code></p>
|
|
39
|
+
<p>Descrição: Texto mostrado enquanto o editor estiver sem conteúdo</p>
|
|
40
|
+
|
|
41
|
+
### disabled
|
|
42
|
+
<p>Tipo: <code>boolean</code></p>
|
|
43
|
+
<p>Default: <code>false</code></p>
|
|
44
|
+
<p>Descrição: Desabilita o componente</p>
|
|
45
|
+
|
|
46
|
+
### toolbarColor
|
|
47
|
+
<p>Tipo: <code>string</code></p>
|
|
48
|
+
<p>Default: <code>'#772583'</code></p>
|
|
49
|
+
<p>Descrição: Define a cor da barra de tarefas</p>
|
|
50
|
+
|
|
51
|
+
### cardColor
|
|
52
|
+
<p>Tipo: <code>string</code></p>
|
|
53
|
+
<p>Default: <code>''</code></p>
|
|
54
|
+
<p>Descrição: Define a cor do cartão de entrada de texto</p>
|
|
55
|
+
|
|
56
|
+
### outlined
|
|
57
|
+
<p>Tipo: <code>boolean</code></p>
|
|
58
|
+
<p>Default: <code>false</code></p>
|
|
59
|
+
<p>Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto</p>
|
|
60
|
+
|
|
61
|
+
### width
|
|
62
|
+
<p>Tipo: <code>number | string</code></p>
|
|
63
|
+
<p>Default: <code>''</code></p>
|
|
64
|
+
<p>Descrição: Define a largura do componente</p>
|
|
65
|
+
|
|
66
|
+
### height
|
|
67
|
+
<p>Tipo: <code>number | string</code></p>
|
|
68
|
+
<p>Default: <code>''</code></p>
|
|
69
|
+
<p>Descrição: Define a altura do componente</p>
|
|
70
|
+
|
|
71
|
+
## Eventos
|
|
72
|
+
<p>Nome: <code>onKeyDown</code></p>
|
|
73
|
+
<p><code>{ element, component, key, content }: IEventParam</code></p>
|
|
74
|
+
<p>Descrição: Disparado quando uma tecla é digitada no editor</p>
|
|
@@ -19,10 +19,6 @@ class RichText extends ComponentRender {
|
|
|
19
19
|
* Disable the component
|
|
20
20
|
*/
|
|
21
21
|
this.disabled = false;
|
|
22
|
-
/**
|
|
23
|
-
* Toolbar color
|
|
24
|
-
*/
|
|
25
|
-
this.toolbarColor = 'var(--v-primary-base)';
|
|
26
22
|
/**
|
|
27
23
|
* Card color
|
|
28
24
|
*/
|
|
@@ -53,7 +49,7 @@ class RichText extends ComponentRender {
|
|
|
53
49
|
this.height = this.getInitValue('height', props.height, this.height);
|
|
54
50
|
this.createAccessors();
|
|
55
51
|
}
|
|
56
|
-
|
|
52
|
+
onKeyDown(element, key) {
|
|
57
53
|
this.callEvent('onKeyDown', {
|
|
58
54
|
element, component: this, key, content: this.content,
|
|
59
55
|
});
|
|
@@ -22,10 +22,6 @@
|
|
|
22
22
|
* Disable the component
|
|
23
23
|
*/
|
|
24
24
|
this.disabled = false;
|
|
25
|
-
/**
|
|
26
|
-
* Toolbar color
|
|
27
|
-
*/
|
|
28
|
-
this.toolbarColor = 'var(--v-primary-base)';
|
|
29
25
|
/**
|
|
30
26
|
* Card color
|
|
31
27
|
*/
|
|
@@ -56,7 +52,7 @@
|
|
|
56
52
|
this.height = this.getInitValue('height', props.height, this.height);
|
|
57
53
|
this.createAccessors();
|
|
58
54
|
}
|
|
59
|
-
|
|
55
|
+
onKeyDown(element, key) {
|
|
60
56
|
this.callEvent('onKeyDown', {
|
|
61
57
|
element, component: this, key, content: this.content,
|
|
62
58
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-richtext-common",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "RichTextCommon by BVR",
|
|
5
5
|
"main": "dist/rich-text-common.umd.js",
|
|
6
6
|
"module": "dist/rich-text-common.esm.js",
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"@zeedhi/common": "*",
|
|
24
24
|
"@zeedhi/core": "*"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "afcd93321d2805e8ac7e3f0bd55b39a636736f05"
|
|
27
27
|
}
|
package/types/interfaces.d.ts
CHANGED
package/types/rich-text.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export declare class RichText extends ComponentRender implements IRichText {
|
|
|
19
19
|
/**
|
|
20
20
|
* Toolbar color
|
|
21
21
|
*/
|
|
22
|
-
toolbarColor
|
|
22
|
+
toolbarColor?: string;
|
|
23
23
|
/**
|
|
24
24
|
* Card color
|
|
25
25
|
*/
|
|
@@ -45,5 +45,5 @@ export declare class RichText extends ComponentRender implements IRichText {
|
|
|
45
45
|
* Rich text content
|
|
46
46
|
*/
|
|
47
47
|
content: string;
|
|
48
|
-
|
|
48
|
+
onKeyDown(element?: HTMLElement, key?: string): void;
|
|
49
49
|
}
|