Customizable Text / Snippet Box Component In JavaScript – TextBoxJS

Preview:

Description:

A JavaScript component used to wrap your text and/or code snippets into a customizable text box with ‘Copy To Clipboard‘ support. Similar to the Syntax Highlighter.

How to use it:

Just import the TextBoxJS into your file and we’re ready to go.

<script src="scripts/textbox.js"></script>

Use the TextBoxJS as a component. Available attributes:

• _id: unique ID
• language: text for programming/scripting language
• title: title of text box
• width: width in pixels
• max_height: max height in pixels

<textboxjs 
  _id="testing" 
  language="plain text" 
  title="Greetings" 
  width="700px" 
  max_height="150px">
  Text Or Code Snippets Here
</textboxjs>

window.addEventListener('load', () => { TextBox.Init(); });

Use the TextBoxJS as a plugin.

<div id="myBox"></div>

window.addEventListener('load', () => {
  TextBox.Init();

  const tb = new TextBox({
      _id: "testing",
      langauge: "plain text",
      title: "Greeting",
      text: "Hello, world!",
      width: "700px",
      max_height: "150px"
  });

  tb.Create(document.getElementById('myBox'));
});