By default, the hyperlink is open in the same tab, which prevents too many tabs open in the browser leading to overtaxed computer memory, a reduction in battery life, and, for sure, a cluttered browser workspace. However, I believe that all external links should be open in a new tab, so the users won't leave your site accidentally.<figure class="image"><img src="https://images.unsplash.com/photo-1520970014086-2208d157c9e2?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@kellysikkema?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Kelly Sikkema</a></figcaption></figure>To do this in CKEditor 5 by using the Link plugin, we would need to make some configuration change.If you use CKEditor in an HTML code/template, you can update your create function like this:<pre><code class="language-javascript">ClassicEditor
 .create( document.querySelector( '#editor' ), {
 // ...
 link: {
 decorators: {
 addTargetToExternalLinks: {
 mode: 'automatic',
 callback: url =&gt; /^(https?:)?\/\//.test( url ),
 attributes: {
 target: '_blank',
 rel: 'noopener noreferrer'
 }
 }
 }
 }
 } )
 .then( ... )
 .catch( ... );</code></pre>If you use CKEditor with React, then update your component like this:<pre><code class="language-javascript">import React, { Component } from "react";
import PropTypes from "prop-types";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-dna";

class CKEditor5 extends Component {
 static get propTypes() {
 return {
 value: PropTypes.string,
 onChange: PropTypes.func,
 };
 }

 render() {
 return (
 &lt;CKEditor
 editor={ClassicEditor}
 data={this.props.value}
 config={{
 link: {
 decorators: {
 addTargetToExternalLinks: {
 mode: "automatic",
 callback: (url) =&gt; /^(https?:)?\/\//.test(url),
 attributes: {
 target: "_blank",
 rel: "noopener noreferrer",
 },
 },
 },
 },
 }}
 onChange={(event, editor) =&gt; {
 const data = editor.getData();
 this.props.onChange(data);
 //console.log({ event, editor, data });
 }}
 /&gt;
 );
 }
}

export default CKEditor5;
</code></pre>After this, link decorators are adding target="_blank" and rel="noopener noreferrer" attributes to all external links in the document, keep the internal links open in the same tab.<h3>Final Note&nbsp;</h3>In the React Component example, we use &nbsp;ClassicEditor from "ckeditor5-build-classic-dna", which includes code block &amp; insert image url plugins, you can install it from: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">https://www.npmjs.com/package/ckeditor5-build-classic-dna</a>Happy Editing :-)

How to set the external links to be open in the new tab by default, i.e., set target=_blank in CKEditor 5? This short note shows you how to set the configuration in CKEditor 5 on both in HTML code and React Component.

Open External Links in New Tab for CKEditor

CKEditor 5 does not ship with Code Blocks by default, but it could be added via custom build. The simplest way to use it is from <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>. However, it does not support Syntax Highlighting. The good thing is that it's fairly easy to add one via the front-end library.<blockquote>Although live code block highlighting&nbsp;is impossible when editing&nbsp;in CKEditor 5 (<a target="_blank" rel="noopener noreferrer" href="https://github.com/ckeditor/ckeditor5/issues/436#issuecomment-548399675">learn more</a>), the content can be highlighted when displayed in the frontend (e.g. in blog posts, messages, etc.).</blockquote>Here we will show you how to do this in React Component with prismjs.<figure class="image"><img src="https://user-images.githubusercontent.com/66892370/88102667-f164a480-cb6d-11ea-8d5e-b56e8294c1ce.png"></figure><h3>Step 1</h3>Install prismjs NPM.<pre><code class="language-plaintext">npm install -i prismjs</code></pre><h3>Step 2</h3>Import CSS, for NextJS, we can import it in _app.js, like<pre><code class="language-javascript">import "prismjs/themes/prism.css";</code></pre><h3>Step 3</h3>The CKEditor's Code Block plugin generates the standard code format, which works with prismjs without any change, the code snippet is like this:<pre><code class="language-html">&lt;pre&gt;
	&lt;code class="language-javascript"&gt;
		window.alert( 'Hello world!' )
	&lt;/code&gt;
&lt;/pre&gt;</code></pre>And we just need to call the prismjs' function highlightAll after the component is mounted: either in ComponentDidMount React Lifecycle or use useEffect, like below:<pre><code class="language-javascript">// github.com/deniapps/nextfeathers/blob/master/next/pages/blog/%5Bslug%5D.js
const Post = (props) =&gt; {
 //skip some code here ...
 useEffect(() =&gt; {
 Prism.highlightAll();
 }, [content]);

 return (
 &lt;Layout seoData={seoData}&gt;
 &lt;Container text&gt;
 &lt;Header as="h1"&gt;
 {title}
 &lt;Header.Subheader&gt;
 {author} | &lt;TimeAgo date={publishedOn} /&gt;
 &lt;/Header.Subheader&gt;
 &lt;/Header&gt;

 &lt;div dangerouslySetInnerHTML={{ __html: content }} /&gt;
 &lt;/Container&gt;
 &lt;/Layout&gt;
 );
};</code></pre><h3>Step 4</h3>No more, that's it!&nbsp;<h3>Final Note:</h3>In case, you don't like the default theme (prism.css), you can import different theme at step 2, here is the list of options:<a target="_blank" rel="noopener noreferrer" href="https://github.com/PrismJS/prism-themes/tree/master/themes">https://github.com/PrismJS/prism-themes/tree/master/themes</a>

