{"_id":"@dlwnsgml0328/studio_v2","_rev":"2-4eb144d14c098233ac5f4c7be9a88cf1","name":"@dlwnsgml0328/studio_v2","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@dlwnsgml0328/studio_v2","version":"1.0.0","description":"eazel studio package","main":"index.js","scripts":{"build":"rollup -c","serve":"webpack serve --config webpack.config.js","start":"concurrently \"node server.js\" \"webpack serve --config webpack.config.js\"","scss":"sass --watch --no-source-map src/scss/contentbox.scss public/contentbox/contentbox.css","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@babel/core":"^7.15.0","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-transform-runtime":"^7.17.0","@babel/preset-env":"^7.15.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-image":"^2.1.1","@rollup/plugin-node-resolve":"^13.0.6","axios":"^0.21.4","babel-loader":"^8.2.2","concurrently":"^6.3.0","cors":"^2.8.5","css-loader":"^6.2.0","eslint":"^8.16.0","express":"^4.17.1","express-session":"^1.17.2","formidable-serverless":"^1.1.1","mini-css-extract-plugin":"^2.2.0","rollup":"^2.59.0","rollup-plugin-terser":"^7.0.2","sass":"^1.38.1","sass-loader":"^12.1.0","sharp":"^0.30.3","webpack":"^5.51.1","webpack-cli":"^4.8.0","webpack-dev-server":"^4.0.0"},"dependencies":{"@innovastudio/contentbuilder":"^1.1.20","js-beautify":"^1.14.0"},"repository":{"type":"git","url":"git+https://github.com/dlwnsgml0328/studio.git"},"keywords":["studio"],"author":{"name":"junhee lee"},"license":"ISC","bugs":{"url":"https://github.com/dlwnsgml0328/studio/issues"},"homepage":"https://github.com/dlwnsgml0328/studio#readme","gitHead":"dc061a7a1c5cedf63e354eefa524e4079119008b","_id":"@dlwnsgml0328/studio_v2@1.0.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-25dPAnPZtOJDotyRmOoeoNLBfo+dQCNH/q7/ptWilMuF1y/q0cRy42bNzFAoLEJ8WNwbV44BzO6shITqON5nrg==","shasum":"85f371ab102ea26d2cba9479f6f586d0dffd9301","tarball":"https://registry.npmjs.org/@dlwnsgml0328/studio_v2/-/studio_v2-1.0.0.tgz","fileCount":6,"unpackedSize":281796,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpFMJYMUMqEgFjiXSvs27lVKogdK44pxT7tNuXuAg62QIgap9wjNsbykVpGSCodNMpA33i4KOOjVAWwyGy0qhsnq0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijYSTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpONg/+IBbxESA9g+fc2d5HM5MS5elXvA4s3BiP1s9VnYf7LiBKG7UG\r\nI8BSiHBY+9O3ptwWSdOAne2bifOSWqeI/+2qWmpe3W/3Js+/FRSnOMrLOeLB\r\nPbo49LqAePCQwdC8Ow8DuDcHDNTpBoAutSjd2tGIOpGo/S7hyJLmvLfo4exU\r\nvrU9XWguQt7HP87wR2G/mHgrb31JS/i3RhdW8SPJwAOVm8Mw1Fw7+ismzy2Q\r\nvi78k45CNwbalzXhcjtQFBBAP2198MKswTeGonZwB7RCSRKeKDBkljxvD+n+\r\nFaSAXwj8a1xEAH8uWlfC1GsCbjs57AFZI3XXHr6RVYdW+69w91fRaB+p6OEJ\r\nAyfdC9qilx5sjn2x+UoKB4PRkoHjJWvDfGDFTymVTawgk9JNIz0lxtFTjJbX\r\nu4YQnB1xu5O94Dt2PATwu5Db0y28bYRxMSGvTlM2HXhfPygsfi6nmtjDNZu9\r\nlDxtsBvdn3uqrNntw1rIlBfgIh+VDHWnjexHi58yb1+9C31JTmdhqN4fIY0Y\r\nq/ETrw62Wswd+HP4fTCy404NuaJJT3tM2TK6oSadpeLU9nXH4SZ6OEpDcR1T\r\nKaPDxGvkyIiieFe1lm/vunf48NgiRv967CeL2ke7sKCS9h0L4nah3LXDpUDB\r\nEYzz0YgpzMeu2KR6TYDTVeXL5/3MWHINpng=\r\n=RwZP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"junheelee","email":"junhee@eazel.net"},"directories":{},"maintainers":[{"name":"junheelee","email":"junhee@eazel.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/studio_v2_1.0.0_1653441683379_0.7883217538999978"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dlwnsgml0328/studio_v2","version":"1.0.1","description":"eazel studio package","main":"index.js","scripts":{"build":"rollup -c","serve":"webpack serve --config webpack.config.js","start":"concurrently \"node server.js\" \"webpack serve --config webpack.config.js\"","scss":"sass --watch --no-source-map src/scss/contentbox.scss public/contentbox/contentbox.css","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@babel/core":"^7.15.0","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-transform-runtime":"^7.17.0","@babel/preset-env":"^7.15.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-image":"^2.1.1","@rollup/plugin-node-resolve":"^13.0.6","axios":"^0.21.4","babel-loader":"^8.2.2","concurrently":"^6.3.0","cors":"^2.8.5","css-loader":"^6.2.0","eslint":"^8.16.0","express":"^4.17.1","express-session":"^1.17.2","formidable-serverless":"^1.1.1","mini-css-extract-plugin":"^2.2.0","rollup":"^2.59.0","rollup-plugin-terser":"^7.0.2","sass":"^1.38.1","sass-loader":"^12.1.0","sharp":"^0.30.3","webpack":"^5.51.1","webpack-cli":"^4.8.0","webpack-dev-server":"^4.0.0"},"dependencies":{"@innovastudio/contentbuilder":"^1.1.20","js-beautify":"^1.14.0"},"repository":{"type":"git","url":"git+https://github.com/dlwnsgml0328/studio.git"},"keywords":["studio"],"author":{"name":"junhee lee"},"license":"ISC","bugs":{"url":"https://github.com/dlwnsgml0328/studio/issues"},"homepage":"https://github.com/dlwnsgml0328/studio#readme","gitHead":"eb893b6832ee93e247e8ba557e70084c03661e2f","_id":"@dlwnsgml0328/studio_v2@1.0.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-uzqgqDrQNshJNqOKJU73xfb29Y48t5/fjW4i+wN7rhYB+kmgelRAzoT5UqL+/zwvnL/3NsS2MSjzxLSTl4uaNA==","shasum":"3a375d6307cb52e37320b55072de096874a47ddd","tarball":"https://registry.npmjs.org/@dlwnsgml0328/studio_v2/-/studio_v2-1.0.1.tgz","fileCount":18,"unpackedSize":8474008,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIrx8qY8ksKio92U/urRQ7ULff4+EVgq4+u/41xAW6mAiBVDXjfDKePYDauP7y05OFsljIeYrmxEuD7wzRLBmq9Aw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijYWVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1CA/7BFH28pf7FPWuXk2l+Qe8TsWn+KyunGQQs1JMU2t3vfDIhbjT\r\nDjVIqQwECm2lkQkyTSFdvDSeaQmgOS6bKn+5dDgIGNds57TnfA60xkUlsjTY\r\nq3Ic1x8h2cbxnHi4g4sDPbMI7Sa/vc6fHRee0WhF9Ssnm4M0i1p/TLQLmLUd\r\nikFGVqGq+4q1GlLs1tEYGAyt2q526BCGe4kheyUUmg/mIY5y1Jhpt2QafR31\r\ne0XM8sLXpKsD+u08aq1TJ0yY0VgdVtQGWzg3eGMkkpS0WkPLMyiA3EDp4ATz\r\nHRGY9PfMpJusbB0IpOKlvV39u2okTSY+3BV3RHoXBxl5Usxcz+P440cB/5Mf\r\n625vmEsRpDTxJgfdfUWWBEpcbqJ6Jjub+3/cSOS+jKVJtuBLS5HX4um+l8PA\r\n7I4pAEdhDJRy0vSGbn+gJTlBxBAcn/5WYAnEUJyBjFdDWPZhU2b3/4e4LYKB\r\n0JqXlADhfiRHEHlvQGGC9CBLRsgm/xxhI6GDaKHEJZNgw7ouRl6gh5lXph//\r\nsrJkTMZn6YpMhsW/4amtpLFDcvYFX7Cj2RSh0E9PJuaQQCNvkWhiVd7oFnt1\r\nXZ60Wj10NnV1rtyEQ/wgyteS5UA7fad75Ex+0e5CSbTbYvh4k0dGB6AfHUhP\r\nNK0w5wnibbNucF2VffAK6w7NXeMi90J8yX8=\r\n=Ioay\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"junheelee","email":"junhee@eazel.net"},"directories":{},"maintainers":[{"name":"junheelee","email":"junhee@eazel.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/studio_v2_1.0.1_1653441941636_0.44521306499783275"},"_hasShrinkwrap":false},"1.0.2":{"name":"@dlwnsgml0328/studio_v2","version":"1.0.2","description":"eazel studio package","main":"index.js","scripts":{"build":"rollup -c","serve":"webpack serve --config webpack.config.js","start":"concurrently \"node server.js\" \"webpack serve --config webpack.config.js\"","scss":"sass --watch --no-source-map src/scss/contentbox.scss public/contentbox/contentbox.css","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@babel/core":"^7.15.0","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-transform-runtime":"^7.17.0","@babel/preset-env":"^7.15.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-eslint":"^8.0.1","@rollup/plugin-image":"^2.1.1","@rollup/plugin-node-resolve":"^13.0.6","axios":"^0.21.4","babel-loader":"^8.2.2","concurrently":"^6.3.0","cors":"^2.8.5","css-loader":"^6.2.0","eslint":"^8.16.0","express":"^4.17.1","express-session":"^1.17.2","formidable-serverless":"^1.1.1","mini-css-extract-plugin":"^2.2.0","rollup":"^2.59.0","rollup-plugin-terser":"^7.0.2","sass":"^1.38.1","sass-loader":"^12.1.0","sharp":"^0.30.3","webpack":"^5.51.1","webpack-cli":"^4.8.0","webpack-dev-server":"^4.0.0"},"dependencies":{"@innovastudio/contentbuilder":"^1.1.20","js-beautify":"^1.14.0"},"repository":{"type":"git","url":"git+https://github.com/dlwnsgml0328/studio.git"},"keywords":["studio"],"author":{"name":"junhee lee"},"license":"ISC","bugs":{"url":"https://github.com/dlwnsgml0328/studio/issues"},"homepage":"https://github.com/dlwnsgml0328/studio#readme","gitHead":"8ce08c39d4d0c959c059e44e9421a56c60f9b1ec","_id":"@dlwnsgml0328/studio_v2@1.0.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-3JAxgdSOiCFIe4ylDLgVEHzkLdCA8ZPOV9bDiSmRnfZH4lDLQeFoEUdzGJaIHFmaSdE2QiNJcZQgvTfXfGsseA==","shasum":"4d191f43d25ac8eb78f5e5b089b4314556fb1ba6","tarball":"https://registry.npmjs.org/@dlwnsgml0328/studio_v2/-/studio_v2-1.0.2.tgz","fileCount":19,"unpackedSize":8477354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMFjqICSKZ8wkZ7lfS6vbqIx5LvXztFe9A3jnuZjzP7AiB7h7t+jEqO67gjbiJchNJ5PJizFb8Y0Tt1n9mtADxwNw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilHKFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxSg//ec04phQUYP2xIio3mPniFFaCfAv36+vK2ySNWK5+QpOXISv2\r\njL+l2SGc3Ek+dt97P6/62Nci8UsKFDnXzO+PsmbAzgD9FeMwHgTd0sE+seOF\r\naIcYRflmXVZaB2EmrcEuobH3+EdOTGHlhfaTiMu/QXsu9jnQ/gveAFmBvrvD\r\nMoaecC9cEQ8KY/RmhV42pgs8JYmErdeSqQeL83QQ7LxzbcptsWEVhNJ3z7Vn\r\n+7ETg8TF9Ar7bHohejuIEHCXwX5LgKsSxFW1QGwIl5+ejGwzcbmGFznIuNTU\r\naHD1LEIktvdPycuZ6gDP2mPbHoSXIdwYrhgSgzTiqH1GRFO60gSH1oSNC9vv\r\nNisXLgpxUeoo1SpTsCcqR3KDyWgNALtokB35CAYCrLHgJEC9EixBpIPoWvaI\r\nFqGfMgfCGJ7CnKQm61BU4Ie1Kb5GuPS/E4cohxpvBTSt5Abvjf+zCZcYoOhM\r\n2cM9O0l1cqAoCIoWUaF8nWANF80uzjWi65XJ9dQ/2qkMBraXZMt/DyiIqJIN\r\nwkGT/jNS7es/brvSuNgg3UMLkSeP3E/rj9D1OCEiCzFEaXLyhwKM31wiWqzJ\r\nbdqLdX49P3Ysj+OFY5JaPOH4/hxLdb1CewDXhbp1PLiMVdkF1a3kQj49IRia\r\n4Xtw3gnVbybMwOhPNh2tB8zejW9ksBb19xY=\r\n=8REV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"junheelee","email":"junhee@eazel.net"},"directories":{},"maintainers":[{"name":"junheelee","email":"junhee@eazel.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/studio_v2_1.0.2_1653895812783_0.888218617466445"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-25T01:21:23.309Z","1.0.0":"2022-05-25T01:21:23.588Z","modified":"2022-05-30T07:30:13.177Z","1.0.1":"2022-05-25T01:25:41.924Z","1.0.2":"2022-05-30T07:30:13.080Z"},"maintainers":[{"name":"junheelee","email":"junhee@eazel.net"}],"description":"eazel studio package","homepage":"https://github.com/dlwnsgml0328/studio#readme","keywords":["studio"],"repository":{"type":"git","url":"git+https://github.com/dlwnsgml0328/studio.git"},"author":{"name":"junhee lee"},"bugs":{"url":"https://github.com/dlwnsgml0328/studio/issues"},"license":"ISC","readme":"# ContentBox.js\n\nContentBox.js is a web page designer. It uses ContentBuilder.js as its HTML editor with added features for page designing. You can use it to create your own CMS or online site builder.\n\n\n\n## Getting Started\n\nInclude the ContentBuilder css files:\n\n```html\n \n\n```\n\nand the main ContentBox css file:\n\n```html\n\n```\n\n#### Install as Web Library\n\nInclude the js file:\n\n```html\n\n```\n\n#### Or Install with NPM\n\n```\nnpm install @innovastudio/contentbox\n```\n\nThen import into your project:\n\n```javascript\nimport ContentBox from '@innovastudio/contentbox';\n```\n\n## Additional Includes for Viewing Content\n\nFor viewing content, additional includes are also needed. \n\nOn the head section:\n\n```html\n\n```\n\nBefore the end of the body tag:\n\n```html\n\n```\n\n#### If you are upgrading from the previous version of ContentBox\n\n(this is the same as in the previous version)\n\nOn the head section:\n\n```html\n\n```\n\nBefore the end of the body tag:\n\n```html\n /* for running the slider */\n\n```\n\nThe JQuery include is needed here because the previous version of ContentBox includes predesigned Sliders (using Slick slider) that require JQuery to run.\nIf you are not using the slider in your content, then you do not need JQuery include and you can change the **box.css** & **box.js** includes with the **box-flex.css** & **box-flex.js** which exclude the JQuery dependency.\n\n\n## Usage\n\n```html\n
\n
\n```\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n});\n```\n\nTo get the edited content:\n\n1) Get the HTML content\n\n```javascript\nlet html = builder.html();\n```\n\n2) Get the styles\n\n```javascript\nlet mainCss = builder.mainCss(); // Returns the default typography style for the page.\nlet sectioncss = builder.sectioncss(); // Returns the typography styles for specific sections on the page\n```\n\nThen you can do anything with the content, for example, posting it to the server for saving, etc.\n\nIn production, the saved HTML content should be rendered with its styles.\n\n### Examples (HTML, PHP, React, Vue)\n\nContentBox.js is written in pure Javascript (ES6) so you can use it in most situations. Sample use in simple HTML, PHP, React and Vue projects are included.\n\nReact and Vue project examples are provided in separate downloads in the user area.\n\n## Folder Structure\n\n- public/\n - assets/\n - box/\n - contentbox/\n - contentbuilder/\n - uploads/\n - example.html (HTML example)\n - example.php (PHP example)\n - example-bootstrap.html (using Bootstrap framework)\n - example-foundation.html (using Foundation framework)\n - example-jquery.html (HTML example from the previous version using JQuery)\n- src/\n - contentbox/ (Only provided in Source Code package)\n - scss/ (Only provided in Source Code package)\n- docs/\n- README.md (Documentation)\n- readme.txt (Readme file)\n- readme-sourcecode.txt (Readme file for Source Code package)\n- ...\n\n\n## Predesigned Sections (Templates)\n\nTo start building a page, you can click the (+) button on the top left sidebar. This will open a selection of predesigned sections that you can add into your page.\n\n\n\n\n\nThere are 2 predesigned section categories: \n- Simple Start (to start from a basic/clean design)\n- Quick Start (to start with examples)\n\nThe predesigned section files are located in the folder:\n\n**assets/designs/**\n\nIt contains:\n- basic.js (a JSON file containing a list of simple designs)\n- examples.js (a JSON file containing a list of ready made designs)\n- images (contains assets for the designs)\n- preview (contains design thumbnails)\n\nYou can configure the file location by setting the **designUrl1**, **designUrl2** and **designPath** parameters:\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n designUrl1: 'assets/designs/basic.js',\n designUrl2: 'assets/designs/examples.js',\n designPath: 'assets/designs/',\n});\n```\nIn case of a different assets location, path adjustment may be needed. Here you can use the **designPathReplace** parameter.\n\nExample:\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n designUrl1: 'https://path-to/assets/designs/basic.js',\n designUrl2: 'https://path-to/assets/designs/examples.js',\n designPath: 'https://path-to/assets/designs/',\n designPathReplace: ['assets/designs/', 'https://path-to/assets/designs/'], // replace the default path to the new location\n});\n```\nIn this example, the default location is changed to https://path-to/assets/designs/\n\nWith this, you can place all the assets in a separate server or different host (e.g. from a CDN).\n\n## Snippets\n\nSnippets are predesigned blocks that you can add or drag & drop into your content. \n\nSnippet selection can be opened from the left sidebar.\n\n\n\nSnippet files are located in the folder:\n\nassets/minimalist-blocks/\n\nIt contains:\n- content.js (snippets JSON file)\n- content.css (snippets css file)\n- images (contains assets for the snippets)\n- preview (contains snippet thumbnails)\n\nYou can configure the snippets location by setting the **snippetUrl** and **snippetPath** parameters:\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n snippetUrl: 'assets/minimalist-blocks/content.js', // Snippet file\n snippetPath: 'assets/minimalist-blocks/', // Location of snippets' assets\n});\n```\n\nIn case of a different location, path adjustment may be needed. Here you can use the **snippetPathReplace** parameter.\n\nExample:\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n snippetUrl: 'https://path-to/assets/minimalist-blocks/content.js', // Snippet file\n snippetPath: 'https://path-to/assets/minimalist-blocks/', // Location of snippets' assets\n snippetPathReplace: ['assets/', 'https://path-to/assets/'], // replace the default path to the new location\n});\n```\n\nIn this example, the default location is changed to https://path-to/assets/minimalist-blocks/\n\nWith this, you can place all the snippet assets in a separate server or different host (e.g. from a CDN).\n\n## Typography Styles\n\nA selection of typography styles is provided for you to choose to format your page. The selection can be opened from the left sidebar.\n\n\n\nThe style can be used to format the entire page or just a specific section of your page. \n\nTo apply the typography style to a specific box area, open the Box Settings dialog, select the 'Text' tab and click 'Change Style'.\n\n\n\nThis will re-open the typography selection and your selection will be applied to the chosen box area only.\n\nTypography style files are located in the folder:\n\n**assets/styles/**\n\nIt contains all the css needed and its preview images. You can change its location using the **contentStylePath** parameter.\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n contentStylePath: 'assets/styles/',\n});\n```\n\n### Slider Feature\n\nThe new version includes predesigned slider templates (using Glide slider) that require some includes:\n\n```html\n\n\n\n```\nTo enable the slider:\n\n```javascript\nconst builder = new ContentBox({\n /*...*/\n slider: 'glide' // default: 'slick' (old version slider)\n});\n```\n\nValues:\n- '' (default) => not using slider\n- 'glide' \n- 'slick' => previous version slider (requires JQuery)\n\n## Language File\n\nWith the Language file, you can translate the ContentBox.js interface into another language.\n\nThe language file is located in:\n\n- contentbuilder/lang/en.js\n\nTo enable the language file, you need to add the file before including ContentBox.js:\n\n```javascript\n\n```\n\nHere is the language file content as seen on en.js:\n```javascript\nvar _txt = new Array();\n_txt['Bold'] = 'Bold';\n_txt['Italic'] = 'Italic';\n```\n\nYou can create your own language file by copying/modifying this file. \n\n## Adding Custom Buttons to the Sidebar\n\nTo add custom buttons to the sidebar, use the **addButton** method.\n\nHere is an example of adding the Undo & Redo button. For the undo and redo operation, we call the **undo()** and **redo()** methods.\n\n```javascript\nbuilder.addButton({ \n 'pos': 2, // button position\n 'title': 'Undo', // title\n 'html': '', // icon\n 'onClick': ()=>{\n builder.undo();\n }\n});\n\nbuilder.addButton({ \n 'pos': 3, // button position\n 'title': 'Redo', // title\n 'html': '', // icon\n 'onClick': ()=>{\n builder.redo();\n }\n});\n```\n\nThe **addButton** method has 4 parameters:\n\n- pos (position of the button)\n- title\n- html (to specify the icon for the button)\n- onClick\n\nHere is another example for adding a Preview button. If clicked, the button will open a separate page (**preview.html**) that we use to preview our edited page as in production.\n\n```javascript\nbuilder.addButton({ \n 'pos': 5, \n 'title': 'Preview', \n 'html': '', \n 'onClick': ()=>{\n\n var html = builder.html();\n localStorage.setItem('preview-html', html); \n var mainCss = builder.mainCss(); \n localStorage.setItem('preview-maincss', mainCss); \n var sectionCss = builder.sectionCss();\n localStorage.setItem('preview-sectioncss', sectionCss);\n\n window.open('/preview.html', '_blank').focus();\n }\n});\n```\n\nHere we get the content and its styles using the **html()**, **mainCss()**, and **sectionCss()** methods and save them into the browser's local storage. The content will then be used in the **preview.html** for viewing.\n\n## Embedding Box Cover (Background) Image\n\nIn the Box Settings, you can specify a box's cover or background image.\n\n\n\nHowever, to quickly upload an image without opening the Box Settings, you can click the box image button. This allows you to browse local images and select an image to upload as a box image cover (background).\n\n\n\n\n\nThere are 2 methods for uploading cover image:\n\n1. Form Method\n2. AJAX Post Method\n\n#### Form Method\n\nHere we use the **coverImageHandler** parameter to specify the upload handler for saving images on the server.\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n coverImageHandler: 'savecover.php',\n});\n```\n\nAs examples, you can use the provided handler:\n\n- savecover.php (for PHP)\n- savecover.ashx (for ASP.NET)\n\n\n#### AJAX Post Method\n\nHere we use the **onUploadCoverImage** parameter to specify a custom upload function.\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n onUploadCoverImage: (e) => {\n uploadFile(e, (response)=>{\n const uploadedImageUrl = response.url; // get saved image url\n builder.boxImage(uploadedImageUrl); // change cover image\n });\n },\n});\n\nfunction uploadFile(e, callback) {\n\n const selectedFile = e.target.files[0];\n\n const formData = new FormData();\n formData.append('file', selectedFile);\n fetch('/upload', {\n method: 'POST',\n body: formData,\n })\n .then(response=>response.json())\n .then(response=>{\n console.log(response)\n if(callback) callback(response);\n });\n}\n```\n\nThe example above uses the **boxImage(url)** method to apply the image url as a background cover.\n\nIn the example, the image is posted to an endpoint: **/upload**\nIf you’re using Node.js, you can implement the endpoint to save the image using:\n\n```javascript\nconst express = require('express');\nconst fs = require('fs');\nconst app = express();\nconst path = require('path');\nconst cors = require('cors');\nconst serveStatic = require('serve-static');\nconst formidable = require('formidable-serverless');\nconst sharp = require('sharp');\n\n//Specify url path\nvar $path = __dirname + '/public/uploads/'; // Physical path\nvar $urlpath = 'uploads/'; // URL path\n\napp.use(cors());\napp.use(express.urlencoded({\n extended: true\n}));\napp.use(express.json({ limit: '50mb' }));\napp.use(serveStatic(path.join(__dirname, '/public')));\n\napp.post('/upload', (req, res) => {\n\n const form = new formidable.IncomingForm();\n form.parse(req, async (err, fields, files) => {\n\n if (err) return res.status(500).json({ ok:true, status: 500, error: 'Something went wrong.' });\n\n let extension = path.extname(files.file.name).toLowerCase();\n if(extension !== '.jpeg' && extension !== '.jpg' && extension !== '.png' && extension !== '.gif' && extension !== '.webp' && extension !== '.webm' && extension !== '.mp4') {\n res.status(500).json({ ok:true, status: 500, error: 'File type not allowed.' });\n return;\n }\n \n const file = fs.readFileSync(files.file.path);\n\n let imageFile = file;\n if(extension === '.jpeg' || extension === '.jpg') {\n imageFile = await sharp(files.file.path).resize(1600, 1600, {\n fit: sharp.fit.inside,\n withoutEnlargement: true, \n })\n .jpeg({ quality: 80, progressive: true, force: false })\n .toBuffer();\n }\n\n fs.writeFile($path + files.file.name, imageFile, async (err)=>{\n if (err) {\n res.status(500).json({ ok:true, status: 500, error: 'Something went wrong.' });\n return \n } \n res.status(200).json({ ok:true, status: 200, url: $urlpath + files.file.name});\n });\n\n });\n \n});\n```\n\n## Programmatically Load the Content\n\nContent consists of HTML and its styles (e.g. typography styles/css includes). As explained previously, you get the edited content using the following methods:\n\n1) To get the HTML\n\n```javascript\nlet html = builder.html();\n```\n\n2) To get the styles\n\n```javascript\nlet mainCss = builder.mainCss(); // Returns the default typography style for the page.\nlet sectioncss = builder.sectioncss(); // Returns the typography styles for specific sections on the page\n```\nYou can save the HTML and its styles above into a database. And when you need to load the content back for editing, use the **loadHtml()** and **loadStyles** methods.\n\n```javascript\nbuilder.loadHtml(html);\nbuilder.loadStyles(mainCss, sectionCss);\n```\n\n## Undo & Redo\n\nYou can programmatically perform an undo or redo action.\n\nTo undo:\n\n```javascript\nbuilder.undo();\n```\n\nTo redo:\n\n```javascript\nbuilder.redo();\n```\n\n## Destroy\n\nTo destroy the ContentBox:\n\n```javascript\nbuilder.destroy();\n```\n\n## ContentBuilder.js Features\n\nContentBox.js uses ContentBuilder.js as its HTML editor. So most of the ContentBuilder.js options/parameters can be accessed through the ContentBox.js object.\n\nFor example, to specify a custom file browser (or Asset Manager):\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n imageSelect: 'assets.html',\n fileSelect: 'assets.html',\n videoSelect: 'assets.html',\n});\n```\n\nAnd to specify custom upload functions:\n\n```javascript\nconst builder = new ContentBox({\n wrapper: '.is-wrapper',\n\n onMediaUpload: (e)=>{\n ...\n },\n onVideoUpload: (e)=>{\n ...\n }, \n});\n``` \n\nMore configuration options can be found in the ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf\n\n\n## Credits\n\n#### Libraries\n\n- CodeMirror, Copyright (C) 2017 by Marijn Haverbeke and others (MIT license), https://github.com/codemirror/CodeMirror\n- Cropper.js, Copyright 2015-present Chen Fengyuan (MIT license), https://fengyuanchen.github.io/cropperjs/\n- Glide.js, Copyright (c) 2013-present Jędrzej Chałubek (MIT license), https://github.com/glidejs/glide\n- Ionicons, Copyright (c) 2015-present Ionic (http://ionic.io/) (MIT license), https://ionic.io/ionicons/v1\n- js-beautify, Copyright (c) 2007-2018 Einar Lielmanis, Liam Newman, and contributors (MIT license), https://github.com/beautify-web/js-beautify\n- Moveable, Copyright (c) 2019 Daybrush (MIT license), https://github.com/daybrush/moveable\n- Pace, Copyright (c) 2013 HubSpot, Inc. (MIT license), https://codebyzach.github.io/pace/\n- Slick, Copyright (c) 2017 Ken Wheeler (MIT license), https://github.com/kenwheeler/slick/\n- Sortable, Copyright (c) 2019 All contributors to Sortable (MIT license), https://github.com/SortableJS/Sortable\n- Tabler Icons, Copyright (c) 2020 Paweł Kuna (MIT license), https://github.com/tabler/tabler-icons\n\n","readmeFilename":"README.md"}