Git Product home page Git Product logo

bootstrap-wysiwyg's Introduction

bootstrap-wysiwyg

GitHub release GitHub license

A tiny Bootstrap and jQuery based WYSIWYG rich text editor based on the browser function execCommand.

This project was originally built for MindMup and has now been adapted and modified to suit a wide range of projects.

Development is active, and ongoing.

Features

  • Automatically binds standard hotkeys for common operations on Mac and Windows
  • Allows a custom built toolbar with no magic markup generators enabling the web site to use all the goodness of Bootstrap
  • Does not force any styling - it's all up to you
  • Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
  • Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV
  • (Optionally) cleans up trailing whitespace and empty divs and spans
  • Requires a modern browser (See SUPPORTED)
  • Supports mobile devices (See SUPPORTED)
  • Supports multiple instances
  • HTML Sanitization
  • Drag and drop files to insert images
  • Supports image upload
  • Supports image capture on mobile devices
  • Events

Styling for mobile devices

This editor should work pretty well with mobile devices, but you'll need to consider the following things when styling it:

  • keyboards on mobile devices take a huge part of the screen
  • having to scroll the screen to touch the toolbar can cause the editing component to lose focus, and the mobile device keyboard might go away
  • mobile devices tend to move the screen viewport around to ensure that the focused element is shown, so it's best that the edit box is glued to the top

For the content attachment editor on MindMup, we apply the following rules to mobile device styling:

  • edit box is glued to the top, so the focus doesn't jump around
  • toolbar is below the edit box
  • on portrait screens, edit box size is 50% of the screen
  • on landscape screens, edit box size is 30% of the screen
  • as the screen gets smaller, non-critical toolbar buttons get hidden into a "other" menu

How to Get Started

To learn the basics of the boostrap-wysiwyg editor, please refer to the project's Getting Started wiki article.

Dependencies

Thanks to

@gojko @mindmup @jordanh @beatnbite @brutuscat @VictorBjelkholm @mrmrs @tilleryd @pnevels

History

The original version of this code (below) appeared to be no longer maintained. There were a number of outstanding changes which needed to be merged in and a few which included performance and feature improvements. These have now been included in this master branch.

I'll keep an eye out for future changes/improvements and pull them in as required.

  • Steve

Original Licence

The original version of this tool can be found here: bootstrap-wysiwyg

The MIT License

Copyright (c) 2013 Damjan Vujnovic, David de Florinier, Gojko Adzic

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bootstrap-wysiwyg's People

Contributors

astagi avatar beatnbite avatar briangenisio avatar briceshatzer avatar brutuscat avatar damienwhaley avatar davedf avatar dmethvin avatar electricjones avatar evaldobarbosa avatar findus23 avatar fluffels avatar gl-works avatar gojko avatar hungqcao avatar jd0000 avatar jordandh avatar mikeabdullah avatar pierre42100 avatar pnevels avatar rudiney avatar sfate avatar steveathon avatar tilleryd avatar timdorr avatar victorb avatar wibron avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap-wysiwyg's Issues

Do you sanitize the strings?

Hello,

Everything is in the title, do you sanitize the strings or should it be done using a third party way?

Keep up the good work,

Cheers

Adding support for Font Awesome 4.2

I'm adding support for Font-Awesome 4.2. This is a pretty straight forward change but it does break 3.x support because of the change in tags.

Multiple Editors and Link Editing

Hi,

first of all let me thank you for this piece of code that I intend to use, and hopefully contribute to make it better.

I have 2 fields on a form that require html editing for simple things, bold, link editing, and not much more.

Getting the link editing to work on one editor was hard enough, having to make sure the input doesnt auto-close on focus, and other small bugs/issues.

But as soon as I added the second editor, I noticed that pressing the Bold button on editor 2 would also affect text on editor 1. It was also impossible for me to make the add link button work on editor 2.

Can you replicate this behavior on your side? Do you know its root causes? Is there a quick fix, or a bug fix on the horizon for it?

Tell me how I can help.
Thank you very much.

Image resizing

Do you plan adding an image resizing abilities to the editor ? Or maybe you already know a goof plugin that can be used for this purpose, that is also compatible and easy to implement in the editor ?

Close tags

Hi guys, I am using the script for post the content, and then be able to edit it any time..
But I have a problem..

At some point, the tags (even when I press the button to close the tag for example), it just doesn't close.

