tylergarlick/angular-redactor

Redactor WYSIWYG directives for redactor editor

angular-redactor's Issues

Redactor callbacks with current scope.

How can I use Redactor callbacks while also having access to the current scope?

For example, if I want to change something on Keydown I should supply a keydownCallback as an option like in the provided example:

    redactorOptions.keydownCallback = function triggerKeydown(e){
        console.log("key down!");
    }

But if I want to update something related to the current scope how can I go about that whilst still using the redactorOptions method for supplying callbacks.

E.g. how would I do this?

    redactorOptions.keydownCallback = function triggerKeydown(e){
        scope.doSomething(e); // throws an error because scope is not available
    }

Thoughts?

Air option doesn't work

I added options="{ air: true }" to the page but it still shows the standard bar.

How creat multiple Toolbars

if use

<div id="toolbar-panel"></div>
<div ng-repeat="item in items">
  <textarea ng-model="items" redactor>{{item.content}}</textarea>
</div>

and setting:

toolbarExternal: '#toolbar-panel'

toolbar worked only in last editor textarea =\

Plugins

Hi Tyler,
First I'd like to thank you for your contribution as this is the best editor I've seen. I just purchased Redactor v10.0.6 and installed your latest version with angular 1.3.5. After working with this the past 2 days, I think the following might help others getting started with some of the advanced features.

1. I've got all my libs loaded (download plugins)
   'bower_components/redactor/redactor.js',
   'bower_components/redactor/table.js',
   'bower_components/redactor/fullscreen.js',
   'bower_components/redactor/video.js',
   'bower_components/redactor/clips.js',
   'bower_components/redactor/imagemanager.js',
   'bower_components/angular-redactor/angular-redactor.js',
