Bootstrap 5 Rich Text Editor with AngularJS

Bootstrap 5 Rich Text Editor with AngularJS
Code Snippet:AngularJS WYSIWYG Rich-text Editor
Author: oakhearted
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 11,958
License: MIT
Edit Code online: View on CodePen
Read More

The “textAngular.js” is a radically powerful WYSIWYG rich text editor for Angular.js. It creates multiple editor instances with two-way-bind HTML content. In this tutorial, you will come to know how to integrate this AngularJS rich text editor with Bootstrap 5.

textAngular JS renders a rich text editor with all possible commands, like text formatting, image upload feature (through URL), linking/unlinking, and listing feature. It uses Font Awesome CSS for iconic command buttons. Likewise, it supports shortcut keys to perform formatting on selected text. It also allows toggling between the visual text editor and code editor.

How to Create Rich Text Editor using Bootstrap 5 and AngularJs

1. Load the Bootstrap 5 CSS, Font Awesome CSS (for editor icons), and rich text editor CSS file into the head tag of your webpage.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<!-- Font Aweomse 4 CSS -->
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
      
<!-- Rich Text Editor CSS -->
<link rel="stylesheet" href="css/rich-text-editor.css">

2. Now, create the HTML structure for rich text editor as follows:

<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
  <h3>WYSIWYG Code Editor/Generator</h3>
  <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
  <h3>Output Code</h3>
  <textarea ng-model="htmlcontent" style="width: 100%"></textarea>
  <div ng-bind-html="htmlcontent"></div>
  <div class="d-none" ta-bind="text" ng-model="htmlcontent" ta-readonly='disabled'></div>
</div>

3. After that, load AngularJS, Sanitize JS, and textAngular Js by adding the following CDN links before the closing of the body tag.

<!-- Angular JS -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<!-- Angular Sanitize JS -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script>
<!-- Text Angular JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js'></script>

4. Finally, initialize the rich text editor by adding the following Angular function between the script tag.

<script>
 angular.module("textAngularTest", ['textAngular']);
	function wysiwygeditor($scope) {
		$scope.orightml = '';
		$scope.htmlcontent = $scope.orightml;
		$scope.disabled = false;
  };
</script>

That’s all! Hopefully, you have successfully integrated AngularJS rich text editor into your project. If you have any questions or suggestions, let me know by comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...