Trumbowyg: Appending styled text

Created on 22 Mar 2018  Â·  5Comments  Â·  Source: Alex-D/Trumbowyg

Informations

what i need to do is to append html elements and text such as :

var bold = document.createElement("b");
var italic = document.createElement("i");
var underline = document.createElement("u");
var text= document.createTextNode("hi");
 italic.appendChild(bold);
 bold.appendChild(text);
 underline.appendChild(italic); 

now i have to insert it into editor.

I am making smth for transcribing, so this would be used on key cmd to insert some kind of text.

for inserting regular text, without style, I used this function

// adds  Speaker's id into the editor
function addSpeaker(savedID){ 
  if(savedID==null){
    return;
  } else{
    var x = document.execCommand('insertHTML', false, savedID);
    console.log(byId('editor'));
    console.log(x);
  }
}

I tried

// Set HTML content
trumbowyg.html('<p>Your content here</p>');

all the possibilities, but none of them works.

help?

question

All 5 comments

Why did you not use insertHTML to insert... HTML?

var underline = document.createElement('u');
document.execCommand('insertHTML', false, underline.outerHTML)

regardless your utterly sarcastic attitude, thank you for your absolutely
useless comment which does not at all responds to my question. I want to
append elements in html, not insert in it.

Keep cool. I anwser to many issues each days on my free time. You are unclear. So I did not understand your point.

Without sarcasm:

  • What did you have in the editor at the start?
  • How did you want allow user to trigger this operation
  • What the expected result in the editor HTML?

I want to help you but Idk how since I do not get your need.

Note: please, next time, use markdown to color your code.

I was typing the email I figured out the solution.

I had to add tags as part of the text.

But, you do still have problems with appending.

Anyhow, thanks for your time. Have a nice day. :)

On 23 March 2018 at 00:13, Alexandre Demode notifications@github.com
wrote:

Keep cool. I anwser to many issues each days on my free time. You are
unclear. So I did not understand your point.

Without sarcasm:

  • What did you have in the editor at the start?
  • How did you want allow user to trigger this operation
  • What the expected result in the editor HTML?

I want to help you but Idk how since I do not get your need.

Note: please, next time, use markdown to color your code.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Alex-D/Trumbowyg/issues/746#issuecomment-375487843,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWCUz7ka80VogmytavfOX7nvS7BosGmcks5thDASgaJpZM4S3KO1
.

Not sure if this is what you were after, but to help if others come here.
If you wanted to add new html at the end of the content:

var html = trumbowyg.html();
html += "<p>Appended element</p>"
trumbowyg.html(html);

If you want to add elements at the current caret location, I found I had to do a restoreRange like this:

trumbowyg.execCmd('restoreRange');
trumbowyg.execCmd("insertHtml", "<p>new item</p>");
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mgjunk picture mgjunk  Â·  4Comments

HyperBlade picture HyperBlade  Â·  6Comments

Droeftoeter picture Droeftoeter  Â·  5Comments

akupiec picture akupiec  Â·  4Comments

KiarashS picture KiarashS  Â·  3Comments