Develop Reference

How to show image in place of a user input URL in a textarea field?

Using NodeJS, Express and MongoDB, i have a text area for a user to add text to a blog.
What I want is for the user to be able to put image URL inside the text area and submit his post, and the application will show an image in place of that URL. How can I do that ?
I've tried to simply add a URL into it, but it doesn't work. I've also tried to add strong tags to some text but it doesn't get applied. As I will be the only one user able to post, I would also like to have that functionality.
Here is the HTML part to create a new post :
<div class="field">
<label>Contenu</label>
<textarea name="body"></textarea>
</div>
To show the post (I'm showing only the body part) :
<div class="description">
<p><%=blog.body%></p>
</div>
And in case you want to see my CREATE route for the post (which does work) :
router.post('/blogs',middleware.isLoggedIn,function(req,res){
var titre = req.body.title;
var image = req.body.image;
var body = req.body.body;
var author = {
id : req.user._id,
username : req.user.username
}
var newBlog ={title:titre ,image:image, body:body, author:author};
Blog.create(newBlog, function(err,newBlog){
if(err){
console.log(err);
res.render('blog/new');
}
else
{
console.log(newBlog);
res.redirect('/blogs');
}
});
});
What I want is the user input (only me for posts) to be translated to image for URL input or font style when I use tags like 'strong' in a textarea.

You can't display an image directly inside a textarea control.
The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.
Perhaps a writable div (content editable) would suit your purposes better. html
but you can use the contenteditable attribute specifies whether the content of an element is editable or not.
Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.
<div contentEditable="true"> type here
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>
but read this link: Why ContentEditable is Terrible

Creating Extra Button with only Paragraph Functionality in Jodit WYSIWYG HTML Editor

I'm working on a small CMS application, and I've been using Jodit editor (v3) as the WYSIWYG html editor. This is mainly because I'm rendering in the current text with EJS, and other editors didn't want to render that info properly into other WYSIWYG editors (CKEditor, TinyMCE, Quill). For this project, Jodit has been installed and configured through npm and grunt.
I'm having trouble creating an extra button with the functionality of formatting the current selection to a paragraph. The editor comes with 'paragraph' functionality, but this drop down includes headings and a quote formatting option, which I don't want the user to have (for the moment). The extra button in this example doesn't have an icon yet, but you are still able to click the button next to the current "paragraph" option.
Jodit editor (v3): https://xdsoft.net/jodit/doc/
Jodit editor methods: https://xdsoft.net/jodit/doc/methods/
Relevant HTML: (note: I am rendering the text inside the editor using EJS normally, but I believe this sample info will suffice)
<textarea name="value" class="form-control" id="html-editor"><h1>Testing</h1><p>Lorem ipsum ....</p></textarea>
Relevant JS:
var editor = new Jodit('#html-editor', {
buttons: ['bold','italic', 'paragraph'],
extraButtons: [{
name: 'OnlyParagraph',
icon: '',
exec: (editor) => {
var selection = editor.selection;
var text = editor.selection.getHTML();
console.log(text);
var html = '<p>' + text + '</p>'
console.log(html);
editor.selection.remove();
editor.selection.insertHTML(html);
}
}]
});
Essentially, I want to be able to select my element and turn it into a paragraph. Is this isn't easily accomplishable with an extra buttons, can the default dropdown of the 'paragraph' button be adapted to only offer the paragraph formatting option (none of the heading or quote options are desired at this point in time).
Thanks for your time and help in advance.

It's a cop-out, but using this CSS:
.jodit_toolbar_btn-h1,
.jodit_toolbar_btn-h2,
.jodit_toolbar_btn-h3,
.jodit_toolbar_btn-h4,
.jodit_toolbar_btn-blockquote {
display: none !important;
}
Will hide all but the "Normal" button for the paragraph dropdown.

Get selected text in an input box

Is it possible to get the selected text in an input box of a website, using either jQuery or vanilla JavaScript?
I have tried with var selectedText = window.getSelection().toString();,
but this code only gets the text in a paragraph and not in an input box.
EDIT: Maybe I was unclear, I want to get the text from a website that I didn't create. I'm building a Chrome extension and I need to get the text from an input box of a website.

Here is a solution:
function showSelectedText() {
var input = document.getElementById('text');
var selection = text.value.substring(input.selectionStart, input.selectionEnd);
alert(selection);
}
<input id="text" value="Hello, how are you?"><br>
<button onclick="showSelectedText()">Show selected text</button>

If you don't mind using jQuery plugins you can accomplish that by using this one http://madapaja.github.io/jquery.selection/
It's flexible (You can use it both for inputs and for paragraphs)

In Ckeditor how to copy/get all formatting from a selected text

I am using CKEditor ver.3.6 in my Asp.net MVC 3 Application.
My requirement is to create Paint format option in the Google doc.I need to implement Paint format option in a ckeditor.
In Ckeditor how to copy/get all formatting such as font, font effects, centered paragraph alignment from a selected text(source) to a newly selected text (destination).
Please suggest a proper solution.

Use this function to replace the content of a selected html with the text in one field. On a button click, call this function:
function Replace()
{
var sel = editor.getSelection();
var ele=sel.getStartElement();
if(ele.hasAttributes())
{
var insertele= editor.document.createElement('span');
ele.copyAttributes(insertele,{type:1,value:1})
insertele.setHtml($("#repTxt").val());
editor.insertElement(insertele);
}
}

Replace selected content in the ckEditor with new content using javascript

I am using CKEditor ver.3.6 in my MVC Application.
My requirement is to update the selected text with new text in the ckEditor. I could find out the method editor.getSelection().getSelectedText(); for getting selected text from the editor. I need to add some tag with the selected text when a toolbar button is pressed and update the selected content using javascript.
For Example :
Content in the ckEditor is
<span>Edit content in the editor</span>
and I have selected the word “editor” from ckEditor. I have to update the selected word “editor” with “ckEditor” using javascript code.
Please suggest a proper solution.

It looks to me from the docs as the following would work (untested):
editor.insertText("ckEditor");

Use this function in the onclick event of a button.
function Replace()
{
//after selecting the text in the editor
//get text to replace;
var repStr=$("#repTxt").val();
editor.insertHtml(repStr);
}
Cheers
Sunil Raj

Both editor.insertText() and editor.insertHtml() should work, but you have to make sure the editor is ready before you attempt to update the text:
var editor = CKEDITOR.replace('editor');
editor.on('instanceReady', function(){
editor.insertHtml('...');
});