psergus / ngwysiwyg Goto Github PK

View Code? Open in Web Editor NEW

64.0 64.0 42.0 753 KB

true angular WYSIWYG

License: MIT License

JavaScript 90.18% CSS 6.56% HTML 3.26%

ngwysiwyg's People

Contributors

Stargazers

Watchers

ngwysiwyg's Issues

Format doesn't change anything

What does 'format' actually do? You can set a paragraph and headers but they don't actually seem to be doing anything.. I can't see any change in the wysiwyg itself or in the source. Explanation please? :)

extend ngWYSIWYG

how can i extend the directive so that the editor can show different buttons for different html views?

Disable resize?

Is there a way to disable the resize function? Other than hiding the element itself that is.

Feature Request: Resizable Image in editor

Right now the only option we have for resize image is by taking over the insertImage function and add style="width:xx%" into the html we are going to insert into the editor. But is there a way to do it more dynamically like with textAngular (http://textangular.com/) where they have some kind of directive or something that allow click on Image and then a small box show up contain the image and can be drag around to resize the image? An alternative I'm using right now is instead of using prompt I create a modal and let the user input the size they want in text, and it just isnt intuitive enough.

execCommand('insertHTML') dont work with IE

So I have another problem here, I try the whole thing in IE 11 and all the function/button that require execCommand('insertHTML',val) like insert image, symbol all stop working. How do I get around this?

Adding button to toolbar and error in demo?

Hi, I was wondering how can I add another button to the tools bar, is there any easy way to do that? I want to add an upload image button as well. I know that you can modified the insertImage function to do that, but I was wondering if we could add custom button for other purpose if we so desire.

Also I was trying out the configuration and image resize, and configuration dont work for me. Or to be more clear I got a syntax error (missing : after property id:) in this line:

$scope.editorConfig = {

Without editorConfig everything is fine. Did I do something wrong? I use Mean.IO as my framework.

Ng-model is not working on IE

I'm trying to edit the content on IE (Versions 11, 10, 9), but the ng-model variable is not being updated on 'Edit Model'. When I apply a html element wrapping it (like "

content

"), it works. On Chrome and Firefox, it works well .

How can I control the buttons on the toolbar?

Hi, this looks like a great component, but I was curious how I can limit some of the buttons on the toolbar. I'm not suppose to provided this many options to our user-base.

Thanks,

Jeff

Resize is not working properly

When you drag the resize down, it immediately jumps down to approximately twice the size of the editor before you started the resize, then you can resize it as usual. Is this really something no one has come across?

How to upload the image from the local machine instead of the external URL.

How i need to upload an image from the local machine. If there is any functionality for that. If not can you please add and update the code.

How to disable text editor

I want to disable WYSIWYG text editor, Please help.

Any way to select text content on focus?

Hi,

I was wondering how I would set the behavior of the editor to select all of the text content in the editor when you focus by clicking on the text box? This way if there is a default message selected, the user can just type over it to create a new message.

For normal text boxes, it is possible to do this in angular by writing directive that gets the window, then selects the element on click.

Thanks!

Ng-model instead of content?

Would it be possible to to change from content to ng-model, because of native form validation?

clear text?

NPM release?

Is there a plan for releasing ngWYSIWYG on NPM?

Layout in BODY tag not good practice

This can cause global issues when compiling the CSS if using a CSS preprocessor such as SASS.

Font size is not getting converted into a px value, but rather the string of the choice

When you choose a font size and then look at the source it just says "font-size: x-large", which when you try and use it somewhere else other than the editor, is useless. Bugfix please? :)

TypeError: Cannot read property 'open' of null

Hi There!

when i use ngWYSIWYG normal is ok
but when i use ngDialog to open a page
the ngWYSIWYG is error

angular.js:9383 TypeError: Cannot read property 'open' of null at l (http://127.0.0.1:8080/xxx/lib/ngWYSIWYG/dist/wysiwyg.min.js:1:16351) at http://127.0.0.1:8080/xxx/lib/Angular/angular.js:6590:44 at nodeLinkFn (http://127.0.0.1:8080/xxx/lib/Angular/angular.js:6212:13) at compositeLinkFn (http://127.0.0.1:8080/xxx/lib/Angular/angular.js:5622:15) at nodeLinkFn (http://127.0.0.1:8080/xxx/lib/Angular/angular.js:6206:24) at compositeLinkFn (http://127.0.0.1:8080/xxx/lib/Angular/angular.js:5622:15) at compositeLinkFn (http://127.0.0.1:8080/xxx/lib/Angular/angular.js:5625:13) at publicLinkFn (http://127.0.0.1:8080/xxx/lib/Angular/angular.js:5527:30) at s (http://127.0.0.1:8080/xxx/lib/ngWYSIWYG/dist/wysiwyg.min.js:1:13143) at http://127.0.0.1:8080/xxx/lib/Angular/angular.js:6590:44 <iframe style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%;" ng-hide="editMode" ngp-content-frame="{sanitize: config.sanitize}" content-style="" ng-model="content" class="ng-isolate-scope ng-pristine ng-valid">

my ngDialog is simple
`var dialog = ngDialog.open({
template: xxxxx',
className: 'xxxx',
showClose: false,
controller: ['$scope', function($scope) {

            }]
        });`

tests?

Are there tests for this component?

Cannot read property 'tagName' of undefined

Hi,
first of all, I really appreciate for this module.

I found bug(maybe..).

insert image
click image
then, resizer is displayed
remove image by 'back space'
the resizer still remains
then 'TypeError: Cannot read property 'tagName' of undefined' error occurred

I founding solution, but if you already have, fix it please.

regards,
kang

Images do not show in Firefox

Toolbar images do not render in firefox. All toolbar buttons show the first image (<>). Works in chrome.

Is there any easy fix to this?

Add me as a collaborator

Hi there @psergus.

I'm wondering, would you mind adding me as a collaborator to this repo? I'm using it a lot and I think I can contribute even further if I had access to it. This is how you add me, in case you approve my request.

Thanks and best regards.

redactor should not add events listeners to ALL iframes on a page

Source code indentation

I have seen that there are some places that indentation is made with two empty spaces and other places they are made with tab. Would you mind if I fix all the source code to use tabs instead of two spaces?

I know that this is a personal choice and I have read a few articles about both of them, so to make it simple, tabs are more flexible. If you want it to look like two spaces, you just have to configure your IDE, if you want it to look bigger, the same applies.

And two spaces are, well, two spaces no matter what.

If you agree, @psergus, I will open a pull request to fix that.

Best regards,
Bruno Krebs

How to remove Header

Hi,

I am using 3 instances of text editor in a page.

On 1 instance, I want to remove header of text editor.

Please help.

background color doesn't work on IE 9

Hi,

the background color button doesn't work on IE 9 and is it possible for u to put it on bower?

Tags switch from <p> to <div> when cleaning the content

If you copy/paste couple lines of text (multiline text makes the issue more evident) from eg Notepad to the editor if it has a "< p >< / p >" tag inside it will use proper tags to generate lines, bold, etc (you can see this in the source view). If you clean all contents (to be sure go to source view and delete everything) it will generate "< div >" tags to create new blocks instead of using "< p >".
By the way, the editor is awesome, excellent work!!

My Styles are not applying in text area.

I am saving the edited text and retrieving back the html.But the inline styles in span are disappearing and appearing as normal text. I need my saved styles back again.

Sometimes caret disappears on Chrome

This happens quite frequently and it is annoying but looks like it is really easy to solve.

How to reproduce

Open the demo page, remove all content, write something and then click somewhere else in the page. After that click on the editor again and the caret is not shown, even though it is possible to keep editing the content.

Possible solution

This answer on stackoverflow's thread give a hint on how to solve this. By adding the following style to the iframe's document:

html, body {
    height:100%;
}

everything works as expected.

'toolbar' of undefined

Hi Psergus

Very nice component, thanks!

I get an error at line 402 in wysiweg.js (scope.toolbar = scope.config.toolbar)
scope.config is undefined.
Maybe I am missing something small, but I would appreciate your help.
Thank you!!

Style selection doesn't reset after selecting

When you select a style (like Header 1), the selection doesn't reset.
This means that if you want to change multiple pieces of text to Header 1, you have to manually switch them between Paragraph and Header 1 to get the desired result.

/cc @EmilieRvT

multiple editor in one page

Hi, Thank for this module.

I add two editor in one page, and add image to first one, so click inserted image, then resizer is shown to another one.
I searched for the cause. I think [two "ngpContentFrame" directive use one "ngpImageResizer" service] is the cause.
Anyone Have A solution for this?

Thanks, kang

Bug with selecting color, background color and symbols

Those 3 button, which before show a table with options to choose from are now all bugged out and show something like this (this is with all 3 of them open at once):

And just to confirm, both using the wysiwyg.min.js or manually adding all js file for me result in this.

IE10 not loading wysiwyg view

I am getting a type error in IE10:


TypeError: Unable to get property 'addEventListener' of undefined or null reference
   at setup (http://10.0.2.2:3100/assets/js/vendor-body.js:53884:5383)
   at l (http://10.0.2.2:3100/assets/js/vendor-body.js:53884:16476)
   at Anonymous function (http://10.0.2.2:3100/assets/js/vendor-body.js:18667:34)
   at invokeLinkFn (http://10.0.2.2:3100/assets/js/vendor-body.js:18673:9)
   at nodeLinkFn (http://10.0.2.2:3100/assets/js/vendor-body.js:18167:11)
   at compositeLinkFn (http://10.0.2.2:3100/assets/js/vendor-body.js:17563:13)
   at nodeLinkFn (http://10.0.2.2:3100/assets/js/vendor-body.js:18162:24)
   at compositeLinkFn (http://10.0.2.2:3100/assets/js/vendor-body.js:17563:13)
   at compositeLinkFn (http://10.0.2.2:3100/assets/js/vendor-body.js:17566:13)

In chrome from the minified code

c.querySelector("body") === <body contenteditable="true"></body>

In IE:

c.querySelector("body") === undefined

My setup:

<wysiwyg-edit content="text" config="editorConfig"></wysiwyg-edit>

$scope.editorConfig = {
    sanitize: false,
    toolbar: [
        { name: 'basicStyling', items: ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', '-', 'leftAlign', 'centerAlign', 'rightAlign', 'blockJustify', '-'] },
        { name: 'paragraph', items: ['orderedList', 'unorderedList', 'outdent', 'indent', '-'] },
        { name: 'doers', items: ['removeFormatting', 'undo', 'redo', '-'] },
        { name: 'colors', items: ['fontColor', 'backgroundColor', '-'] },
        { name: 'links', items: ['image', 'link', 'unlink', '-'] },
        { name: 'styling', items: ['format'] }
    ]
};

There is a XSS in the process of model to view.

There is a XSS in the process of model to view.

Simple example：

<img src=x onerror=alert(/xss/) >

.

Now, I have fixed the bug, and push it to my github. In that repertory, I have improved the ui of tinyEditor, and Chinesizated it.

If you can, I want to be a branch of your ngWYSIWYG.

My github: ngTinyEditor

When integrated in minified source code, there's an injection dependency error message.

Hi, just want to report there's a bug on your ngWYSIWYG code.

Related file: js/wysiwyg.js

line 61: $provide.decorator("$sanitize", function($delegate, $log) { ... }

I think you need to change it to:

            $provide.decorator("$sanitize", ['$delegate', '$log', function($delegate, $log) {
                return function(text, target) {
                    var result = $delegate(text, target);
                    //$log.info("$sanitize input: " + text);
                    //$log.info("$sanitize output: " + result);
                    return result;
                };
            }]);

Caught the dependency error, by attaching ng-strict-di:

<html ng-app="yourApp" ng-strict-di>
...
</html

Uncaught Error: [$injector:strictdi] function($delegate, $log) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.4.8/$injector/strictdi?p0=function(%24delegate%2C%20%24log)

So if I need to include jQuery for other reasons, what to do?

ng-grid still requires jQuery, and I wanted to use this on a page with ng-grid. Suggestions on how to protect against the jQuery in source execution issue?

Browserify, AMD, Webpack module loaders?

Currently this module loaders are not supported.
Is this on the roadmap or can I create a pull request?

How to change image width automatically?

I konw Chome can't change image size in design mode.
But, we can check all images' width, if any image's width > textarea's width, then set image's width to 100%.

This strategy is not perfect, but will be fine in most cases. With this, most people won't even try to modify image size in html source anymore.

The buttons do not work when multiple WYSIWYG controls are on the same page.

When having just one WYSIWYG on the page, selecting styles, fonts, etc all work. As soon as I have more than one, they do not. Is anyone else having this problem?

Thanks,

Scott Hellewell

Is it possible to modify the plugin to generate different HTML tags for styling?

Hi, I don't really have an issue per say, but more of a question.

I noticed that the generated HTML with the text editor uses the <span style=""> tag when you edit text. I was wondering if there is a way to generate using some of the older tags instead, for example, when bolding, underline or italicizing text, use the older <b>, <i>, <u> tags, and for font color changes, generate the <font color=""> instead of using the span tag. I am using a parser in a different project that supports the older tags and but doesn't support span tags, and it would not be possible to rewrite the parser to support the span tags.

From what I have seen so far, I would have to use javascript's Document.execCommand() to do this somehow, but I haven't figured out where I would need to do this yet, and was hoping you could point me in the right direction.

    //Clear the inner html document of the iframe
    var iframe = document.getElementsByTagName("iframe")
    frameDoc = iframe[0].contentDocument || iframe[0].contentWindow.document;
    frameDoc.documentElement.innerHTML = '<head></head><body contenteditable="true"></body>';

Many thanks!
Antonio

I'd love to see your editor have, as an option, the css from Material Design, https://material.angularjs.org/latest/#/. The typography at https://material.angularjs.org/latest/#/CSS/typography is just great, and having an editor like yours to use it would be a dream come true for my project.

I expect others would benefit from this addition to your great text editor.

Thank you.

How do you change the editor size?

How do you change the height/width of the edit window?

How to enable the font family dropdown

Maybe a dumb question, but if i use your example i don't get the second row of the bar i can see in the demo.

I also checked the demo code and i don't see any relevant differences.

Can you point me out to what i could be missing?

Thanks for your work!

psergus / ngwysiwyg Goto Github PK

ngwysiwyg's People

Contributors

Stargazers

Watchers

Forkers

ngwysiwyg's Issues

Recommend Projects

Recommend Topics

Recommend Org