thijsw / angular-medium-editor Goto Github PK

Example: <input type="text" medium-editor my-custom-directive>
This does not seems to work, probably because the widget creates another element.

My use case is to automatically adjust the input height based on the content (like the facebook editor).

#coffeescript
.directive 'myCustomDirective', ->
    ($scope, elem, attrs) ->
       console.log "this is logged"

       elem.bind "keydown", (event) ->
           console.log "this will never be logged"

Hello there, please take a look at this code:

<div medium-editor options="{forcePlainText: false, buttons: ['italic', 'bold', 'underline', 'anchor', 'unorderedlist', 'quote']}"></div>

This will allow to paste html code into the container, as documented. However, checking through the medium-editor 4.4.0 docs, we should have more settings available like for example

paste: {
        // This example includes the default options for paste, if nothing is passed this is what it used
        forcePlainText: true,
        cleanPastedHtml: false,
        cleanReplacements: [],
        cleanAttrs: ['class', 'style', 'dir']
        cleanTags: ['meta']
    }

see here for reference.

If i try to enable the paste setting using

<div medium-editor options="{paste: {forcePlainText: false}, buttons: ['italic', 'bold', 'underline', 'anchor', 'unorderedlist', 'quote']}"></div>

the forcePlainText setting will be ignored. I didn't went through your code yet, but it seems like you have remapped the options yourself, so we can't use the whole available set. Am i wrong?

Can I customize my editor, to add functionality described below:

Not able to use angular-medium-editor library in Angular 5

Packages installed are mentioned Below
"angular-medium-editor": "^4.0.0-alpha",
"angular/core": "^5.2.0",
"typescript": "~2.5.3"

During "ng serve" command I get the following error

