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

Copy content from WYSIWYG editor to textarea

I try to copy the content from a WYSIWYG-Editor (What you see is what you get), to a textarea and It needs to be structured. I am using Quill https://www.quilljs.com/docs/quickstart
I added a textarea, the content from the Editor is pasted into it, on click at the button Edit HTML.
$("#editHTML").click(function() {
var content = $("#editor .ql-editor").html();
$("#htmlEditForm").html(content);
});
It works, but as you can see it is not structured at all. Everything is in one line:
I need it like this:
<p>FOO</p>
<p>BAR</p>
<p class="ql-align-center"><span style="color: rgb(230, 0, 0);">I am centered</span></p>
I need it to be in a textarea, because I want to use it as HTML editor. Later on I will add another button which pastes the html code back into the WYSIWYG-editor.
The goal is, to give advanced users the possibilty to edit the HTML.
I am not sure how I can do this, I was thinking of replacing any closing tags with this: e.g. </p> -> </p>\n but it just outputs </p>\n in the textarea instead of creating a new line.
Is this even possible?
UPDATE:
I tried to use getContents as suggested:
var toolbarOptions = [
['image'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['blockquote', 'code-block'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'direction': 'rtl' }], // text direction
[{ 'font': [ 'arial', 'Monotype Corsiva', 'fantasy', 'serif' ] }],
['clean'] // remove formatting button
];
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
$("#editHTML").click(function() {
$("#htmlEditForm").html(quill.getContents());
});
But the textarea stays empty.
quill.getContents() does just return an object:

Unfortunately Quill is not meant to do this. Quill uses it's own document model called Parchment. It tracks everything that changes in the editor so that it can understand it's contents and make changes, but it has some limits on what can be added. For example, you can't add an element that doesn't match an existing blot/format.
If someone were to edit the HTML arbitrarily and add a div for example, the editor's document model would no longer match it's contents. When switching back to the wysiwyg view, some functions wouldn't work until it tries to recreate it's document model and messes up the changes made in the HTML view.
Edit
Also, for the original problem of how to format the HTML with new lines and indention, what your seeing is how it's formatted. The editor is not breaking to new lines for each block element or adding indentation for nesting as someone would when they're writing code.
If you want it to be formatted in some way, you'd have to do it manually. Either by parsing the getContents() output or by writing or finding a script that can format HTML.

