@lotte-innovate/ui-component-test 0.2.18 → 0.2.20
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +7 -1
- package/dist/lib/components/Editor/index.js +2 -2
- package/dist/lib/components/Editor/index.mjs +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/post-tinymce.d.ts +1 -0
- package/dist/post-tinymce.js +22 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/post-tinymce.js +1 -5
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
L-UI 에디터를 포함한 단일 패키지입니다.
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
이 패키지는 TinyMCE 에디터를 사용한 WYSIWYG HTML 편집기를 제공합니다.
|
|
17
17
|
|
|
18
18
|
다양한 플러그인을 통해 기능을 확장할 수 있으며 상세 기능은 이 [링크](https://www.tiny.cloud/docs/tinymce/6/examples/)에서 확인 가능합니다.
|
|
19
19
|
|
|
@@ -29,6 +29,12 @@ L-UI 에디터를 포함한 단일 패키지입니다.
|
|
|
29
29
|
yarn add @lotte-innovate/lui-editor
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
패키지 설치 시, 에디터 내부의 콘텐츠 스타일을 정의하는 css 파일이 다음 경로에 추가됩니다.
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
public/tinymce/skins/ui/oxide/content.min.css
|
|
36
|
+
```
|
|
37
|
+
|
|
32
38
|
## Usage
|
|
33
39
|
|
|
34
40
|
React 프로젝트에서 에디터를 사용하는 방법에 대한 예시입니다.
|
|
@@ -62,9 +62,9 @@ export var Editor = forwardRef(function (_a, ref) {
|
|
|
62
62
|
base_url: 'tinymce',
|
|
63
63
|
width: '100%',
|
|
64
64
|
height: '100%',
|
|
65
|
-
plugins: 'link table code
|
|
65
|
+
plugins: 'link table lists code codesample',
|
|
66
66
|
menubar: false,
|
|
67
|
-
toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat markdown',
|
|
67
|
+
toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat codesample markdown',
|
|
68
68
|
content_style: 'body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }',
|
|
69
69
|
setup: function (editor) {
|
|
70
70
|
editor.ui.registry.addButton('inlinecode', {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as t}from"react/jsx-runtime";import{forwardRef as
|
|
2
|
+
import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Editor as i}from"@tinymce/tinymce-react";import{cva as n}from"class-variance-authority";import{scalingVariants as o}from"../../constants.mjs";import{cn as r}from"../../utils/utils.mjs";import{marked as s}from"marked";import"tinymce/tinymce";import"tinymce/themes/silver";import"tinymce/models/dom";import"tinymce/icons/default";import"tinymce/skins/ui/oxide/skin";import"tinymce/plugins/advlist";import"tinymce/plugins/code";import"tinymce/plugins/codesample";import"tinymce/plugins/link";import"tinymce/plugins/lists";import"tinymce/plugins/table";import"tinymce/plugins/image";import"tinymce/skins/content/default/content";import"tinymce/skins/ui/oxide/content";var m=function(){return m=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},m.apply(this,arguments)},a=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(i[n[o]]=t[n[o]])}return i},c=n("",{variants:{scaling:m({},o),size:{small:"w-[500px] h-[350px]",medium:"w-[550px] h-[400px]",large:"w-[600px] h-[450px]"}},defaultVariants:{scaling:"100%",size:"medium"}}),l=e((function(e,n){var o=e.className,l=e.size,p=e.scaling,u=a(e,["className","size","scaling"]);return t("div",{className:r(c({size:l,scaling:p}),o),ref:n,children:t(i,m({init:{base_url:"tinymce",width:"100%",height:"100%",plugins:"link table lists code codesample",menubar:!1,toolbar:"blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat codesample markdown",content_style:"body { font-family:Noto Sans KR, sans-serif, Nunito Sans, Helvetica Neue, Helvetica }",setup:function(t){t.ui.registry.addButton("inlinecode",{icon:"sourcecode",tooltip:"Inline code",onAction:function(){t.formatter.toggle("code")}}),t.on("init",(function(){t.formatter.register("code",{inline:"code",remove:"all"})})),t.ui.registry.addButton("markdown",{text:"Markdown",onAction:function(){var e=t.getContent({format:"text"}),i=s(e);t.setContent(i)}})}}},u))})}));l.displayName="Editor";export{l as Editor,l as default};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|