CODEWITHSUNDEEP
angularjs
Neekoy
Neekoy

Reputation: 2533

TextAngular cannot change buttons in toolbar

I'm looking at the following page:

https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar

It says that to change the TextAngular toolbar options you need to do the following:

<text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics']]"></text-angular>

I thought that my environment is being strange, so I set up a Plunker, however over there it does the same:

http://plnkr.co/edit/VcLGzFRm9AGF4AC6S7Co?p=preview

Index.html Row 23 - This works properly.

Index.html Row 26 - This doesn't work even though the above documentation suggests it should.

Can someone please help me with this - how can I choose which options the toolbar will have? :/

Upvotes: 0

Views: 1331

Answers (1)

developer033
developer033

Reputation: 24864

It's working, you just need to remove that $interpolateProvider:

var app = angular.module('adminApp', ['textAngular'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

becomes just this:

var app = angular.module('adminApp', ['textAngular']);

Then you can use:

<text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics']]"></text-angular>

A snippet working:

var app = angular.module('adminApp', ['textAngular']);
<html ng-app="adminApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-rangy.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-sanitize.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular.min.js'></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.1/textAngular.css">
</head>

<body>
  <text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics']]"></text-angular>
</body>

</html>

Upvotes: 1

Related Questions