You can combine your text area with Ace Editor (https://ace.c9.io/) which allows code editing features.

Instead of detecting .click event use the built-in quill mechanism 'text-change' ... also to get the HTML of the rich text editor all in one go use .container.childNodes[0].innerHTML
quill.on('text-change', function (delta, oldDelta, source) {
// your code here e.g.
$("#htmlEditForm").html(quill.container.childNodes[0].innerHTML);
});

Text area is not capable of showing you the formats of rich text editors. A simple solution can be strip all tags if you do not want the tags in text area. Or if you want tags like bold, italic etc you have to use WYSIWYG editor. You can disable all tools of the editor and it would be looking like a textarea.

creditor - apply external stylesheet to the inner text in CKEditor textarea

I know similar question has been asked so much, but what I want is something else.
I like CKEditor but there is one thing bothering me, the inline styles. I want to get rid of it.
I have added this code to customise the drop down list:
CKEDITOR.stylesSet.add( 'default', [
// Block Styles
{ name: 'Blue Title', element: 'h3', attributes: { 'class': 'Blue' } },
{ name: 'Red Title', element: 'h3', attributes: { 'class': 'Red' } },
// Inline Styles
{ name: 'Marker: Yellow', element: 'span', attributes: { 'class': 'Yellow' } },
{ name: 'Marker: Green', element: 'span', attributes: { 'class': 'Lime' } }
] );
as you can see I didn't use any style for the elements, just classes. Now when I click the drop down list and select any of them, I get this:
<p><span class="Yellow">this is a paragraph</span></p>
which is good. BUT the drop down list has no style, and the text hasn't changed in the WYSIWYG textarea.
I tried
CKEDITOR.config.contentsCss = '/myStyle.css';
and put this code in it
#Yellow{
background-color: #ffff00;
}
#Lime{
background-color: lime;
}
but still nothing happens.
I use 'stylesparser' and 'stylescombo' plugins but still no luck. (or maybe I don't know how to configure them)
I have tried to put those lines of css in contents.css file but nothing happened.
I wanna know, is what I'm asking is possible in CKEditor? If Yes, How? If No, Is there any other editor which will give me this feature?
thanks a lot

well after digging so much into every thing, I found out that I'm using '#' sing in my css to define class style. after changing it to '.' everything goes as I expected. No inline styles and when I apple the style to a paragraph or a text, it becomes visual and there is no need for any extra plugin.

CKeditor removes style attribute even though set in allowedContent

I created a custom image browser/uploader plugin for ckeditor. I'm having some trouble integrating the advanced content filter
Basically what's happening is I have a field on a dialog tab that allows a user to edit the inline style for the image. This is working correctly it seems as the styles get added to the img tag and after saving to the database and when viewing the generated html the image is styled correctly. However when you go to edit the document again CKeditor has stripped out the style attribute.
in plugin.js I am setting the allowedContent property to include the style attribute
editor.addCommand( 'sbImageDialog', new CKEDITOR.dialogCommand( 'sbImageDialog',
{allowedContent: 'img[src][style]', requiredContent: 'img[src]' }
));
in the dialog js I am defining a tab called "advanced" that requires the style attribute to be allowed in order to show
{
id: 'advanced',
label: 'Advanced',
elements: [
{
type: 'text',
id: 'style',
label: 'Style',
requiredContent: 'img[style]',
setup: function( element ) {
this.setValue( element.getAttribute('style') );
},
commit: function ( element ) {
var style = this.getValue();
if ( style )
element.setAttribute( 'style', style );
else if ( !this.insertMode )
element.removeAttribute( 'style' );
}
},
]
}
since that tab does show up and the image is styled correctly when viewed it seems like I have it set up correctly.
So why is CKeditor stripping out the style attribute when I return to edit the document? Can anyone see what I'm missing?

I found the answer so I'll add it here in case it will help someone else.
Where in plugin.js I had
editor.addCommand( 'sbImageDialog', new CKEDITOR.dialogCommand( 'sbImageDialog',
{allowedContent: 'img[src][style]', requiredContent: 'img[src]' }
));
I had to change the allowedContent property from 'img[src][style]' to 'img[src][style]{*}'
The curly braces indicate what css style properties the element is allowed to have. By putting * I am allowing all css style properties.

TinyMCE - exclude elements

I'm wondering if it's possible to exclude some elements from TinyMCE's editable DIV. Here's an example code:
<div class="editable-area">
<h2>heading</h2>
<p>paragraph</p>
<div class="exclude-this-element"></div>
</div>
.exclude-this-element:empty:before { content: "Editable Area"; }
tinymce.init({
inline: true,
fixed_toolbar_container: '.toolbar'
});
tinyMCE.execCommand('mceAddEditor', false, '.editable-area');
The problem is that, when TinyMCE is initialized on .editable-area, it adds <br> tag to .exclude-this-element and Editable Area text stops appearing. Actually, I think that entire .exclude-this-element is erased after a while. Can this element be excluded completely from being altered by TinyMCE?
I would also like to attach some actions (like click or jQuery UI functions) to .exclude-this-element and make it not interfere with TinyMCE.
I tried valid_children, valid_elements and invalid_elements but I think that none of these can be used to exclude any elements from being editable (it only excludes them when saving the content of the editor): http://www.tinymce.com/wiki.php/Configuration

You can use content editable method
http://www.tinymce.com/wiki.php/api4:property.tinymce.Env.contentEditable and also
noneditable plugin. This plugin makes elements with noneditable class to be - non editable
http://www.tinymce.com/wiki.php/Plugin:noneditable
EDIT:
Try to block the BR elements by adding this in tinyMCE INIT configuration:
force_br_newlines : false,
forced_root_block : "",
convert_newlines_to_brs: false,
If the BR tags appear inside content when you paste it from somewhere you also can add this:
paste_preprocess: function(pl, o) {
o.content = o.content.replace(/<br><\/br>/gi, " ");
}