stevermeister / ngwig Goto Github PK
View Code? Open in Web Editor NEWsimple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig
Home Page: http://stevermeister.github.io/ngWig/
License: MIT License
simple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig
Home Page: http://stevermeister.github.io/ngWig/
License: MIT License
Currently, pasting using a custom function calls this line
var pasteContent = (event.originalEvent || event).clipboardData.getData('text/plain');
This tries to get the plain text of the line. But if we want the HTML content, we must perform our own actions on the event object. The paste functionality could be enhanced to (optionally) try to get HTML first, then plain text second.
var contentToProcess = (event.originalEvent || event).clipboardData.getData('text/html');
if (!contentToProcess) {
contentToProcess = (event.originalEvent || event).clipboardData.getData('text/plain');
}
Though, you will run into issues on IE due it it only accepting Text
as a parameter of getData. Will need to consider this article to try and get pasting HTML to work on IE https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
Hi,
I was just thinking for adding a button to clear formatting of a selected piece of text. What's your opinion?
Thanks!
When trying to bind a custom paste function, on IE I encounter this problem with this line (ng-wig.js, line ~151).
var pasteContent = (event.originalEvent || event).clipboardData.getData('text/plain');
Throws an error on IE, due to it not supporting text/plain
and only Text
. It pastes the raw data still, but I am unable to fire my custom function.
It would be great if someone can develop a feature to add special characters as an html entity into the editor. Insert a special character say copyright symbol © in the editor so that the produced HTML is ©
Text is going out of the boundary in rich-text in Ipad. Scrollbar is not functioning when opening in Ipad.
Steve,
Is there anyway you could add a directive features to add custom $sce filter to allow the css attributes of ng-wig go through when binding with ng-bind-html?
When I try to use your directive with IE8, the toolbar images donot appear.
I suspect related to IE8 not supporting svg
When I create a link, I cannot unlink (only by deleting the linked word).
How can I overwrite templateUrl without modifying ngWig directive itself?
Module name is not 'ng-wig' but actually 'ngWig', Return error on first install.
And return undefined on line 120 of ng-wig.js
When I click the "link" icon
and click cancel on the popup
it inserts "http://" in the text
I expect nothing to happen when I click cancel
When I do copy from a word docs and paste in to the component it keeps all the fonts from the word docs.
Is there a way to disable this kind of behavior?
@stevermeister I have been using your plug-in, great by the way and love the new feature of the on-paste feature, which I am currently using.
I needed to use the paste feature to check if the text pasted in was UTF-8 encoded, and after reading your documentation and digging through the paste object I noticed that clipboardData is actually in the originalEvent object within the pasteEvent, so rather than pasteEvent.clipboardData.getData('text/plain') it should be pasteEvent.originalEvent.clipboardData.getData('text/plain');
Thanks again.
Tom
Hello,
Had a quick question. I've tried setting the width and height on ngWig several different ways. It seems like no matter what i do, the change to height, changes the height of the actual text area, but leaves the box the same size, and also causes any form elements under the ngWig to raise and overlap the box. I've tried setting cols and rows like such:
<textarea ng-wig="" cols="50" rows="5"></textarea>and tried changing the style
<textarea ng-wig="" style="set height here"></textarea>Any info on what I should do here?
Thanks!
B
In order to give style to edited text we need to include ng-wig.css inside iframe (as a link) and add class "nw-content" to iframe's
Ideally, toolbar buttons should have "active" state. e.g. when current block of text is formatted as "ol", the "ol" button should have "active" state
Hi,
I want to insert an html image to editor in javascript. How can i achieve that?
On every initialisation ng-wig tries to load 'http://localhost/undefined' and fails.
It seems like it tries to load a css style inside an iframe, but scope.cssPath is undefined.
init ng-wig.js:118
invokeLinkFn angular.js:8141
nodeLinkFn angular.js:7653
compositeLinkFn angular.js:7009
compositeLinkFn angular.js:7012
nodeLinkFn angular.js:7648
(anonymous function) angular.js:7884
processQueue angular.js:13073
(anonymous function) angular.js:13089
Scope.$eval angular.js:14289
Scope.$digest angular.js:14105
Scope.$apply angular.js:14393
done angular.js:9567
completeRequest angular.js:9754
requestLoaded angular.js:9695
How can i customize the toolbar? For example i want to remove the heading button.
regards
STR:
It's not really good UX to have an alert, because it can easily be blocked by the user. Could you implement some other solution?
Very good addition would be auto-expanding of the editable area once amount of text becomes too big (so that there's no vertical scrolling)
I wasn't able to find a license file or one mentioned in package.json, the readme, etc. Would it be possible to add an appropriate license?
More like suggestion, but would be nice to enable/disable options for different ngWig instances (e.g. first one doesn't have alignment, but the second one has).
Hi,
I've added the component to our project and under FF i'm unable to click inside freely the cursor sticks to the place before the first character. I can write and press enter for new line but thats all.
Any idea,
Thanks in advance
This is not a problem with ng-wig itself, but might be useful for others who run into the dreaded "Where are my list items gone ????" problem.
If you are using ng-wig inside a modern CSS framework such as Bourbon, your list styles can get redefined away, and at first glance it's pretty hard to work out where to fix the problem.
Manually overriding just the "list-style-type" in your CSS wont bring them back :(
.... But, manually overriding the list-style-type AND manually overriding the left padding back to a sane default does the trick.
.nw-editor {
// .... as per the standard css for ng-wig
// now add these 2 blocks :
ol {
list-style-type: decimal;
margin-bottom: 1px;
padding-left: 60px;
//@extend %default-ol;
}
ul {
list-style-type: disc;
margin-bottom: 1px;
padding-left: 60px;
// @extend %default-ul;
}
}
Seems like these CSS frameworks hide the list styles by fiddling with the left padding, which causes havoc with the ng-wig control.
Hope that helps someone out there.
I noticed that I'm getting live reload insertion while I'm using grunt within my project. It'll create data as it should, and append a <script>
inside of it all like so:
<p><ul><li>kljsdf sdfdfs<br></li></ul><div><br></div><h1>yfd</h1></p><script src=\"http://127.0.0.1:35729/livereload.js?ext=Safari&extver=2.0.9\"></script>
For any page that I'm inserting this live reload into.
Looks like the incorrect spelling as been pasted in a few places. Builds, but worth fixing.
Missing implementation of link functionality
could you please add a minified version of the ng-wig.css file inside the dist folder?
<textarea
required=true
name="deal_public_description"
ng-model="description"
ng-maxlength=3000
ng-minlength=300
cols="30"
rows="10"
ng-wig="description"
data-autoexpand="off"
>
</textarea>
is valid when description =
0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0
155 characters
Hi,
Could you please point me where did you get your icons from?
Would be nice if you could choose which buttons that should be visible.
remove "Auto-expand editor" area and make editor container auto-expand by default
the area is not getting focus when the height of editor is fixed and it's bigger then heights of the text
I could use some expertise on how to correctly install this on an existing angular project. i tried to copy the files from the ZIP into my "content" directory and run the script in index.html, however i receive the following error when my app.js attempt to import the module.
"Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngWig due to:
Error: [$injector:modulerr] Failed to instantiate module ngwig-app-templates due to:
Error: [$injector:nomod] Module 'ngwig-app-templates' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."
STR:
It would be nice if the consumer could use the ng-disabled
attribute to show the text editor as disabled. In this case we would want the text-area to be non-editable and the buttons to be always disabled. This would be useful for cases where you want to conditionally enable/disable the editor, or perhaps use the same display for a read-only view.
When you look at text in html, it's not very convenient to read. Indention on html would be convenient.
Is there a alternative way to use this editor non-AngularJS environment?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.