ERROR in ./node_modules/angular-medium-editor/medium-editor.directive.ts
Module build failed: Error: /Users/K2A/GIT/traveldiary/webapp/node_modules/angular-medium-editor/medium-editor.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (/Users/K2A/GIT/traveldiary/webapp/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:656:23)
at plugin.done.then (/Users/K2A/GIT/traveldiary/webapp/node_modules/@ngtools/webpack/src/loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ ./src/app/pages/pages.module.ts 18:32-88
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Kindly let me know is there is anything that I can do to fix this issue and use the library

Is there any way to integrate this wrapper with the orthes/medium-editor-insert-plugin?

I followed their instructions for installation and inclusion, but it looks like because I'm using this wrapper to initialize the editor its not working properly. Any experience or ideas?

In my controller I am resetting all fields in the ng-model to undefined but the placeholders are not getting replaced and the form then looks blank.

TypeError: Object [object Object] has no method 'on'
at link (http://localhost:63342/mandrill/components/angular-medium-editor/dist/angular-medium-editor.js:13:16)

first example mentioned here doesn't work in the latest version.

Angular medium editor version - 1.1.0

Plunker Example Demo

The directive seems to clear the element completely.

Unlike other packages, where the form

import 'angular-medium-editor';

is sufficient to make MediumEditor available, this package requires the specific non-intuitive import form:

import 'angular-medium-editor/dist/angular-medium-editor';

That's because in package.json there's no key such as:

  "main": "dist/angular-medium-editor.js",

(this is done in many other packages)

• found on a Meteor (1.3) project

The original Medium editor provides the following list in built-in buttons available to use with the toolbar and editor: https://github.com/yabwe/medium-editor#all-buttons

However, only some of these seem to work with this directive. E.g. when appending 'orderedlist' and 'justifyCenter' to the array of buttons, the ordered list button appears and works fine but not for justify center, any idea why this is or if all the buttons are available?

Hi there,

I am trying to figure out how it would be possible to add text at the caret/cursor position. I creative a directive that would allow me to insert a text (which would be a user variable) into the text area section. However, when I added the medium-editor directive I can't access the elementId and inject the text (see the image to see the ux flow.

Do you know how I could potentially work around this?

Thanks!

Hello, I'd done some digging and apparently this was a known issue in the medium-editor library, there's been a bunch of issues but I'm still getting the error even in a very simple implementation: https://plnkr.co/edit/eMJlqjUE9bezS9e6ytrc?p=preview

It works perfectly in Chrome etc, but FX is unhappy. Any input / clues would be greatly appreciated!

I want to use only the medium editor. how can I use unless ng-model?

Hi thijsw, may i know is it possible to make multiple editors in a same page ? i have tried it but it has some bugs when copy and paste content, the content will get multiply

Hi...@mbrevoort @thijsw

This commit:

962d2e5

From this pull request:

#5

Changed updating the model from watching just on('blur') to both on('blur') and on('input').

This has quite dramatically affected typing speed. (On on angular 1.2.24, Chrome 39.0.2171.42.)

I see the point of the change. But it does slow typing down a lot (i.e. there is a noticeable second or two pause after each key stroke).

(My usecase requires a a user to click a button after typing, so onBlur covers me.)

Feel free to close this issue if you'd like to keep onInput with the sluggishness.

Here is the issue I confront, the editor works well. But when I hit the 'send' button, the content of the textarea will be automatically converted to words wrapped with HTML tags. Like when I write 'Hello world' and hit 'send', the content would be '< p >Hello world< / p >' before it is actually sent. Is there any possible solution?

This is an awesome plugin. However, since everyone is slowly moving on to Angular 2 would be great if there are any plans for Angular 2.

Mimic the behaviour (ng-required, ng-minlength, ng-maxlength, ng-pattern, ng-change, ng-trim) of Angular's native input directives as much as possible.

See also form controller.

This came up at #30

Please, using this package via Bower would be way easier. :-)

https://github.com/thijsw/angular-medium-editor/releases

Hey there
I've seen medium-editor supported version is 4.4.0, which dates on april 2015.
Since then, medium-editor upgraded branch 4 up to 4.12 and branch 5 up to 5.10

Should we consider angular-medium-editor fully supported still?

KeyboardEvent.key value "Up" is obsolete and will be renamed to "ArrowUp". For more help https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.key

Same for "Right" (=>"ArrowRight"), "Esc" (=>"Escape") and so on.

Medium editor don't destroy toolbar when i left page.

To repoduce - create many medium editors on page, more than 25 in my case.

It's a weird behaviour. It must be in someplace inside this library, medium-insert-plugin or medium-editor itself.

See it running: http://codepen.io/Mr-K/pen/vGbaMy

As you can see, we have multiple instances of medium-editor working which each contains an initial value. The content is binded, and it seems ready to edit.

So far so good.
BUT when you click at it, the content is replaced by nothing. It's missing. Gone, completely.
You can see it in the codepen above.

State changes are keeping the toolbars on page, this is causing to the bottom of the page being active, but empty.

[GIF] Bug below

As no clear informations about any license could be found in the project repository, I would like to know which legal terms are applicable to your plugin ?

Please see http://www.gnu.org/licenses/license-list.en.html#NoLicense for a summary of the problems that no license would lead to.

hi all, i'm a new member in angular-medium. This directive has any event when i click outsite ?
now i $watch when model has changed. but i don't want to use it!
thanks!

Is it just me or does this repo appear dead?

Cannot find this package in npm registry. http://npmsearch.com/?q=angular-medium-editor

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 404:52 in the original .ts file), resolving symbol Directive in /home/nmartin/Projects/classconnect/classconnect-web/node_modules/angular-medium-editor/node_modules/@angular/core/core.d.ts, resolving symbol MediumEditorDirective in /home/nmartin/Projects/classconnect/classconnect-web/node_modules/angular-medium-editor/medium-editor.directive.ts, resolving symbol MediumEditorDirective in /home/nmartin/Projects/classconnect/classconnect-web/node_modules/angular-medium-editor/medium-editor.directive.ts

This is common across a lot of libraries right now, and supposedly it's because your d.ts doesn't export the'proper' metadata for angular to do AOT compilation, which is default now.

Ref: angular/angular-cli#3707 and https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

Hi. I am road-testing angular-medium-editor to see whether I can use (and extend) it to deliver an online editing capability for users to add custom angular directives to their content.

Using the highlighter example, I can see how I can add custom HTML tags, attributes and classes - so I think I'm half-way there!

But is it possible for the contents of the medium-editor (and the custom directives inserted within it) to be compiled when they're changed?

