Customizable Text / Snippet Box Component In JavaScript – TextBoxJS

Category: Javascript , Text | May 29, 2018
Author:EOussama
Views Total:151 views
Official Page:Go to website
Last Update:May 29, 2018
License:MIT

Preview:

Customizable Text / Snippet Box Component In JavaScript – TextBoxJS

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'));
});

You Might Be Interested In:


Leave a Reply