textAngular
A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!
I would like to pass strings into textAngular so that $scope properties are compiled For example
$scope.text = "Hey {{person.name}}";
Then in the HTML I have
<div text-angular ng-model="text"></div>
Temporarily I put together a hack for my controller.
$scope.$watch(function(){return $scope.text;}, function(html) {
$scope.text = $interpolate($scope.text)($scope);
});
How do I turn this hack into a directive that plays nice with textAngular?
Source: (StackOverflow)
We have just upgraded our textangular to 1.2.2, as this now supports drag and drop.
have seen defaultFileDropHandler within the textAngualrSetup, how ever, struggling to find any documentation to support this or how to use it.
defaultFileDropHandler:
/* istanbul ignore next: untestable image processing */
function (file, insertAction)
{
debugger;
var reader = new FileReader();
if(file.type.substring(0, 5) === 'image'){
reader.onload = function() {
if(reader.result !== '') insertAction('insertImage', reader.result, true);
};
reader.readAsDataURL(file);
return true;
}
return false;
}
Basically, we want to allow users to drag multiple pdf's, word docs etc and to upload on submit.
We could prob get this working in a fashion adding in functionality into defaultFileDropHandler within the settings page,
we implement ta by :-
<div text-angular data-ng-model="NoteText" ></div>
however, is there a cleaner way to achieve this?
Source: (StackOverflow)
I cannot successfully load textAngular after the angularJS application has been manually boostrapped. I do not get any errors in the console, and I cannot see the markup either, the page is blank.
I am following these steps to have files similar to the files on this question
I cannot compile AngularJS directive loaded with RequireJS
I would like to ask for some guidance, hoping someone can identify what I am doing wrong, what I am missing in the set up in order to lazy load textAngular after the app has been bootstrapped.
Thank you for your help.
Here is the files and code I have so far:
app.config.js
require.config({
useStrict: false,
baseUrl: '/network/projects/card',
paths: {
jquery: [
'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min',
'assets/lib/jquery-2.1.1.min'
],
angular: [
'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min',
'assets/lib/angular.min'
],
ngRoute: [
'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min',
'assets/lib/angular-route.min'
],
'angular-text': 'assets/js/textAngular',
'angular-text-rangy': 'assets/js/textAngular-rangy.min',
'angular-text-sanitize': 'assets/js/textAngular-sanitize.min'
},
shim: {
jquery: {
deps: [],
init: function (jq) {
return jq.noConflict(true);
}
},
angular: {
exports: 'angular',
deps: ['jquery']
},
ngRoute: {
deps: ['angular']
},
'app/app.routes': {
deps: ['app/app.module']
},
'angular-text': { deps: ['angular']},
'angular-text-rangy': { deps: ['angular-text']},
'angular-text-sanitize': { deps: ['angular-text']}
}
});
require([
'angular-text',
'angular-text-rangy',
'angular-text-sanitize'
],
function(){
define(function (require) {
require(['jquery', 'angular', 'ngRoute'], function () {
require(['app/app.module', 'app/app.routes'],
function(app) {
app.init();
});
});
});
});
app.module.js
var app = angular.module('card', ['ngRoute', 'textAngular']);
define(function () {
'use strict';
app.init = function () {
require(['app/app.routes'], function () {
require(['app/shared/module/textangular/textangularController'],
function () {
angular.bootstrap(document, ['card']);
});
});
};
return app;
});
app.route.js
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/ControlPanel', {
templateUrl: 'app/components/controlpanel/',
controller: 'ControlPanelController',
resolve: {
ControlPanelController: function ($q) {
components =
['app/components/controlpanel/controlpanelController'];
return resolver($q, components);
}
}
});
$routeProvider.otherwise({
redirectTo: '/ControlPanel'
});
function resolver($q, components) {
var deferred = $q.defer();
require(components, function () {
deferred.resolve();
});
return deferred.promise;
};
}]);
controlpanelController.js
app.register.controller('ControlPanelController', ['$scope', 'factory',
function ($scope, factory) {
var connector = factory.schema.card.Generic;
factory.get.card(connector.View, connector.Filter).then(function(payload) {
$scope.card = {
label: angular.fromJson(payload.data)[0].CardName
};
});
}]);
textangularController.js
app.controller("TextAngularController", ['$scope', function ($scope) {
alert ('Hello. I am textAngular');
}]);
indexl.html for ControlPanel
<div ng-controller="ControlPanelController">
<div class="col-xs-12 col-sm-4">
<div class="panel-box">
<div class="col-xs-12">
<label class="title">Employee {{card.label}}s</label>
<div ng-controller="ModalController">
<ab-dropdown>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">
<a class="create_{{card.label}}" ng-click="configure.create(card.label)" role="option">New {{card.label}}</a>
</li>
</ul>
</ab-dropdown>
<div ab-modal data-link=".create_{{card.label}}" template="form" size="lg" title="Create New {{card.label}}" process="submit()">
<div ng-controller="CardController">
<table>
<tbody>
<tr emit-repeater-completion ng-repeat="row in rows">
<td>
<ab-input-group ng-class="{focused: row.raw.Attributes.indexOf('placeholder') > -1}">
<label id="lbl{{row.raw.ClientID}}" for="{{row.raw.ClientID}}">{{row.raw.ClientName}}</label>
<span ng-bind-html="row.html"></span>
</ab-input-group>
</td>
</tr>
<tr>
<td>
<div ng-controller="TextAngularController" class="container" >
<text-angular ng-model="htmlContent"></text-angular>
<div ta-bind ng-model="htmlContent"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Source: (StackOverflow)
Need help with TextAngular. I want to auto-focus when the page loads but can't seem to get it working. Here's my code:
<div text-angular ng-model="formData.solutionText"></div>
I tried adding this too but it doesn't seem to work. I tried with ngfocus too but i'm going wrong somewhere and it's not working!
ta-focussed-class="focussed"
Could anyone point me to the right direction on how to get this going?
Source: (StackOverflow)
I am working on Ionic Framework and wanted to know if there is any WYSIWYG text editor that can be embedded inside ionic app.
I have an option for text-angular but I haven't tried any of these.
Please be specific with your answer
Source: (StackOverflow)
I'm using latest version of textangular.
Everything is working fine and all the icons are showing properly, except for the 'break link' icon, which shows as an empty square.
When i inspect the element i can see that the appropriate classes are applied: fa fa-unlink icon-unlink
Any idea what can cause that?
Source: (StackOverflow)
Problem : I am using textAngular editor in my AngularJS project. I have added custom button in toolbar using taRegisterTool. How to call function defined in controller on click of this button
Code:
angular.module('minovateApp')
.controller('MainCtrl', function ($scope, $http, $rootScope, $timeout, $filter, $window, $location, $modal, trafficCop) {
var modalInstance;
$scope.openPopup = function (tempUrl, popupController, params) {
modalInstance = $modal.open({
templateUrl: tempUrl,
controller: popupController,
size: 'lg',
resolve: {
items: function () {
return params;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
// $log.info('Modal dismissed at: ' + new Date());
});
};
})
.config(function($provide){
// this demonstrates how to register a new tool and add it to the default toolbar
console.log($provide);
$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){ // $delegate is the taOptions we are decorating
taRegisterTool('mergeCode', {
buttontext: 'Merge Code',
action: function(){
$provide.openPopup('views/tmpl/user/widgets/popup_widgets.html', 'WidgetsController');
}
});
taOptions.toolbar[1].push('mergeCode');
return taOptions;
}]);
});
Source: (StackOverflow)
I'm working on an angular app that uses textAngular, which depends on rangy-core and rangy-selectionsaverestore. I'm having the following errors with the latest IE:
Module 'WrappedSelection' failed to load: Unspecified error.
Error: Unspecified error.
at Anonymous function (js/plugins/textAngular/rangy-core.js:2970:29)
at Anonymous function (js/plugins/textAngular/rangy-core.js:2923:14)
at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
at init (js/plugins/textAngular/rangy-core.js:294:17)
at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)
Module 'SaveRestore' failed to load: Unable to get property 'isDirectionBackward' of undefined or null reference
TypeError: Unable to get property 'isDirectionBackward' of undefined or null reference
at Anonymous function (js/plugins/textAngular/rangy-selectionsaverestore.js:30:9)
at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
at init (js/plugins/textAngular/rangy-core.js:294:17)
at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)
This error seems to happen during rangy initialization.
What is odd about this is that the TextAngular demo works fine on Internet Explorer. One different between the demo and my application is that I'm using the unminified rangy library. Finally, these errors do not happen on Chrome or Firefox.
Although the app loads (I think the errors above are just warnings in the console), when I click into the textAngular field, I see the following error:
Object doesn't support property or method 'getSelection'
File: textAngular.js, Line: 693, Column: 4
I can't find anything in the textAngular or rangy github that addresses these problems. Has anybody encountered these issues before?
If it helps, I can post the link to our application.
Thanks!
Source: (StackOverflow)
I am using text editor of textAngular,
Place holder not hide if type some text in text-Angular text Editor and version is textAngular 1.4.1
Html is as follows:
enter code here
<text-angular placeholder="Placeholder" class="col-sm-12 col-md-12 col-lg-12" ng-model="Campaign.RecipientsNumber" name="RecipientsNumbers"
ta-text-editor-class="border-around container" ta-html-editor-class="border-around" ta-toolbar="[]"
ng-blur="isNumbersValidTextEditor(Campaign.RecipientsNumber);getRecipientsCountTextEditor(Campaign.RecipientsNumber);" ng-required ="Campaign.Group == null" only-numbers-and-comma ></text-angular>
Source: (StackOverflow)
I'm using Textangular for my site, and it works great. There's one annoying issue and I'm not sure how to fix it. When it converts my text into html, it adds inline css for color and background-color which I don't want. Here's an example line of HTML produced by Textangular:
<p style="color: rgb(54, 54, 54);background-color: rgb(255, 255, 255);"><strong><b>What's Included</b></strong></p>
The <p>...</p> and <strong><b>..</b></strong> tags are appropriate (I wanted a separate paragraph and bold text, respectively), but I don't want the
style="color: rgb(54, 54, 54);background-color: rgb(255, 255, 255);" which is being placed automatically inside the <p> tag. My website doesn't always use white backgrounds and sometimes the text is a different color.
Why is it adding those styles, and how do I remove it?
Source: (StackOverflow)
My objective is to have a WYSIWYG html editor cum preview with active AngularJS directives in it. I have been trying to achieve this with textAngular and $compile.
I found this stackoverflow question where its mentioned how can html can be compiled and added to DOM dynamically. However I have been trying to achieve this in this plunk without any success. The issue is that i cannot use two angularjs directives in one element.
How can I achieve my objective then ? Is there any other editor available which supports this out of the box ?
Update
So I did some more digging and figured that I $compile adds one more instance of textAngular at compilation and textAngular wont allow that. Now I am trying to achieve my objective like this
- Find
textAreaElement inside textAngular html where actual html resides.
$compile html content inside it and hence add that to DOM
here is updated plunk.
Still I can't see any html inside text area. It seems that something is overwriting my changes inside textAngular. Any suggestions ?
Source: (StackOverflow)
I have implemented a custom button that allows a user to add a table to the editor, which works fine. However, I can't seem to get the onElementSelect to fire when clicking in the newly added table. The goal is that when a user clicks on a table, a popover will displayed that will allow the user to edit the number of columns/rows. For now, I'm just triggering an alert.
taRegisterTool('insertTable', {
iconclass: 'fa fa-table',
tooltiptext: 'Insert table',
onElementSelect: {
element: 'td',
action: function(event, $element, editorScope){
alert('table clicked!');
// once we get here, I will add the necessary code to implement the table editor
},
action: function($deferred){...
...
});
taOptions.toolbar[1].push('insertTable');
I have tried setting the element to td, tr, tbody, and table, but none of those work. If I set it to a or img, clicking on one of those elements in the editor fires the alert.
I've added custom toolbar buttons for inserting links and images and those work fine using this method.
Does textAngular not allow selection of the table elements?
Plunkr of where I'm stuck: http://plnkr.co/edit/tm1dMv?p=preview
Source: (StackOverflow)
I think my problem lies with the drop down button in "display." In Chrome, the drop down works as expected - i.e. shows a list of option names in the ng-repeat list. However, in Firefox, clicking the drop down disables the text-angular menu, as if the user has clicked outside the text angular editor (at which point text angular disables the editor options). Nothing drops down either.
The + line breaks all work fine too in Chrome. We just try to keep the code readable for those who don't use huge screens. For those unfamiliar with text-angular: All the relevant code is in display - it's just some html that defines a dropdown, and I think that's where the issue lies. How can I get this to work in FireFox?
taRegisterTool('itemFields', {
display: '<span class="btn-group" dropdown style="padding: 0px 0px 0px 0px">' +
'<button class="btn btn-default dropdown-toggle" dropdown-toggle type="button" ng-disabled="showHtml()">' +
' <span>Item Fields</span>' +
'</button>' +
'<ul class="dropdown-menu">' +
' <li ng-repeat="o in options">' +
' <a ng-click="action(o)">{{o.name}}</a>' +
' </li>' +
'</ul>' +
'</span>',
options: ReportItemFields,
action: function (option) {
if( angular.isDefined(option) && angular.isUndefined(option.promise))
{
this.$editor().wrapSelection('insertHTML', option.text);
}
}
});
Source: (StackOverflow)
Using the textAngular plugin, I'm unable to apply to the DOM a newly set variable. I'm implementing a angular bootstrap UI modal, and I can see the variable is set correctly so the issue appears to be with editorScope.updateTaBindtaTextElement().
Here is my code in the onElementSelect block:
reLinkButton.on('click', function(event){
event.preventDefault();
var modalInstance = $modal.open({
templateUrl : '/templates/dialog/linkMaker.html',
controller : 'linkMakerDlgCtrl',
resolve : {
// variables here ...
}
}
});
modalInstance.result.then(function (link) {
$element.attr('href', 'http://' + link.ref); // <== a console.log of this returns the correct value
editorScope.updateTaBindtaTextElement(); // <== new value not applied to DOM
}, function () { $log.debug('Modal dismissed'); });
editorScope.hidePopover();
});
As a note, this follows a previous question with a similar issue on the action block and where the solution was to add a promise and return false. I tried that but it didn't resolve my problem.
Source: (StackOverflow)