CKEditor 5 does not ship with Code Blocks by default, but it could be added via custom build. The simplest way to use it is from ckeditor5-build-classic-dna. However, it does not support Syntax Highlighting. The good thing is that it's fairly easy to add one via the front-end library, like prismjs.

Syntax Highlighting with CKEditor's Code Block

In this article, we will learn how to customize CKEditor 5 Toolbar for React App. &nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1522832712787-3fbd36c9fe2d?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo By: <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@lox?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Lachlan Donald</a></figcaption></figure>In order to use CKEditor 5, we need two packages:<ol><li>@ckeditor/ckeditor5-react (core ckeditor5 react library)</li><li>one of ckeditor5 builds, for example: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5 build classic dna</a></li></ol>The example component:<pre><code class="language-javascript">import React, { Component } from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-dna";

class CKEditor5 extends Component {
 render() {
 return (
 &lt;CKEditor
 editor={ClassicEditor}
 data={this.props.value}
 onInit={(editor) =&gt; {
 console.log("Editor is ready to use!", editor);
 }}
 onChange={(event, editor) =&gt; {
 const data = editor.getData();
 this.props.onChange(data);
 //console.log({ event, editor, data });
 }}
 /&gt;
 );
 }
}
export default CKEditor5;</code></pre>Every CKEditor Build come with a default set of toolbar, as we use <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>, the &nbsp;default set of toolbar includes:<ul><li>"heading",</li><li>"bold",</li><li>"italic",</li><li>"link",</li><li>"bulletedList",</li><li>"numberedList",</li><li>"indent",</li><li>"outdent",</li><li>"insertImage",</li><li>“insertImageFromUnsplash”,</li><li>"code",</li><li>"codeBlock",</li><li>"blockQuote",</li><li>"insertTable",</li><li>"mediaEmbed",</li><li>"undo",</li><li>"redo"</li></ul>Depend on what we need, we could customize the toolbar, by using <code>config</code> attribute, like below:<pre><code class="language-javascript">&lt;CKEditor
 editor={ClassicEditor}
 data={this.props.value}
 config={{
 toolbar: [
 "heading",
 "|",
 "bold",
 "italic",
 "link",
 "bulletedList",
 "numberedList",
 "|",
 "indent",
 "outdent",
 "|",
 "codeBlock",
 "blockQuote",
 "insertTable",
 "mediaEmbed",
 "undo",
 "redo",
 ],
 ...</code></pre><code>“|”</code> &nbsp;is for group divider. And there is one more tool available in <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a> imageUpload, but in order to use it, we would need to implement a upload adapter to support it. I will have a separate tutorial to go over this.

CKEditor5 is fully customizable. Some of them could be done by CKEditor custom build, some of them could be done by custom plugins, and some of them could be simply done by config. In this article, we will learn how to customize CKEditor 5 Toolbar for React App.

Customize CKEditor5 Toolbar

CKEditor 5 is great! But if you are a fan of CKEditor 4, then you may not agree with me, because you cannot edit the source code to add whatever HTML code to the content you are editing in CKEditor 5. I like the way how CKEditor 5 works, and I agree that the Text Editor is for the end-user to compose a story, not to write HTML code. &nbsp;The code generated by the Editor needs to be as clean as possible.&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1581431886288-e216ea4ccf3f?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE1NDAxMH0"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@kellysikkema?utm_source=DNX&amp;utm_medium=referral">Kelly Sikkema</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Problem</h3>But sometimes, we do want to have a bit more control over the content generated by CKEditor. For example, the Deni Apps website is using the Semantic-UI theme, which comes with a styled table. If I use CKEditor to generate the table. The source code is like this:<pre><code class="language-html">&lt;figure class="table"&gt;
	&lt;table&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td&gt;1&lt;/td&gt;
				&lt;td&gt;2&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/figure&gt;</code></pre>But the CSS style of the table in the Semantic-UI is like this:<pre><code class="language-css">.ui.table {
 width: 100%;
 background: #fff;
 margin: 1em 0;
 border: 1px solid rgba(34,36,38,.15);
 -webkit-box-shadow: none;
 box-shadow: none;
 border-radius: .28571429rem;
 text-align: left;
 color: rgba(0,0,0,.87);
 border-collapse: separate;
 border-spacing: 0
}</code></pre>So to make it works, we need to have CSS classes (i.e., <code>.ui .table</code>) applied to the &lt;table&gt; element, not to &lt;figure&gt;. &nbsp;But we cannot edit the HTML source code, how to do it? The good thing is that CKEditor allows us to add converters to upcast and downcast dispatchers. The sounds hard. Yes, it's. &nbsp;So I created a plugin to make this work a lot easier for people who need this feature. &nbsp;And the plugin is integrated into the <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a> - a CKEditor build for the developer's blog.<h3>Solution</h3>Install &nbsp;<a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a><pre><code class="language-javascript">npm install ckeditor5-build-classic-dn</code></pre>Pass custom CSS class names as Array &nbsp;to CKEditor<pre><code class="language-javascript">import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-dna";

class CKEditor5 extends Component {
 render() {
 return (
 &lt;CKEditor
 editor={ClassicEditor}
 data={this.props.value}
 config={{
 table: {
 customClass: ["ui", "table", "celled"], // Important!!! need to be array
 },
 image: {
 	customClass: ["ui", "fluid", "image"], // Use whatever class names defined in your theme
 }
 //... other configs
 }}
 /&gt;
 );
 }
} </code></pre>As you see, the plugin works for both &lt;table&gt; and &lt;img&gt;, what you need to do is passing the class names. Again, it has to be an Array even you have only one class name.After that, &nbsp;the CKEditor will generate the HTML code like this:<pre><code class="language-html">&lt;figure class="table"&gt;
	&lt;table class="ui table celled"&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td&gt;1&lt;/td&gt;
				&lt;td&gt;2&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/figure&gt;</code></pre>That's it. Check out the <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ckeditor">CKEditor demo page</a> for more usage.

Different from CKEditor 4, you cannot edit the source code to add whatever HTML code to the content you are editing in CKEditor 5. But sometimes, we do want to have a bit more control over the content generated by CKEditor. Good news, we have "ckeditor5-build-classic-dna" came with a plugin to allow us to add custom CSS classes to <table> and <img>.

How to Add Custom CSS Classes to <table> or <img> in CKEditor

It has been a while since I last updated my first ever NPM package: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>. It's created on the top of official <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic">ckeditor5-build-classic&nbsp;</a> &nbsp;with a lot of useful features, like<ul><li>Allow to add image from unsplash&nbsp;</li><li>Allow to add custom css to &lt;table&gt; and &lt;img&gt;&nbsp;</li><li>Allow to add code block, and assign id attribute to &lt;code&gt; tag</li><li>…</li></ul><figure class="image"><img src="https://images.unsplash.com/photo-1542435503-956c469947f6?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw3NHx8Y29tcHV0ZXJ8ZW58MHx8fHwxNjMzMjc0Njcz&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@jessbaileydesigns?utm_source=DNX&amp;utm_medium=referral">Jess Bailey</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>Since the office CKEditor5 has been updated to version 30.0.0, I think it's good to keep <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a> up to date.After bump those @ckeditor/ckeditor5-* packages to 30.0.0, I found out that the signature feature of <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>, adding image from unsplash is broken. Because the previous version of @ckeditor/ckeditor5-* packages is 27.0.0, which means it's a major update, it's likely some breaking changes in the 30.0.0. &nbsp;But I don't see any information on<a target="_blank" rel="noopener noreferrer" href="https://github.com/ckeditor/ckeditor5/releases/tag/v30.0.0"> the release page</a> applied to my case.There is no error shown on the Chrome inspector, but I did see a warning message about toolbarview-item-unavailable, like this:<blockquote>react_devtools_backend.js:4049 toolbarview-item-unavailable</blockquote>I fixed it by commented out an unavailable toolbar setting for image:<pre><code class="language-javascript" id="Jqh10Z-ZI">// Editor configuration.
ClassicEditor.defaultConfig = {
 toolbar: {
 items: [
 "heading",
	....
 ],
 },
 image: {
 toolbar: [
 // "imageStyle:full", //react_devtools_backend.js:4049 toolbarview-item-unavailable since v30.0.0
 "imageStyle:side",
 "|",
 "imageTextAlternative",
 ],
 },
 table: {
 contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
 },
 // This value must be kept in sync with the language defined in webpack.config.js.
 language: "en",
};</code></pre>But adding image from Unsplash still failed. After some research, I found the answer, it's due to the breaking change of creating image element. We could the following code to create a imageElement:<pre><code class="language-javascript" id="UmUjU6pkg">editor.model.change((writer) =&gt; {
	const imageElement = writer.createElement("image", {
		src: photo.urls.regular,
 });
 ....
});</code></pre>Apparently, in the version 30.0.0, &nbsp;we have to use “imageBlock” instead of “image”, like this:<pre><code class="language-javascript" id="UmUjU6pkg">editor.model.change((writer) =&gt; {
	const imageElement = writer.createElement("imageBlock", {
		src: photo.urls.regular,
 });
 ....
});</code></pre>A small change fixed the issue. If you are looking for the way to integrate Unplash/Code Block into the CKEditor, check it out at <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>, and the <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ckeditor">demo page</a>.

It has been a while since I last updated my first ever NPM package: ckeditor5-build-classic-dna. Since the office CKEditor5 has been updated to version 30.0.0, I think it's good to keep ckeditor5-build-classic-dna up to date.

All Posts In Ckeditor