And then, you can imagine what happens. Everything is broken.
¿How can I close all the open tags when I press the 'Save' button?

Thanks in advance, I'm sure the workaround will be helpful for everyone who is using this beautiful script.

Adding examples

Need to add some examples in how to collect contents of WYSIWYG into form submission for newer users.

Multiple editors on one page

Hi,

I assumed, because of the data-target attribute that I would be able to use multiple editors on one page and just could initiate them all with a class like this: $('.editor').wysiwyg()

Now this is not working as expected with version 1.0.1. I believe this is because the editor is not instantiated on each object of the select but only on the first. Also, I could find no reference about the use of data-target within the code.

Before I try to solve this by myself: is there something I'm missing or I am doing wrong?

Thanks for your kind answer.

Figure and figcaption support

Can by inserting/uploading an image the figure tag including the figcaption tag be inserted/edited? I'm looking for a structure of:

image

I'm not sure if i have used this version or the mindmup original version but if i enter this structure in the HTMLedit the figure and figcaption tags are replaced by divs and are therefore not editable anymore after switching back to WYSIWYG mode.

Any ideas how to get this working is appreciated!

I want to change the tag when paste text from outside

The editor is really nice. When I copy/paste text to this editor, every paragraph was converted to "span" tag and add "style" attribute.

paste demo: Transactions are not supported on MySQL's default table
convert to:
--span-- style="color: rgb(34, 34, 34); font-size: 15px; line-height: 15.6000003814697px;" Transactions are not supported on MySQL's default table --span--
-- is <>
I do not want to get this result. But I can not found any code/config related to this behavior. I want set

tag for every paragraph. Is this the default result when paste to editor? How can I change it?

Thanks!

Clicking 2 buttons at time (e.g. making next characters bold and italics)

I found a problem that it is impossible to click 2 buttons at time (without typing in any letters).
Way to reproduce:

  1. Create an editor with 2-button toolbar - bold and italics
  2. Go to the editor and type something (will be typed in plain text)
  3. Click Bold and then Italics (right one after another - not typing anything in the editor)
    BUG: After clicking Italics Bold is disabled, only Italics is applied

Different way to reproduce (looks like a different bug, but I believe it comes actually from the same problem):

  1. Create an editor with 2-button toolbar - bold and italics
  2. Go to the editor and type something (will be typed in plain text)
  3. Click Bold (it gets enabled) and without typing anything click Bold again
    BUG: It should disable, but it doesn't (stays bold)

In both situations once you type in something - the editor gets back to normal way of working. Tested on Chrome. Firefox and IE - works same everywhere...

Missing package.json file

The repository is missing a package.json file to declare Node.js dependencies.

Although the gulpfile is very small, thus it's easy to know which packages I should install, it's a better practice to have a package.json to declare dependencies.

This will also make it easier for anyone wanting to contribute with the project to get started.

Add CI build

I've been doing a lot of linting, minifying, etc in my recent PRs. I think we should add CI build so that when a PR is made things like HTML validation, LESS & SASS compilation, JS linting, etc. are all done automatically.

For those not familiar with CI, this would help for the following reasons:

  1. For a while, there were several problems in the bootstrap-wysiwyg.js fie. It wasn't until the file was linted that some of the problems were found. This would take care of that because every time a PR is made the JS files will be linted and the HTML validated.
  2. Not everyone uses Gulp, so we need a way to do this automatically for those developers as well.
  3. As I already said each PR would be validated and linted. So by adding a CI build, we will be able to keep a level of consistency in the project.

1.0.3-rc doesn't seem to work

I downloaded 1.0.3-rc and opened examples/basic.html but nothing happens when I type in the textbox. This happens in all browsers.

Destroy method

Is there a way to destroy the editor and turn back to the original div, but with the edited content in it?

Keymap is a little off

Need to patch up the keymap, as the bolding, italics, etc are not valid anymore.

Seems a simple fix is to create new entries for existing meta+ items that continue to work (justification,etc) but to add new ones for ctrl which needs Ctrl instead.

Go figure. Will patch this shortly.

HTML Editor 'save' on editor screen

Currently, if you 'save' the data out of the editor when you are on the HTML editor screen, it will present the HTML wrapped in "pre", need to pre-convert it back to html prior to outputting when executing the $(editor).html() if possible.

