We Keep Coding

ElectronJS - Make bold text in Teaxtarea with local keyboard shortcut

I'm trying to make a text editor in ElectronJS as my first application in Electron.
I got the Textarea and the shortcut setup as it should be, but I cant get the selected text in the textarea to get bold, when pressing CTRL+B. I could use some help in the right direction on how this is done.
I have tried to use the execCommand so far to toggle the bold, but are getting the error:
Document is not defined
Main.js
menu.append(new MenuItem({
label: 'Shortcuts',
submenu: [{
role: 'Bold',
accelerator: process.platform === 'darwin' ? 'Cmd+B' : 'Ctrl+B',
click: () => {
document.execCommand('bold');
}
}]
}))
Menu.setApplicationMenu(menu)
I have also tried this in renderer.js, but not working aswell.
What am I doing wrong?

This actually answered the question: https://stackoverflow.com/a/12831155/652535
Content from link:
If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.
It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.
<div id='fake_textarea' contenteditable></div>
The scrollbars can be reproduced with the CSS overflow property.
You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):
<input type='hidden' id='fake_textarea_content' name='foobar' />
...
$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});

Load data into TinyMCE programmatically

I have multiple text-areas that I'd like to enhance using tinyMCE. I can get the text areas to show as the Rich Text Editors by initializing TinyMCE on all text areas in the page as below:
$(function () {
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
});
This also handles the sync process between the Tiny editor and the actual textarea.
My html, that populates the text areas looks like this:
<div id="divEditor1" class="container-fieldset">
<div class="editor-label-field" style="left: 50px">
<%:Html.LabelFor(Function(model) model.divEditor1, "divEditor1")%>
</div>
<div class="editor-field-fn">
<%:Html.TextBoxFor(Function(model) model.divEditor1, New With { Key .class = "ucase-input" } )%>
<%:Html.ValidationMessageFor(Function(model) model.divEditor1)%>
</div>
</div>
<div id="divEditor2" class="container-fieldset">
<div class="editor-label-field" style="left: 50px">
<%:Html.LabelFor(Function(model) model.divEditor2, "divEditor2")%>
</div>
<div class="editor-field-fn">
<%:Html.TextBoxFor(Function(model) model.divEditor2, New With { Key .class = "ucase-input" } )%>
<%:Html.ValidationMessageFor(Function(model) model.divEditor2)%>
</div>
</div>
... etc
I can read the content from the TinyMCE editors like this:
for (var i = 0; i < numberOfEditors; i++) {
sFieldValue = document.getElementById("FormFieldText" + i).value;
//sFieldValue = tinyMCE.get("FormFieldText" + i).getContent(); -> or like this, works just as well.
};
The problem I am having is getting the TinyMCE editor box to display the already existing text on page load (text read from a database), since it always shows up as an empty text box. However, the text is imported correctly in the original textarea in the background. Formatted and escaped, since it goes through some ajax calls.
I've seen I can set the content of tiny like this:
tinyMCE.get('my_editor').setContent(data);
However, I need to do it programmatically, in a way that all textareas on my page export the information to tiny. Just like the above
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
Also, what would be the right time to un-encode the text so tiny can read it? (I assume this step is necessary)

If you initialize TinyMCE on each textarea before each textarea has its content then TinyMCE won't auto-magically go back and update itself when the textarea gets updated with content - it just does not work that way.
You could use TinyMCE APIs (as you already know from your post) to update the editor's content once you get the data. Alternatively you could delay initializing TinyMCE until after the data is fetched into each textarea.
Neither approach is better/worse - there are certainly multiple ways to solve this and they all work if implemented appropriately.

I ended up parsing the list of active tinymce instances by ID and populating each one with the corresponding text from the textareas in the background.

I came across this post looking for a solution to get the data from the database back into tinymce, and I ended up with
<textarea id="textarea"><?= htmlspecialchars($description); ?></textarea>
Just using php and the variable from the array from the database.

Convert HTML tags and display as styled text using javascript

I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!

Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>

I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>

I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)

The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.

replacing text in two different forms, how to reach text in a nested label through its div

I have a setup, where input values get sent to replace the option text in a select list. that's working fine. thing is, i want that same text to also replace the text in a different place in the doc as well- the additional text i want to change is inside a label in a form plugin and i cant put an i.d in the label tag. so my questions is what vanilla javascript do i need to reach the text and replace it with the text from the first input?
the markup thats working ok:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
...many of these. targeting:
<select id="select1">
<option id="char_name1" value="1">1st</option> ...</select>
(equivalent number of options...)
with
<script>function change1(eet){
document.getElementById("char_" + eet.id).text =
document.getElementById(eet.id).value;}</script>
i would like to replace what in the follow markup:
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
cant add an id to the lable, and the frm_primary_label class is used many times so i cant target the specific text through it (need to go through the div id). any help on the proper markup would be appreciated.

If there is only 1 element under the div, you can just use getElementsByTagName so you could possibly have a code snippet something like this:
var fieldContainer = document.getElementById("frm_field_53_container");
var label = fieldContainer.getElementsByTagName("label");
label[0].innerHTML = document.getElementById(eet.id).value;

I'm not entirely clear on what you want, but I think document.querySelector is what you're looking for:
document.querySelector("#frm_field_53_container label").text = 'new text';
Browser support:
http://caniuse.com/queryselector

Highlight the text using jquery

I have one textbox, button and and list box with some text.
When I click on button what ever the text I enter in text if it matches the text in the list box I am trying to highlight that text using jquery I used this code.
Jquery Code
$("#btnhighlight").click(function () {
alert("yes");
var htext = $("#txthighlighttext").val();
alert(htext);
$("#lstCodelist").highlight('MD');
});
Style sheet I used to hightlight and i downloaded the highlight plug in added to the project
<style type="text/css">
.highlight { background-color: yellow }
</style>
Please can any one help me out how to do this. or if I am doing wrong?
Can an

Maybe your problem is that your script is executed before DOM ready.
try with this:
$(function (){
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").text();
$('#lstCodelist').highlight(htext);
});
});
or put your script at the body end.
ps. I supposed you used this plugin (jquery.highlight)
edit:
http://jsfiddle.net/yJmBu/ here a full example

This plugin is generating spans around the text it finds. Option tags can not contain any html tags so the following (Generated by your plugin)
<select>
<option><span class="highlight">Te</span>st</option>
</select>
is illegal syntax and will be ignored by the browser.
However if I understand your intent, there are some plugins out there that will accomplish something similar for you out of the box.
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
Some proof that a nested span inside an option is not allowed.
html tags in the option tags
It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?