I am having a problem in TinyMCE when I use paste_as_text: true in conjunction with forced_root_block: false. Pasting already plain-text in works fine, but pasting from Word adds extra <br> tags between every newline. It's not like I can simply parse these out, because that breaks correct double-newlines from plain text.
I have noticed that pasting with ctrl-shift-v fixes this issue, and would love to make that the default pasting method, but can't find how.
I'm currently trying to write a parser to use in paste_preprocess, but since it's possible to do in other ways, I figure there must be a better solution.
Pasting from Microsoft Word is broken in must copy and paste/Cliboard APIs. you will need to modify Newline.js or Clipboard.js manually.
For example, replace line 63 in Newline.js:
return p.split(/\n/).join('<br />');
with:
return p.replace(/\r?\n/g, '<br>');
If you can open an issue on the plugin page, I will create a proper pull request.
Related
I am using TinyMCE as my editor. If I use setContent method provided by TinyMCE, I can see the paragraph getting inserted into the editor. Then I use the save method, to make sure the hidden textarea is also inserted with the same content. But when I use checkValidity method of Javascript for the form, it doesn't recognise the content.
But when I simply copy content from a website and paste it (Ctrl + V literally) into the TinyMCE editor, checkValidity then works, it doesn't fail.
I am not sure what is the difference between setContent and copy/paste into the editor. Can some one explain it to me conceptually? If I understand this, probably I can come across a solution as well. Or if you have faced this issue, then please let me know how this was resolved.
I'm trying to automate the modification of text in an online rich text editor. Here is a similar example of the type of text editor I'm talking about: https://www.slatejs.org/examples/richtext The one I'm dealing with is more sophisticated: it allows you to have links in your text.
I've figured out how to get this RTF text into my clipboard. I've also figured out how to paste my clipboard into the text editor. But, what I haven't figured out is how to modify the RTF in my clipboard in an automated way; I can paste it into Google Docs, modify it by hand, copy it, and then paste it back in, but I don't want to take those manual steps.
To keep it simple, let's say I want to prepend a line that says Link and goes to www.example.org when you click on it. I want the rest of the content to remain the same.
I don't really care what kinds of crazy steps I have to do between having the code in my clipboard and getting the modified version back in my clipboard, so long as it's automated. I'm developing in node.js, so I'd like a solution in that language.
I've been googling for a while now, and I can only find libraries that convert from RTF to something, or vice versa. I haven't found any libraries that actually modify the RTF and keep it as RTF.
I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.
I am creating an option on my forum to include external text via a button that will include it formatted into a textarea. I am getting the text via copy and paste into a prompt but the string is returned as one big wall of text, the line breaks are gone. Is there anyway to preserve them or is this an issue with the actual copying of the text?
This is what I have so far:
function createExText(textbox) {
var extext = window.prompt('Enter external text:','');
var formattedextext = '[extext]'+ extext +'[/extext]';
insertAtCaret(textbox, formattedextext);
}
I do not know any browser implementation of prompt that allows multi-line content. You could create a custom modal implementation with a textarea inside to simulate it.
As #RGraham commented, some browsers like Google Chrome actually preserve the line break characters if you paste an external text into it, however it is shown in only one line inside the dialog. I'd not stick with this solution as it is not user friendly and doesn't seem to work cross browser.
I'm aware of what WYMEditor is all about and that using Paragraphs for spacing is not intended, however the problem here is with the client requiring that we give them this functionality.
I've looked high and low to find where WYMEditor does it's stripping of whitespace and can't seem to find it at all.
It seems that when you press enter it creates a P visually, however when clicking the source it doesn't contain it. Furthermore, manually editing HTML source to contain <p> </p> doesn't work, as WYMEditor strips it out.
Just wondering if anybody has had this issue before and knows how to get rid of this functionality? It's worth noting that I believe the replacement is happening both in the 'text' module of Django-CMS, and also in the Javascript for WYMEditor.
Turns out, the function that does this stripping is very simply named, for some reason I missed it in (multiple!) searches for the word 'empty' in the script file.
It's located in jquery.wymeditor.js, line ~3440 there is the function WYMeditor.XhtmlSaxListener.prototype.removeEmptyTags, simply stop the replacement:
WYMeditor.XhtmlSaxListener.prototype.removeEmptyTags = function(xhtml)
{
return xhtml;// .replace(new RegExp('<('+this.block_tags.join("|").replace(/\|td/,'').replace(/\|th/, '')+')>(<br \/>| | |\\s)*<\/\\1>' ,'g'),'');
};
That obviously stops the stripping of whitespace!