I have tried editing angular-medium-editor.js to compile the contents as part of the ngModel.$render function:

    ngModel.$render = function() {
      iElement.html(ngModel.$viewValue || "");
      $compile(iElement.contents())(scope);
      var placeholder = ngModel.editor.getExtensionByName('placeholder');
      if (placeholder) {
        placeholder.updatePlaceholder(iElement[0]);
      }
    };

This works for custom directives that are already in the medium-editor's HTML model, but does not get re-compiled when the model changes (i.e. directives are added). Any ideas?

Currently if the model is set to null || undefined ng-change and watch are triggered on initialization.

Most probably has to do with the following line of code:
ngModel.editor.setContent(ngModel.$viewValue || "");

When I attempt to change the ngModel programmatically within a controller, it seems to only bind one way so after I submit a form and try to set the ngModel to an empty string it is not reflected in the view.

Is there something I am missing or is this a general issue?

I made an extension to change the direction of text.
As you can see it in this [ example ],
In pure medium-editor version, when you change the direction ("RTL" button), content of text changes immediately (Please use "Change" button to apply it to textarea).
But when you are using angular version (angular-medium-editor), changing direction don't change content of text until you made another change in text.

I've noticed this difference in the code processor. Take these cases:

1.a) I copy a paragraph from a web page using Firefox
1.b) I paste that paragraph to a medium-editor in Firefox
The result will be a paragraph without the wrapping <p>

2.a) I copy a paragraph from a web page using Firefox
2.b) I paste that paragraph to a medium-editor in Chrome
The result will be a paragraph properly wrapped in <p> tags.

Assuming the latter is the designed behaviour, i would say this is a bug.

When complling the element and then binding it to scope in Jasmine test for testing my directive, for example something like this: $compile(angular.element('

Hi. I can't get this working with debounce. In Angular it's a standar, so if I write this:
ng-model="tab.content" ng-model-options="{debounce: 500}"

It should work.
It didn't, & I found this:

ngModel.editor.subscribe('editableInput', function (event, editable) {
          ngModel.$setViewValue(editable.innerHTML.trim());
          var throttledAutoSave = MediumEditor.util.throttle(scope.save(), 2000); // 2 seconds
        });

Not working.
How I can get the debounce running to fire the function a few miliseconds after the last keystroke?

See the attached images

ng-change is apparently not supported in non-input elements so there is no way to hook in to updates to the editor so that data can be updated server-side. How is this achieved?

I have played with passing a call to the controller's method by adding an attr in to the directive to accept the function - something like medium-editor model-change="saveSection()". In the directive I then added:

ctrl.$viewChangeListeners.push(function() {
   scope.$eval(iAttrs.modelChange);
});

Whilst things fire as expected it doesn't work how I thought it would - the model updates too often and removes whatever has just been changed.

Any ideas?

this.options.ownerDocument.execCommand throws an NS_ERROR_FAILURE when wrapped in an angular wrapper whenexecActionInternal() is called for the ordered and unordered list buttons.

It causes some weird behavior that duplicates the medium editor element's parent node several times.

Example:
before:

<div class="parent">
<p medium-editor class="medium-editor">I am an editor and the p tag is my editor element</p>
<div>Some sibling element</div>
</div>

after:

<div class="parent">
<p medium-editor class="medium-editor">I am an editor and the p tag is my editor element</p>
</div>
<div class="parent">
<div>Some sibling element</div>
</div>

Anyone have any idea that is and if there is a solution. It works fine as long as it is not used with Angular.

This is only an issue in Firefox.

The main medium editor is now up to 3.0.9. Is this supported and if so can you bump the dependency version in the bower package?

Please check the conversation I had with the medium-editor team.

yabwe/medium-editor#922

Hello,

would be possible to do a release ? we found that latest npm version is not working as intended due to #72

thanks!

From YABWE/medium-editor...

"MediumEditor also supports textarea. If you provide a textarea element, the script will create a new div with contentEditable=true, hide the textarea and link the textarea value to the div HTML content."

...the new div HTML content is not linked to the textarea value (ngModel.$viewValue) when set with iElement.html(), ngModel.editor.setContent() should be used instead.

When I try to upgrade the underlying medium-editor to version 1.9; it gives this error message when the toolbar pops up:

Uncaught TypeError: Cannot read property 'querySelector' of undefined medium-editor.js:739