On copy paste and key press formatting issue in editable content - javascript

i have any issue when i copy some rich text from like web page or word file to editable content in my site <p contenteditable> edit-table content </p>
than copy text font property auto set here like text color , style etc
so i use below code for set original formatting
var c1 = $(document).on('paste', '[contenteditable]', function (e) {
if(c1){
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
return false;
}
});
and its working when paste , but if i remove text and type on content than pasted text property set here like their color , css , font-bold etc , not to set plain/text,
so how to set rich text to plain/text in type on editable content ?

Related

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

Change Text Color if match found automatically JavaScript|HTML

i have a textarea where i want to change color automatically
for example : this is my pen my friend
as soon as i enter the above text the keyword=pen should become green color and
keyword=freind should become red as soon it matches
How do i achieve this thing
code is working but half working
function changeText()
{
document.getElementById("text").style.color ="green";
}
</script>
Another Code i have But not Working
var str = 'Connect';
var value = str.includes('Connect');
if(value==str)
{
document.getElementById("text").style.color ="green";
}
else
{
document.getElementById("text").style.color ="red";
}
No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input, not just a word.
see for more info: Multicolor Text Highlighting in a Textarea or Text Input
First, you'll need to detect changes on the text area. Look into element.addEventListener() and the change event. Then inspect the text from the text area. You have bunch of options for this, but the easiest one is string.includes(). If it returns true, call your function to turn the text green.

Flask form with rich text in-place editing

I want to let approved users edit their own Rich Text form posts. I know about TinyMCE, CKEditor, X-editable, wtf_tinymce etc. but I cannot find a single consistent example of being able to post form data from an inline editable rich text field.
This 'Flask Biography' page comes closest I believe but it looks complex; TinyCME also has an inline editing example but that requires a div element rather than a conventional form one, so I don't see how to get the data from that.
How do I use a rich text editor on a Flask form field?
The SO Python chat room has a website, https://sopython.com/ with a wiki and some other tools. We use Ace as a text field enhancement. Other text editors presumably work similarly.
Create a basic text area as normal, and mark it in some way to indicate that the editor should replace it. Use the editor's JavaScript API to create an editor, link it to the text area, and replace the text area. Submitting the form still submits the text field, which is updated by the editor.
Here's how we integrate Ace:
<textarea data-editor="markdown"></textarea>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script type="text/javascript">
// https://gist.github.com/duncansmart/5267653
// find each text area marked to have an editor
$('textarea[data-editor]').each(function() {
var textarea = $(this);
var mode = textarea.data('editor');
// create the editor div
var div = $('<div>', {
'width': textarea.outerWidth(),
'height': textarea.outerHeight(),
'class': textarea.attr('class')
}).insertBefore(textarea);
// hide the original text area
textarea.hide();
// configure the editor
var editor = ace.edit(div[0]);
var session = editor.getSession();
editor.setTheme("ace/theme/github");
session.setValue(textarea.val());
session.setMode('ace/mode/' + mode);
session.setNewLineMode('unix');
session.setTabSize(4);
session.setUseSoftTabs(true);
session.setUseWrapMode(true);
// update the text area before submitting the form
textarea.closest('form').submit(function() {
textarea.val(editor.getSession().getValue());
});
});
</script>

JSFL autowrap textfield

I am struggling with JSFL text fields. I want to put a text field on stage with a static width of 220px. So if the string that is put into the text is longer than that it auto wraps to the next line.
Any suggestions?
doc = fl.getDocumentDom();
doc.addNewText({left:0, top:0, right:220, bottom:200});
doc.setElementProperty("textType", "static");
doc.setElementProperty("width", 220); // fails miserably -- text field is huge
doc.setTextString(value);
// Setting the width after the text is entered scrunches the text -- doesn't wrap
// doc.selection[0].width = 220;
So I took a look at your JSFL issue and through this I have found that I never want to work with Flash text boxes in JSFL again...haha. I was able to create a text box with a width of 220 px on the stage and have it populated with text using the code below. One of the main issues I ran into was that static text boxes don't allow you to adjust the line type property so you create one as dynamic first and set it to multiline, then set it to a static text box, and for some reason that worked.
// Add Text To Stage - Andrew Doll
// 09-13-13
var dom = fl.getDocumentDOM();
if (dom == null)
{
alert('Please open a file.');
}
else
{
// String of text to test with.
var value = 'This is a test string to make sure what I am doing is working correctly.';
// I have no idea why but for some reason Flash will add 2px to the width of the box created so I just used 218 instead of 220.
// Add a text box to the stage.
dom.addNewText({left:0, top:0, right:218, bottom:200});
// Set the size of the text bounding box.
dom.setTextRectangle({left:0, top:0, right:218, bottom:200});
// Static text boxes don't allow you to use lineType so use dynamic then set to static afterwards.
dom.setElementProperty('textType', 'dynamic');
// Allows multiline text.
dom.setElementProperty('lineType ', 'multiline');
// Limits the text box from expanding in size.
dom.setElementProperty('autoExpand ', false);
// Set the text box to static.
dom.setElementProperty('textType', 'static');
// Set the string of text into the text box.
dom.setTextString(value);
}
I hope this helps you out. Let me know how it works out for you.

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

Categories

Resources