Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to insert a non-breaking space

See original GitHub issue

I’m trying to use “Alt-Space” to add an HTML   code, which is standard usage for people who write in French (where they put non-breaking spaces in front of punctuation marks like “?”, “:”, “!” and others. But I’m unable to do this

If I take a normal Trumbowyg box and type “F r e d Alt-Space ?”, this results in a normal space for the html: <p>Fred ?</p> If I change this to “F r e d Alt-Space Space ?”, the result changes: <p>Fred&nbsp; ?</p> But I cannot see any way of getting the desired result: <p>Fred&nbsp;?</p>

I’ve succeeded in writing some custom code to trap character code 160, but I then can’t see how to insert an &nbsp; into the text and set the caret to immediately after it: there isn’t enough documentation on the Range API to make it obvious how I do this.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

xgretschcommented, Sep 20, 2019

I’ve done a bit more digging: as ever, the article on French Wikipedia is fairly comprehensive. As far as I can see, the Unicode value of 160 is pretty much universal, the keyboard shortcuts vary wildly from one system to another (it’s Alt-0160 on Windows). The English Wikipedia article gives similar information.

The following code works fine, with one whoopsie (trumbo is my editor class).

$('.trumbo').on('keypress', function(e){
  if (e.charCode === 160) {
    $(this).trumbowyg('execCmd', {cmd: 'insertHTML', param: '&nbsp;'});

The whoopsie is that if the &nbsp; added is the last thing in the paragraph, when you type the next character (for example, an exclamation mark), the &nbsp; is changed to a space. If you then go back, delete the space and type “ALT-Space” again, everything is now fine.

The workaround is enough to get me out of jail for now, but it would be nice if you can find a better solution.

xgretschcommented, Jan 4, 2022

Hi Alex, I know it’s been a long time, but I’ve got round to looking at this again. If you start with an editor containing the following html <p>a&nbsp;</p> …and then move your cursor to the end after the non-breaking space and type the letter ‘b’, what you get is <p>a b</p> The place where this happens is in the following routine:

syncTextarea: function () {
     var t = this;
     t.$ta.val(t.$ed.text().trim().length > 0 || t.$ed.find(t.o.tagsToKeep.join(',')).length > 0 ? t.$ed.html() : '');

The function t.$ed.html() appears to convert the non-breaking space into a standard space.

If I’m not mistaken, the html() function is the one in jQuery, so it may be relevant to know that my jQuery version is 3.6.0.

Do you have any ideas on why the html() function is behaving like this, and what I might be able to do about it?


Read more comments on GitHub >

github_iconTop Results From Across the Web

Inserting a Non-Breaking Space - Word Ribbon Tips
The answer is to use non-breaking spaces instead of regular spaces when you don't want Word to break a line at a certain...
Read more >
How to Insert Nonbreaking Spaces in Microsoft Word - YouTube
Learn how to keep words and other characters together by inserting nonbreaking spaces in Microsoft Word.This video was filmed in Word 2016, ...
Read more >
Insert a Non-breaking Space in a Word Document - YouTube
Insert a non-breaking space to prevent word from breaking up your word over different lines. Word automatically wraps your word over ...
Read more >
Non-Breaking Space Randomly Inserting Upon Saving ...
Also, could you go to Word > Insert > Symbol > More Symbols >Special Characters. Check if the short cut key for non-breaking...
Read more >
How to insert a non-breaking space in Word online - Super User
To do this, hold the alt key and type the numbers 0160 . Share. Share a link to this answer.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found