2. added to app.js angular.module('sailng', [... ,'angular-redactor']...
3. added to to app.js
   .config(function(redactorOptions) {
   redactorOptions.imageUpload = '/upload';
   redactorOptions.focus = true;
   redactorOptions.enterKey = true;
   redactorOptions.linebreaks = true;
   redactorOptions.pastePlainText = false;
   redactorOptions.buttonSource = true;
   redactorOptions.imageResizable = true;
   redactorOptions.imageEditable = true;
   redactorOptions.imageLink = true;
   redactorOptions.visual = true;// flase for html mode

    redactorOptions.plugins = ['table','fullscreen','video','imagemanager'];
    redactorOptions.buttons =   ['html', 'formatting', 'bold', 'italic', 'deleted',
        'unorderedlist', 'orderedlist', 'outdent', 'indent',
         'image',     'video', 'file','table', 'link', 'alignment', 'horizontalrule','fullscreen','clips']
})

While the upload feature is a bit ticky and requires a good read of documnetation, everything works as expected except
The enterKey does not execute crlf when in a table.
Thanks,
John

Imagemanager loaded but not showing the icon in the editor, no errors in console either

<textarea
        ng-model="content"
        redactor="{plugins: ['fontcolor', 'fontsize', 'fullscreen', 'imagemanager', 'table', 'video']}">
</textarea>

Content not being displayed in editor

Hi I just installed the module. I've loaded the redactor libraries and added the directive tag but the content isn't being displayed inside the editor.

I'm using Angular v1.2.1 and Redactor v8.2.2.

Removing the redactor tag and a normal textarea is displayed with the content.

<textarea ng-model="content" class="form-control" name="content" redactor required></textarea>

Minor bug - console errors

I'm using angular-redcator 1.1.5 and redactor 10.2.5
Issue started when we switched to buble & browserify

Seems like it happens after we leave a page with redactor, and redactor can't be found anymore

TypeError: Cannot read property 'code' of undefined
at HTMLTextAreaElement.eval (eval at (redactor.min.js:12), :1:424)

Send CSRF Token

I wanted to add to request body my csrf token. Is there any option or callaback for that task?

Pass Clips Snippets

Hi, guys

I try to pass snippets to clips module, but i don't know what it's the correct way, thanks Guys

$scope.redactorOptions.plugins = ['clips'];

XSS Vulnerability Discovered

Description:
The stored XSS can be triggered once you editing content by using Redactor 3 in HTML Mode.

POC:

1. I pen-tested the official showcase website of Redactor 3: https://imperavi.com/redactor/, it has a demo editor in its front page.

Then, click the icon to use HTML content mode:

2.
inject XSS payload

3. XSS discovered!
   

Appended elements not removed from the DOM when changing application states

I'm unsure where/why this error is happening and it may be unrelated to angular-redactor but I'm not sure where else to start.

When I'm in an application state that has redactor in the view and I navigate away from that state to a different part of the app, the redactor-toolbar-tooltip remains in the DOM. It's got a style attribute of 'display: none;' so it doesn't actually remain visible, but it persists nonetheless.

If I go back to that state with redactor in the view (or to any state with redactor for that matter) it sticks another set of redactor-toolbar-tooltips into the DOM.

So if the app isn't refreshed for sometime, there could a huge number of these tooltips still stuck in the DOM.

Here's an example:

Any idea why this might be happening?

Supporting for RightToLeft Languages

Is there any way to support right to left languages such as Persian and Arabic?

Error: No such method "code.set" for Redactor

Using Redactor version 10.2.3 along with Browserify and Gulp to include my front-end assets.

The error is coming from like 65, but goes away if you set

element.redactor('code.set', ngModel.$viewValue || '');

to

element.redactor('set', ngModel.$viewValue || '');

However, this then causes a new "Error: No such method "placeholder.toggle" for Redactor" error.

editing text isn't updating ng-model

Hello, I'm trying out your project for the first time tonight. I can set the content of the redactor widget using $scope.content = "replace this content"; However, when editing the text in the control and logging it out, it isn't updating the model.

The html:

<textarea ng-model="content" redactor cols="45" rows="12"></textarea>
<button type="button"
     class="btn btn-mini  btn-success"
     ng-click="saveComment(event)">Save
</button>

js snippet:

$scope.content = "<b> replace this text </b>";

$scope.saveComment = function (event){
            console.log($scope.content);
}

Any tips? It all looks refreshingly simple, but it is 11:30 at night and I could be doing something bone headed. Thanks

Hi, The library??

although the question it's obviously, The library Redactor, it's no free, we need pay this library to use this directive ?? Thanks

Copy/Paste does not work as expected with option pastePlainText = true

If the option pastePlainText set to true, the redactor does not convert inserted text to plain text.

using angular-redactor with clickToEdit in div

Hi,

Everything is working great after using the config method (in app.js). The only thing I ma not able to get working is the clickToEdit: true on a div.
I will investigate and try to figere it out, but in case somebody already got it working it would be great to give me a hint.

this.block.setAttribute is not a function

I'm using redactor with text direction plugin.

When trying to mark a block as RTL or LTR, I'm getting: "Uncaught TypeError: this.block.setAttribute is not a function"
Any idea why and how to resolve it?

Thanks in advance!
Yaron

Object has no method 'redactor'

Redactor defines it's main function on $.fn.redactor. On the following line, element is a plain object from angular:

editor = element.redactor(options);

Writing the line like this fixes the problem:

editor = $(element).redactor(options);

Is this not expected?

Tabkey and Focus does not work

Hi there!

First of all thanks a lot for your directive!

I have included this in my web app and use it with the following options:

  $scope.redactorOptions = {
        toolbarExternal: '#page-editor-toolbar',
        focus: true,
        linebreaks: true,
        tabKey: true,
        plugins: [ 'fontfamily', 'fontsize', 'fontcolor', 'table'],
        blurCallback: function (e) {
          $scope.pageSave();
        }
      };

But focus and tabkey settings won't work. Linebreaks, external toolbar and blur Callback works fine.

Do you have an idea?

Regards
Carstem

Plugins not showing anymore

Hi there,

My team switched to V2 and some of the plugins are not working anylonger.

I used to have things like Fullscreen, but now the button does not even show in the toolbar! I load all my plugins, then I have the redactor options in my ctrl as follows:

$scope.redactorOptions = {
plugins: ['table', 'fullscreen', 'video', 'imagemanager', 'clips', 'fontsize', 'fontfamily', 'fontcolor', 'definedlinks'],
buttons: ['html', 'formatting', 'bold', 'italic', 'deleted', 'unorderedlist', 'orderedlist', 'outdent', 'indent', 'image', 'video', 'file', 'table', 'link', 'alignment', 'horizontalrule', 'fullscreen', 'clips'],
imageUpload: '/upload',
definedLinks: dummyLinks,
focus: true,
enterKey: true,
linebreaks: true,
buttonSource: true,
imageResizable: true,
imageEditable: true,
imageLink: true,
visual: true, // false for html mode
blurCallback: function(e) {
$scope.$apply(function() {
$sce.trustAsHtml($scope.campaign.descriptions[$scope.currentLanguageIndex].Value);
$scope.showRichTextEditor = false;
});
}
};

However, only Bold, italic, strikeout, outdent, indent, image, link and Line are showing up. :(

Anyone can give me some tips?

Do you guys have changing to Redactor 2 ? Can't make it work in latest version. Ng-model isn't updated

for information, i just find that the text-area is updated with the text entered in the editor div but until i click on it, the model is'nt updated. I dont get it now, so i'm still using redactor 10.
But i think this is a problem of watching the right scope.

Error when trying to use plugins

Hi,

I'm trying to load the fullscreen plugin and I'm getting this error:

"ReferenceError: RedactorPlugins is not defined"

This is my code to initialize Redactor:

// Combined modules
angular.module('mean', modules).config(function(redactorOptions) {

//
// Redactor WYSIWYG editor
//

redactorOptions.focus = true;
redactorOptions.lang = 'es';
redactorOptions.plugins = ['fullscreen'];

});

Where do i suppose to define RedactorPlugins? Or at least, what should i modify to make Redactor to accept plugins?

Thanks in advance!

Content isn't loaded in the editor

We have reports by some users that sometimes content isn't loaded in the editor. It happens less than 0,1% of the times, our users have used the editor around 200.000 times without problems but we have around 40 reports of content not being loaded. It's more likely to happen with users with slow connections or that use many photos in their content.

We use the Redactor 9 version and we are not updating to Redactor 10 for this reason.

We have tryed to solve this by gaining more control over the load process so we switched to RequireJS but it didn't solve it.

Analyzing the code we have detected a theorical point in failure in line 29 but we are unable to verify it in the practice.

We modified line 29 this way:

if (scope.redactorLoaded)
ngModel.$setViewValue(value);

Using ng-click or ng-change on a clip

Hello everyone,

I have a list of clips like so:

['Recipient First Name', '<span class="badge" ng-change="test()"><fieldset class="clip" ng-click="test()">abcd</fieldset></span> '],
and I would like to know how can I make the ng-change (or ng-click) work with clips?

Destroy editor when scope is destroyed

Currently the editor is not destroyed when the directive scope is destroyed. This is a problem for us as when switching between editors in our application, redactor just get's re-inited/rendered each time it is selected. Fix:

        scope.$on('$destroy', function () {
          if (angular.isDefined(editor)) {
            $_element.redactor('core.destroy');
          }
        });

Windows 8 table issue/ Win7/8 enter key issue

I wrote imperavi with the below issue and indicated that they really don't support angular. What do you think. I sometimes program on a windows 8 computer with Webstorm 9.0 using nodejs as backend and my preferred stack based on repo (https://github.com/SharePointOscar/MEANS). Not sure what to do.
John

email to Imperavi,
First, thanks for a great product. I've quickly integrated as solution with an AngularJS CMS I wrote. I'm using TylerGarlick's angular-redactor directive with great success and currently have a few issues I haven't resolved.
Tested on windows 8.1 and windows 7 with latest Chrome Version 39.0.2171.99 m

1. When pressing enter in the textbox or table cell
   the markup shows
   <span class="redactor-invisible-space">

2. If I press shift+enter the markup shows
   <br>

3. Only on windows 8.1 with latest Chrome Version 39.0.2171.99 m
   Tables dont display and a 2 by 2 table insert in markup shows
   <br>
   <br>
   <br>
   <br>

Font operations issue in Chrome browser

Implementing Custom Buttons

Hey. Thanks for working on this. Not so much an issue but I'm wondering the best way to add buttons to the toolbar via the directive so that I can still access the custom image manager, document selector, etc... that we have already built in Angular.

Thanks again,
Matt

Create Release Please

Could you please create a release and also specify the specific version for your different dependencies? At the moment it's playing havoc with deploying to Heroku because I have to keep upping my AngularJS version numbers in my bower file :).

Model binding not working

Hi,

I'm using angular-redactor with the latest available version of redactor on bower (v8.2.2)
Is binding supposed to work for this version? When I debug into the angular-redactor directive, I see that

$_element.redactor('set', ngModel.$viewValue || '');

is called (and $viewValue contains my string "test")

but the value isn't updated in the redactor component.

Is this directive only compatible with redactor 9.x ?

Thanks

toggle toolbar

Is it possible to toggle the toolbar that it would be displayed only on focus? I was able to hide the toolbar by setting the toolbar : false

undefined is not a function

Hi

I'm getting an error on a new install, from what I can tell I have everything installed ok. Do you know what would cause this?

Here is the error

TypeError: undefined is not a function
    at http://dev.rvwd.com/js/angular-redactor.js:36:32
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:113:78
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:33:287)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js:37:1 

It seems to be this line

$timeout(function () {
        editor = $_element.redactor(options);
        ngModel.$render();
      });

textarea auto focused and insert first image not work

Hi, I find some weird thing about this directive plugin, don't have this issue if I directly use redactor

I am use redactor on a textarea within a modal, when model show up, that textarea is focused, I mean the cursor is blink, if start input, everything is find, but if I click one time and then input, the inputed text will go to next line, click multi time have so such issue

another issue is the first image inserted into not show up, I am feeling this two issue are related, how can I not make this textarea focused?

Form set to dirty when redactor is initialized

We're tracking the dirty state of the form. When redactor is initialized the $dirty flag is set to true. This should be reset after initialization.

Plugins

Hi - I am using your code and it's working (almost) perfectly.

I have a httpInterceptor that intercepts all ajax requests and adds the Authorization header.

When I use the image upload button in redactor, it doesn't get intercepted - is there a way for your plugin to alter those requests to use angular's $http rather than the standard xhr?

Hide textarea until Redactor is loaded.

We have an issue were the vanilla textarea is displayed for a short moment then Redactor flickers in.

This is problematic

Having this breaks everything, so I had to remove it

(function() {
    'use strict';

    /**
     * usage: <textarea ng-model="content" redactor></textarea>
     *
     *    additional options:
     *      redactor: hash (pass in a redactor options hash)
     *
     */

Tag for bower

Please create tag for version 1.1.1.
Currently bower install gets version 1.0.0.

Initial load does not allow images to be selected

When I refresh a page with existing content, including images, I am not able to click an image to select it in redactor. I have to switch to html view and back to fix this behavior.

delete me

oops

Bower tag with latest version

Can you please create a bower tag for the latest version with the constant?

Error: No such method "set" for Redactor

I found the error in this code :

ngModel.$render = function () {
            if (angular.isDefined(editor)) {
              $timeout(function() {
                $_element.redactor('set', ngModel.$viewValue || '');
              });
            }
          };

for now i've corrected it with this :

ngModel.$render = function () {
            if (angular.isDefined(editor)) {
              $timeout(function() {
                $_element.redactor('insert.set', ngModel.$viewValue || '');
              });
            }
          };

hope can be useful to someone

Redactor3 - angular-redactor-3.js

wasn't quite sure how to add this in, but i just added my own file angular-redactor-3.js
so for folks looking here's the updated code to make it work with Redactor 3

(function() {
    'use strict';

    /**
     * usage: <textarea ng-model="content" redactor></textarea>
     *
     *    additional options:
     *      redactor: hash (pass in a redactor options hash)
     *
     */

    var redactorOptions = {};

    angular.module('angular-redactor', [])
        .constant('redactorOptions', redactorOptions)
        .directive('redactor', ['$timeout', function($timeout) {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, element, attrs, ngModel) {

                    // Expose scope var with loaded state of Redactor
                    scope.redactorLoaded = false;

                    var updateModel = function updateModel(value) {
                            // $timeout to avoid $digest collision
                            $timeout(function() {
                                scope.$apply(function() {
                                    ngModel.$setViewValue(value);
                                });
                            });
                        },
                        options = {
                            callbacks: {
                                changed: updateModel
                            }
                        },
                        additionalOptions = attrs.redactor ?
                            scope.$eval(attrs.redactor) : {},
                        editor;

                    angular.extend(options, redactorOptions, additionalOptions);

                    // put in timeout to avoid $digest collision.  call render()
                    // to set the initial value.
                    $timeout(function() {
			editor = $R(element[0], options);
                        ngModel.$render();
                    });

                    ngModel.$render = function() {
                        if(angular.isDefined(editor)) {
                            $timeout(function() {
				$R(element[0], 'source.setCode', ngModel.$viewValue || '');
                                scope.redactorLoaded = true;
                            });
                        }
                    };
                }
            };
        }]);
})();

API method Toolbar set to false don't show the content of the ng-model

When setting the "{toolbar: false}" in the redactor directive in a textarea resultin a unexpected behaviour of not showing the the content of the ng-model.
Using the for example redactor= "{air :true}" in the textarea is functioning like expected and showing the data of the ng-model. And the air toolbar will show after the normal double click.

Any idea's

Publish to npm

Would be nice to also support installing this package via npm.

If you would prefer to not actually publish, having a package.json file that points to the appropriate main script would suffice.

I would have gladly submitted a PR for the change, but I didn't want to generate the package.json file as there are fields such as author, license, etc that are probably more appropriate for you to handle.

redactor.js not included as a bower dependency

Is there any reason?

Problem with Just Attribute

I could not get it to work as just an attribute. I think the timeout was not working correctly and it wasn't ready. I had to do this in my controller:

        angular.element(document).ready(function () {
            $('.wysiwyg').redactor();
        });

How to hook into callbacks like init, upload, start etc?

ngModel's value is not updating in html mode in Redactor II

I'm experiencing an issue with Redactor II and angular-redactor directive.

While using Source plugin (HTML mode), the ngModel value is not getting updated. It works fine with normal editor mode.

I've hosted the example at - http://redactor-2-demo.herokuapp.com

Here is the recording of the bug - http://recordit.co/9Tfc2AMBZ8

Note: It was working fine with Redactor I and angular-redactor plugin.

Is this a known bug or any setting required to make it work? Thanks.