Angular Rich Text Editor using Simditor

Angular Rich Text Editor using Simditor

Angular Rich Text Editor using Simditor – In this post we will give you code and demo for Angular Rich Text Editor using Simditor. Hear we give you code and demo of Rich Text Editor. It will help you to understand this code.

angular rich text editor using simditor

The BaseModal has a default, generic modal style provided that can be extended to display modals with other style sheets, such as Bootstrap.

The Angular2 Simple Modal Dialog Windows is combine with text input. Angularjs Date Range Picker will use the current value of the input to initialize, and update the input if new dates are chosen.

ussage/code example

  • install using npm packages = npm install md-date-range-picker
  • install using bower = bower install md-date-range-picker

Demo for Angular Material Date Range

View DemoGit Code

How to Install Angular Material Date Range:

bower install ng.simditor --save

How ot Use Angular Rich Text Editor using Simditor ::

include stylesheet and js

<!-- include stylesheet for simditor -->
<link rel="stylesheet" href="bower_components/simditor/styles/simditor.css" />

<!-- include js for module -->
<script src="bower_components/simple-module/lib/module.js"></script>
<!-- include js for hotkeys -->
<script src="bower_components/simple-hotkeys/lib/hotkeys.js"></script>
<!-- include js for simditor -->
<script src="bower_components/simditor/lib/simditor.js"></script>
<!-- include js for angular -->
<script src="bower_components/angular/angular.min.js"></script>
<!-- include js for simditor -->
<script src="bower_components/ng.simditor/dist/js/ng-simditor.js"></script>
<!-- connect model "content" -->
<simditor ng-model="content" config="simditorConfig"></simditor>
// add controle  "ngSimditorExample"
.module('ngSimditorExample')
// add controller  "mainCtrl"
.controller('mainCtrl', function ($scope) {
// assign scope
$scope.simditorConfig = {
// assign placeholder
placeholder: "I'm placeholder",
// assign default-Image
defaultImage: 'preload.png',
params: {},
tabIndent: true,
// assign toolbar value
toolbar: [
'title',
'strikethrough',
'bold',
'alignment'
'code',
'link',
'alignment'
'outdent',
'italic',
'underline',
'ol',
'code',
'fontScale',
'color',
'link',
'ul',
'blockquote',
'code',
'table',
'link',
'image',
'hr',
'indent',
'outdent',
],
// assign Float value
toolbarFloat: true,
// assign Float Offset
toolbarFloatOffset: 0,
// assign Hiddent - false
toolbarHidden: false,
pasteImage: false,
cleanPaste: false,
// assign upload - false
upload: false
};
});

Leave a Comment

Your email address will not be published. Required fields are marked *

29  +    =  33

We accept paid advance and paid guest Posting on our Site : Contact US