selectionColor stays after adding URL

After playing around for some time I noticed a strange bug, that I can't describe. So here is a video of it:
https://www.youtube.com/watch?v=tT6WZWnjk4s
When the browser (can only reproduce in Chromium) looses focus while the text is selected the background color stays.

Unfortunatly this seems to be a browser bug and it is quite hard to reproduce, so I am closing this.

bootstrap-wysiwyg.min.js missing a final semicolon; causing cascaded script failures.

The missing semicolon is causing all following scripts to fail.

It stands to reason this will also cause problems if sourcing the scripts in a web page, but have only tested the gulp mix.

Steps to Reproduce

  1. Create a gulp mix.scripts command.
  2. Prepend bootstrap-wysiwyg.min.js to the array of scripts to combine.
  3. Run gulp.
  4. View importing web page in chrome, and then open chrom dev tools to see errors.

Workarounds (successful ones are marked with an 'x'):

  • Use the non-minified version, which has the semicolon.
  • Put the minified version last in the list of scripts to mix or load?
  • Manually add a semicolon to the minified version. This is not optimal, esp. if using a package manager.

bower install does not work

When I try to install using bower into empty dir, I've got an error and installation fails.

bower install bootstrap-wysiwyg-steveathon

bower cached        git://github.com/steveathon/bootstrap-wysiwyg.git#1.0.2
bower validate      1.0.2 against git://github.com/steveathon/bootstrap-wysiwyg.git#*
bower not-cached    git://github.com/tzuryby/jquery.hotkeys.git#>= 1.0
bower resolve       git://github.com/tzuryby/jquery.hotkeys.git#>= 1.0
bower cached        git://github.com/FortAwesome/Font-Awesome.git#4.3.0
bower validate      4.3.0 against git://github.com/FortAwesome/Font-Awesome.git#>= 3.0.0
bower cached        git://github.com/tcollard/google-code-prettify.git#1.0.4
bower validate      1.0.4 against git://github.com/tcollard/google-code-prettify.git#>= 1.0.1
bower cached        git://github.com/jquery/jquery.git#2.1.3
bower validate      2.1.3 against git://github.com/jquery/jquery.git#>= 1.9.1
bower cached        git://github.com/twbs/bootstrap.git#3.3.2
bower validate      3.3.2 against git://github.com/twbs/bootstrap.git#>= 2.0
bower new           version for git://github.com/jquery/jquery.git#>= 1.9.1
bower resolve       git://github.com/jquery/jquery.git#>= 1.9.1
bower download      https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower new           version for git://github.com/twbs/bootstrap.git#>= 2.0
bower resolve       git://github.com/twbs/bootstrap.git#>= 2.0
bower download      https://github.com/twbs/bootstrap/archive/v3.3.4.tar.gz
bower extract       jquery#>= 1.9.1 archive.tar.gz
bower resolved      git://github.com/jquery/jquery.git#2.1.4
bower extract       bootstrap#>= 2.0 archive.tar.gz
bower resolved      git://github.com/twbs/bootstrap.git#3.3.4
bower ENORESTARGET  No tag found that was able to satisfy >= 1.0

Additional error details: 
No versions found in git://github.com/tzuryby/jquery.hotkeys.git

Add Grunt support

Since we are looking to use Travis CI in the future. I think it would be a good idea to add Grunt to our project since it's supported by Travis CI.

I've already began the process of recreating the Gulp tasks using Grunt. While working on this I'm also in the process of creating a way to automatically update the version numbers of files when it's time to do a release. I'm thinking that I may implement it so that a release can be created via the CLI like so:

grunt release // Default patch release
grunt release:minor // Minor release

What does everyone else think? Are you ok with using this syntax in order to perform a release? My end goal is for it to update the version numbers of the following files:

  • package.json
  • bower.json
  • bootstrap-wysiwyg.js

Remove dependency on libraries in external folder

The libraries located in the external folder are redundant since these same dependencies have been installed via bower. I suggest that we remove these libraries and make the HTML files use the bower libraries.

Note: I've already started working on this and have it roughly 90% completed.

Remove non-core libraries

Remove non-core libraries and move to CDN links so that the basic class data only is contained here allowing for any security/other changes to be patched externally.

Should also take opportunity to change folder structure to be more conforming to other libraries.

Bower dependency for hotkeys

