how to get maths signs

[alainib]

I'm using this plungin.
Now i need to add mathematicals buttons (like square, root, divide etc)
How can i do this ? thanks

[stevermeister]

by adding custom button,
please check the example - https://github.com/stevermeister/ngWig#add-custom-button-plugin-plunker

[alainib]

thanks for response. so if i want multiple customs buttons i add multiple .component('nwMyCustomButton' ... , .component('nwMyCustomButton2' ... etc .

For example i try this but don't update the displayed text :

 angular.module('ngWig').config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
   ngWigToolbarProvider.addCustomButton('my-custom', 'nw-my-custom-button');
 }])
 .component('nwMyCustomButton', {
     template: '<button class="nw-button my-custom" title="My Custom Button" ng-click="$ctrl.click()">My Custom Button</button>',
     controller: function($scope) {
         this.click = function(){
             var c = $scope["$parent"]["$ctrl"].content;
             c += "newSpecialChar";
             console.log(c); // log the text with the newSpecialChar at the end but displayed text don't udpate
         };
     }
   });

Any idea ? thanks

[bampakoa]

@alainib You should not access the content of the editor directly. Add the content attribute to the bindings of your plugin and you will be able to interact with it.

[alainib]

i don't get what you mean sorry. where/how to add the content attribute ? thks

i tryed in the template but don't do anything

template: '<button class="nw-button my-custom" content="µ" title="My Custom Button" ng-click="$ctrl.click()">My Custom Button</button>',

[bampakoa]

You can check clear-styles plugin. See how it defines content in its bindings:

 bindings: {
      editMode: '=',
      disabled: '=',
      content: '='
  },

and then accesses it by:

this.content = div.textContent;

[stevermeister]

@alainib hope it works for you

[alainib]

sorry for not responding. It work yes but maybe i can improve it.
when i click it add the special char but at the end of the text, with the building features it add them where the cursor is. Anyway to do it ?

my actual code :

angular.module('ngWig').config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
  ngWigToolbarProvider.addStandardButton('underline', 'Underline', 'underline', 'fa-underline');
  ngWigToolbarProvider.addCustomButton('my-custom', 'nw-my-custom-button');
  ngWigToolbarProvider.addCustomButton('my-custom2', 'nw-my-custom-button2');
}])
 
.component('nwMyCustomButton', {
   bindings: {
	  editMode: '=',
	  disabled: '=',
	  content: '='
	},
	template: '<button ng-click="$ctrl.click()" class="nw-button" title="racine carrée">racine carrée</button>',
	controller: function() {
		this.click = function(){
			console.log('racine Button');
			// create a virutal element to manipulate the content of the editor
			this.content += "√"
			
		};
	}
  })
.component('nwMyCustomButton2', {
   bindings: {
	  editMode: '=',
	  disabled: '=',
	  content: '='
	},
	template: '<button ng-click="$ctrl.click()" class="nw-button" title="puissance">puissance</button>',
	controller: function() {
		this.click = function(){
			console.log('puissance');
			// create a virutal element to manipulate the content of the editor
			this.content += "^"
			
		};
	}
  })

If i need to create many custom button is there a way to avoid creating a lot of component('nwMyCustomButton2', {}) ?

thanks for your create plugin and help ;)

[bampakoa]

@alainib I don't get what is the problem...When you set the content with this.content += "√"
it should add the symbol at the end of the text. Doesn't it?

Instead of creating multiple components, you could create one component that combines multiple button elements to accommodate for your case.

[alainib]

hello bampakoa. yes it add the special sign at the end of the text .
What i want to do is i can click somewhere on the text and then click on the button so it add the special char where i left the cursor not the at the end.
thanks for the advice for multiple button. i try it

[bampakoa]

I don't think this is feasible using content attribute. Maybe you should access the editor element directly and get the location of cursor explicitly.