steveathon / bootstrap-wysiwyg Goto Github PK

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

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?

I don't want to fork for minor change but pay attention that the line
"bindHotkeys(options.hotKeys);"
should be
"bindHotkeys(options.hotkeys);"

Font colour and backgroud colour tools are not available with this plugin

Also requested between the lines in #29.

I'm comparing a bunch of editors and a live demo would help.

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

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.

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.

http://jsfiddle.net/THPmr/6/ - this fiddle explains bug and workaround. I think it should be implemented here somehow.

In the current master branch you cannot select text by dragging the mouse in the text area.

This is working with the the older version of this plugin: http://mindmup.github.io/bootstrap-wysiwyg/

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.

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

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?

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.

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.

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?)

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.

I cant figure out , How I can save the uploaded image to php server

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.

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.

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

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.

html5 video support
i18n

delete

Hyper link dialog closes as soon as typing starts.

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

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.

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.

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 ?

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.

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

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.

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!

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.

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

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.

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.

Hi everyone

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

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
});

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.

Do we have any angular directive for the same ?

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?

Hi,

thnks and congratulation for this fantastic work!
When I try to set textbox content (for data-edit="createLink") with javascript, the Add button doesn't work.

What can I do to make it work ?

Thanks!
Nicola

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

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!

"fontawesome": ">= 3.0.0",

Nope.

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>

As can be seen on the demo page, when using the bold, italics etc only the bold button will ever be highlighted when active.

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...

I added superscript and subscript button, they worked on firefox, but not work on chrome!
How to fix this problem? thanks a lot!