Categories
JavaScript Answers

How to Make TinyMCE Paste in Plain Text by Default with JavaScript?

Sometimes, we want to make TinyMCE paste in plain text by default with JavaScript.

In this article, we’ll look at how to make TinyMCE paste in plain text by default with JavaScript.

Make TinyMCE Paste in Plain Text by Default with JavaScript

To make TinyMCE paste in plain text by default, we can set the paste_as_text option to true .

For example, we can write the following HTML:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<textarea id="mytextarea">Hello, World!</textarea>

to add the TinyMCE script and a text area for the TinyMCE editor.

Then we can convert the text area to a TinyMCE editor with the following JavaScript code:

tinymce.init({
  selector: '#mytextarea',
  plugins: "paste",
  paste_as_text: true
});

We call the tinymce.init method with an object that has the selector , plugins , and paste_as_text properties.

selector is the selector of the text area to convert to a TinyMCE editor.

plugins is set to 'paste' to add the paste plugin to let us control pasting text.

And we set paste_as_text to true to make TinyMCE paste text as plain text.

Conclusion

To make TinyMCE paste in plain text by default, we can set the paste_as_text option to true .

Categories
JavaScript Answers

How to Get the Last Item in a JavaScript Object?

Sometimes, we want to get the last item in a JavaScript object.

In this article, we’ll look at how to get the last item in a JavaScript object.

Get the Last Item in a JavaScript Object

To get the last item in a JavaScript object, we can use the Object.entries method to get the key-value pair arrays of an object in an array.

Therefore, we can use it to get the last item of the JavaScript object.

For instance, we can write:

const obj = {
  'a': 'apple',
  'b': 'banana',
  'c': 'carrot'
}
const entries = Object.entries(obj)
const [last] = entries.slice(-1)
console.log(last)

We have the obj object that we want to get the last property from.

Next, we call Object.entries with obj to get an array of key-value pair arrays of obj .

Then we call slice with -1 to return an array with the last entry of entries .

And we destructure that and assign it to last .

Therefore, last is:

["c", "carrot"]

Conclusion

To get the last item in a JavaScript object, we can use the Object.entries method to get the key-value pair arrays of an object in an array.

Therefore, we can use it to get the last item of the JavaScript object.

Categories
JavaScript Answers

How to Search for the Immediate Children of an Element Returned by querySelector with JavaScript?

Sometimes, we want to search for the immediate children of an element returned by querySelector with JavaScript.

In this article, we’ll look at how to search for the immediate children of an element returned by querySelector with JavaScript.

Search for the Immediate Children of an Element Returned by querySelector with JavaScript

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

For instance, if we have the following HTML:

<div>  
  <p>  
    hello world  
  </p>  
</div>

Then we can get the p element given the div by writing:

const getChild = (elem) => {  
  return elem.querySelectorAll(':scope > p');  
};  
const div = document.querySelector('div')  
console.log(getChild(div))

We define the getChild function that calls elem.querySelectorAll to get all the p elements that are the immediate child of the given elem .

Then we get the div with querySelector and assign it to div .

And then we call getChild with div to get the p element in the div in a Nodelist.

Conclusion

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

Categories
React Answers

How to Generate a PDF File from React Components with JavaScript?

Sometimes, we want to generate a PDF file from React components with JavaScript.

In this article, we’ll look at how to generate a PDF file from React components with JavaScript.

Generate a PDF File from React Components

To generate a PDF file from React components, we can use the js-pdf and react-dom/server libraries.

To install js-pdf , we run:

npm i js-pdf

react-dom/server comes with projects created by Create React App by default.

To use it, we write:

import React from "react";
import ReactDOMServer from "react-dom/server";
import jsPDF from "jspdf";
const doc = new jsPDF();
const Foo = <b>foo</b>;

export default function App() {
  const save = () => {
    doc.html(ReactDOMServer.renderToStaticMarkup(Foo), {
      callback: () => {
        doc.save("myDocument.pdf");
      }
    });
  };

  return (
    <div>
      <button onClick={save}>save</button>
    </div>
  );
}

We create a new instance of the jsPDF constructor and assign it to doc .

Then we have the Foo JSX expression which renders some bold text.

Next, in App , we create the save function that calls the doc.html method with the HTML string created by renderToStaticMarkup method.

And then we set the callback property to a function that calls docs.save with the file name to save the rendered HTML version of Foo as a PDF.

Conclusion

To generate a PDF file from React components, we can use the js-pdf and react-dom/server libraries.

Categories
JavaScript Answers

How to Fix the ‘nodemon command is not recognized in terminal for node js server’ Error with JavaScript?

Sometimes, when we want to run nodemon, we may get the ‘nodemon command is not recognized in terminal for node js server’ error with JavaScript.

In this article, we’ll look at how to fix ‘nodemon command is not recognized in terminal for node js server’ error with JavaScript.

Fix the ‘nodemon command is not recognized in terminal for node js server’ Error with JavaScript

To fix the ‘nodemon command is not recognized in terminal for node js server’ error, we can install nodemon locally or install it locally and add a script into package.json to run the local version.

To install it locally, we can run:

npm install -g nodemon

with NPM or:

yarn global add nodemon

with Yarn.

And to add a local version, we run:

npm install nodemon

with NPM or:

yarn add nodemon

with Yarn.

Then we add:

"serve": "nodemon server.js"

into the 'scripts' second of package.json .

And then we run:

npm run serve

With Yarn, adding to the 'scripts' section is optional, and we can just run:

yarn run nodemon server.js

If we did add the script to package.json , we run:

yarn run serve

Conclusion

To fix the ‘nodemon command is not recognized in terminal for node js server’ error, we can install nodemon locally or install it locally and add a script into package.json to run the local version.