Develop Reference

Embed object to display PDF showing up as invisible

I am using Javascript to input an embed tag to my HTML to display a pdf. The object takes up space but doesn't display anything and is essentially invisible. I tried putting it inside an object tag as well but it doesn't work.
// Invisible
var pdfObj = document.createElement("embed");
pdfObj.setAttribute("src", "./test.pdf");
content?.appendChild(pdfObj);
The pdf file does exist and when I simply put this code in the HTML it displays fine but doesn't when I use javascript.
// works fine
<div class="content" id="main_div">
<embed src="../test.pdf" width="500" height="375" />
</div>
Here is how it shows on the HTML when I use Javascript:
Embed Screenshot
Thanks!

Firstly, welcome to Stackoverflow. You need to make clear pathway in javascript.
`pdfObj.setAttribute("src", "./test.pdf");` this is your code.
`pdfObj.setAttribute("src", "../test.pdf");` this is what it needs to be.
and
try firstly create the element. You just gave a name to document.createElement("embed"). So firstly create it then setAttribute. After that it will work
If this won't work let me hear. I will help as possible as i can

Is there a way to add alt text to an img tag using jquery?

There is an img tag being placed on a hidden portion of my wordpress site through some java script. Everytime I run a scan on my site looking for accessibility errors, this pulls up on every page of every site. I was wondering if there is a way to add an alt tag to it saying "this is empty" or anything really, since it's impossible to reach or see anyway.
I have tried looking at other alternatives, but I haven't had any luck so far, so any help would be greatly appreciated. The good thing is it seems to have a class name attached so hopefully that helps.
<div class="className">
<img>
<div>
</div>
</div

This is all you need:
$('img').attr('alt', 'Whatever you want');
or if you need it based on the class name in your example:
$('.className > img').attr('alt', 'Whatever you want');

Yes, you can always add attribute to an image using jquery, do it like this
$('img').attr('alt', 'This is very nice image');
If your image have a class than you can use
$('.class_name').attr('alt', 'This is very nice image');
If your image have a ID than you can use
$('#id_name').attr('alt', 'This is very nice image');

With this script you can set a default alt tag for all images that have a falsy alt tag (no alt tag, empty string, etc).
Important to note is that alt tags have a reason. People who use a text oriented browser (like blind people) use those alt tag so they at least know what kind of image there is. It is also used by some browsers when an image can't be loaded. So make sure all images without an alt tag (in your jQuery selection) are always hidden if you want a default alt tag otherwise it could be annoying.
$('img').filter(function() {
return !this.alt;
}).attr('alt', 'this is empty');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="className">
<img src="https://dummyimage.com/50x50/000/fff.png&text=test">
<img alt="" src="https://dummyimage.com/50x50/000/fff.png&text=test2">
<img alt="has alt" src="https://dummyimage.com/50x50/000/fff.png&text=test3">
</div>

Program my own WYSIWYG medium-like editor

As a project, I want to try programming my own WYSIWYG editor (kind of similar to https://github.com/yabwe/medium-editor ) or at least be able to edit the already created medium-like editor to include my own functionalities. Can someone give me guidance on editing the yabwe medium-editor to include my own functionalities? Which classes would I edit to include/delete a function. If I wanted to program my own editor, how do I get the editor to pop up when I highlight some text. Thank you!

What you need primarily is a div with contenteditable attribute. You can set data inside it using dangerouslysethtml prop in react or setinnerhtml in normal javascript. You will be able to type inside it, and use onChanged event to capture the changes inside the div and make the text styles inside this function
document.getElementById("inner").innerHTML = "Paragraph changed!";
#inner{background:yellow}
<!DOCTYPE html>
<html>
<body>
<div class="outer" contenteditable="true">This is a paragraph. <span id="inner"></span> Try to change this text.</div>
</body>
</html>

Send text without html tags

I want to build some function in JavaScript, that sends text from textarea to a div.
I want it do the following
If the user tries to send html source to a textarea, it will show the
text, and not the actual html source.
For example:
If the user tries to send: <img src='aa.png'>
I want to see in the div the text: <img src='aa.png'>, and don't want to see the actual image: aa.png

Use .innerText or .textContent instead of .innerHTML
eleme.innerText="<img src='aa.png'>"; where eleme is your div
DEMO:
document.getElementById('test1').innerHTML="<img src='aa.png'>";
document.getElementById('test2').innerText="<img src='aa.png'>";
document.getElementById('test3').textContent="<img src='aa.png'>";
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
You can read more for differences between this three commands and others Here

How to keep line breaks in CKEditor WYSIWYG editor

I have an HTML code as follows
<div class="editable" ...>
<div class="code">
This is an example.
This is a new line
</div>
</div>
In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes
<div class="code">
This is an example.This is a new line
</div>
The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.
I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?

I found it.
// preserve newlines in source
config.protectedSource.push( /\n/g );
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource

$(document).on('paste', 'textarea', function (e) {
$(e.target).keyup(function (e) {
var inputText = $(e.target).val();
$(e.target).val(inputText.replace(/\n/g, '<br />'))
.unbind('keyup');
});
});

Use the <pre> HTML tag. Like this:
<div class="editable" ...>
<div class="code"><pre>
This is an example in a "pre".
This is a new line
</pre></div>
</div>
<div class="editable" ...>
<div class="code">
This is an example NOT in a "pre".
Therefore this is NOT a new line
</div>
</div>
Or you can put a <br/> tag in between your lines. Its the ssame as hitting enter.

In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:
CKEDITOR.dtd.$block.univis=1;
CKEDITOR.dtd.$cdata.univis=1;
CKEDITOR.dtd.univis=CKEDITOR.dtd.script;
But that looks like it might or might not be extensible to classes.

I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.