Everytime I try to pul in jQuery Hotkeys via bower, I get an error that there is not satisfiable version. I ended up having to define the git endpoint to fix this. It's an upstream problem, but this solves it.

implement microformat

Hi everyone

I have a question respect implement microformat vcard, hcard into editor text.

Autocomplete for links

Hi there,

Is there any way of providing a list of options for autocomplete of hyperlink addresses? I'm working on a site where links will point at other data types within the application, so it would be useful to provide a list of possibilities as the user types the address for links.

I'm also wondering which to choose between steveathon/bootstrap-wysiwyg and mindmup/bootstrap-wysiwyg - is either one more suitable for the above?

Thanks,

George

Implementing WYSIWYG in .net

Hi,

I am new to this, but I would like to know how to implement the text editor to a .net MVC application?

Thanks in advance.

Support for insert code

Hi,

I am using this great editor in my own blog, however, I didn't see any button or command for me to insert code, like <code>code here.</code> or <pre>code here</pre>.
Without this, I could not use google code prettify, so I have to add insertCode() by myself...(even I am not good at javascript)

So, my question is: is there any button or command for users to insert code now?

Best Regards!
Leo

Preventing tabulator

Hi,

I have an application where I need to prevent tabulators, my code looks like the following:

$('#subject').wysiwyg({
    toolbarSelector: '',
    hotKeys: {}
});

$('#subject').on('keydown keyup', function(e) {
    if (e.keyCode == 13 || e.keyCode == 9) {
        e.preventDefault();
    }
});

When hitting enter it is being prevented like it should be, but a tab doesn't get prevented. Also providing an empty hotKeys parameter didn't change anything (in fact: none of the hotkeys get prevented?)

Is there an "on change" event?

I need a callback function to run each time html within editor changes - when user types, pastes, cuts, clicks buttons. I tried the obvious code below, but my console didn't log any messages. How do I do this?

$('#bootstrapWysiwyg').change(function(){
    console.log('CHANGED');//not triggered
});

$('#bootstrapWysiwyg').on('change', function(){
    console.log('CHANGED');//not triggered
});

$('#bootstrapWysiwyg').wysiwyg();//INSTANTIATING (and it actually works)

$('#bootstrapWysiwyg').change(function(){
    console.log('CHANGED');//not triggered
});

$('#bootstrapWysiwyg').on('change', function(){
    console.log('CHANGED');//not triggered
});

Best practice for sending images to the server?

Not really an issue I guess, but what would be the recommended way to send the images placed in the editor via the FileReader API to the server? Is there some way to expose the FileReader object that's used by bootstrap-wysiwyg?

parent (root) level div

Hi,

When I create multiple paragraphs the output looks like the below

first paragraph<div>second paragraph</div><div>third paragraph</div>

how to fore the first paragraph to have its own div, something like the below

<div>first paragraph</div><div>second paragraph</div><div>third paragraph</div>

Editor sometimes creates invalid HTML

Originally documented at madskristensen/MiniBlog#153

In the original issue, they found that the editor will at times create invalid HTML. In my blog (that uses the Miniblog engine) I had a file that had multiple missing end tags.

I'm not sure how we might go about correcting this issue but it is something that we should definitely look into.

Add support for syntax highlighting

I know there are others like myself who use the editor in their blog. It would be nice if we could add syntax highlighting support. Probably the easiest way to do this would be to support adding a GitHub gist to the editor. This would be done by embedding a script into the page since Gists provide an embedded link automatically.

For example: <script src="https://gist.github.com/RandomlyKnighted/0b6d4440ab390be951db.js"></script>

@steveathon What are your thoughts on this? Is this something that would fit into the plan you have for the project?

Are there working samples?

I have installed bootstrap-wysiwyg-steveathon from bower. Then I opened a file examples/basic.html and tried to write some chars into edit field. I've got a javascript exception:

NotFoundError: Node was not found
document.execCommand(command, 0, args);

browser: firefox 37.0.2

Are there any working samples how to use this component?

Toolbar is not being updated

In the current master branch the toolbar is not being updated.

To reproduce:

  1. open clear-formatting.html
  2. write some text
  3. select all
  4. click B

expected result:
selection is bold and the toolbar button B changes its class to btn-info

what happens:
selection is bold but the toolbar button B remains btn-default

It can be reproduced by starting any html from the examples directory.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.