Remove styles when pasting from Word or other source - javascript

I'm trying to set it up so that when I paste text, specifically from Word or another source, all the styling will be stripped. I'm happy to let bold and italic styles stay as well as lists and so forth, but the rest should go.
How can I do this?
I know there is a plugin that will allow me to do this if I paste via clicking a button but I'm looking for if someone presses CTRL+V or command+V.
Any help?

I am using TinyMCE with the paste plugin an the following setup:
paste_create_paragraphs : false,
paste_create_linebreaks : false,
paste_use_dialog : true,
paste_auto_cleanup_on_paste : true,
paste_convert_middot_lists : false,
paste_unindented_list_class : "unindentedList",
paste_convert_headers_to_strong : true,
paste_insert_word_content_callback : "convertWord",
And it does just that: When you hit "Ctrl-V", a dialog pops up letting you paste in your contents, which gets autocleaned from any Word related stuff.
You may also need this no-op callback:
function convertWord(type, content) {
switch (type) {
// Gets executed before the built in logic performes it's cleanups
case "before":
//content = content.toLowerCase(); // Some dummy logic
break;
// Gets executed after the built in logic performes it's cleanups
case "after":
//content = content.toLowerCase(); // Some dummy logic
break;
}
return content;

Try not loading the paste extension.

Related

TinyMCE: how to let user mark text when "readonly: true;"

I want to let users select (and copy) text within TinyMCE.
I'm not quite sure, but it seems regarding security that browsers don't allow that.
This Codepen is from the official TinyMCE site:
https://codepen.io/tinymce/pen/NGegZK
Here you can select text.
When you add there the following parameter in the 2nd line of the JavaScript as followed, then you can't longer select text.
readonly: true,
How can I set "readonly: true" and let the user still select text?
I appreciate any help.
I faced this problem too. Moreover, the inability to select text is nothing compared to the inability to click links. I've submitted an issue about this a while ago, but there is still no reaction.
You can use a workaround for now (codepen):
readonly: 1,
setup: function(editor) {
editor.on('SwitchMode', function() {
if (editor.readonly) {
editor.readonly = 1;
}
});
}
It exploits the fact that the event-blocking code uses strict comparison internally (readonly === true) while the rest of the code works fine with any other truthy value, e.g. 1. Of course, this hack might stop working after an update in the future, but it's much better than nothing.
Update: better switch to the inline mode (codepen) if you use this hack. Otherwise clicking links leads to a mess.
I have checked the source code of the lastest nightly and it seems that the behavior is hardcoded. All events are discarded if the editor is in readonly mode. Which means that selection events are discarded too :
var isListening = function (editor) {
return !editor.hidden && !editor.readonly;
};
var fireEvent = function (editor, eventName, e) {
if (isListening(editor)) {
editor.fire(eventName, e);
} else if (isReadOnly(editor)) {
e.preventDefault();
}
};
I might be wrong but I don't think you can change this behavior through customization.
Regards
I solved this issue for achieve readonly mode by myself, I would create an iframe dom node and put the editor's html segment into it.
renderReportPreview = contentHtml => {
const iframe = document.querySelector('iframe[name=preview]')
if (iframe) {
const cssLink = document.createElement('link')
// cssLink.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
// I prefer semantic-ui, semantic-ui is more like tinyMce style
cssLink.href = 'https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css'
cssLink.rel = 'stylesheet'
cssLink.type = 'text/css'
iframe.contentWindow.document.head.appendChild(cssLink)
// I escape the origin editor's content, so I need decode them back
iframe.contentWindow.document.body.innerHTML = htmlDecode(contentHtml)
const allTables = iframe.contentWindow.document.body.querySelectorAll(
'table'
)
Array.from(allTables).forEach(table => {
// ui celled table for compatible semantic-ui
// table table-bordered for compatible bootstrap
table.className = 'ui celled table table-bordered'
})
this.setState({
previewRendered: true,
})
}
}
More detail on https://github.com/tinymce/tinymce/issues/4575
It was previously possible to select text in readonly mode, until the fix for #4249 broke it in 4.7.12.
We've just started tracking a fix that allows text to be selected and links to be clicked, follow either of the tickets linked here to be updated when we release a fix.

tinymce performance - loading css multiple times

I have a page with tons of tinymce enabled text areas which it is taking a huge amount of time to load. It apparently is requesting the same css file (content.min.css) once per textarea.
So is there a way to speed up a page that has this big number of tinymce areas?
I'm initializing each one independently because I'm setting each editor with an independent function.
tinymce.init({
theme: 'modern',
plugins: 'link lists code textcolor',
toolbar1: 'undo redo ...',
menubar: false,
forced_root_block: false,
selector:'textarea[unique_id=' + unique_id + ']',
setup : function(ed) {
var change_func = function(e) {
input.val(ed.getContent());
debounce_func();
}
ed.on('keyup', change_func);
ed.on('change', change_func);
}
});
Thanks!
EDIT:
I wondered if initializing all at once would be better, so I made it to initialize all textareas with a single call to tinymce.init but it did not make any improvement
If you are using the standard approach to loading TinyMCE it will have to load that CSS for each editor as each one is in a separate iFrame which is (effectively) like a separate browser window. They can't share the CSS across the iFrames.
If you use inline mode instead the CSS would be loaded once as there is only ever one instance of the editor actually invoked on the page.

Handle Ctrl+Z (undo/redo) for text editor in single page application

I have single page application which consists of a text editor (kendo Editor). The data in the text editor are replaced somewhat like this
$("#editor").kendoEditor({
resizable: {
content: false,
toolbar: true
}
});
var editor = $("#editor").data("kendoEditor");
var setValue = function () {
editor.value($("#value").val());
};
see demo here.
The Issue:
So I am changing record of A then save it. Then I switch to B. Now if I do Ctrl+Z the text editor shows the record of A. How can I prevent this behavior.
Is a way to remove the undo history on demand, or something which would prevent the text editor replacing text with previous record?
Updated: Better Solution.
I contacted Kendo devs and they provided a neat solution.
var editor = $("#editor").data("kendoEditor");
editor.undoRedoStack.clear();
Note: this function is not documented in the public api and is
may change in newer version. This is working as of version
2016.3.1118
demo
Old Solution.
I ended up destroying and rebinding the widget to the textarea.
http://dojo.telerik.com/OjIZe
$("#destroy").click(function(){
var copy=$("#editor").clone();
$("#editor").data('kendoEditor').wrapper.find("iframe").remove();
$("#editor").data('kendoEditor').destroy();
$("#test").empty();
$("#test").append(copy);
$("#editor").kendoEditor({ resizable: {
content: false, toolbar: true
}
});
});

Codemirror, how to add add-ons

I am trying to add the scroll past end add-on for codemirror but I cannot add it to my codemirror instance.
I tried calling it like this scrollPastEnd: true in the options but that didn't work. I also tried using the defineOption function but the console says it is undefined.
Thanks for the help
First, you have to add the scrollpastend.js file (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/scroll/scrollpastend.min.js) to your HTML document and not to the editor.
As the following code from scrollpastend.js file says, the scrollPastEnd option is off by default:
CodeMirror.defineOption("scrollPastEnd", false, function(cm, val, old) {..});
Then It only remains to activate your add-on by setting new option like this:
editor.setOption("scrollPastEnd", true);
or adding scrollPastEnd option to the object option list:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "html",
lineNumbers: true,
scrollPastEnd: true
});
Hoping to help you, I wish you a good day.

Changing the parameters of a Javascript function using GreaseMonkey

There are a lot of questions here about Greasemonkey, but I didn't see anything directly related to my question.
I'm on a website that uses a text editor control, and it's really annoying that they don't allow horizontal resizing (only vertical). So if you are using a cheapo projector that only supports 1024x768, the text runs off of the screen and there's nothing you can do about it.
I looked at the page source, and found the section of code that I want Greasemonkey to modify:
<script type="text/javascript">
// TinyMCE instance type: CD_TinyMCE
tinyMCE.init({
convert_urls : "",
mode : "specific_textareas",
editor_selector : "rte",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
**theme_advanced_resize_horizontal : false**,
...
I just want to change the boldfaced value to true. I tried to approach this the brute force way and replace the text this way:
function allowHorizontalResize() {
var search_string = "theme_advanced_resize_horizontal : false";
var replace_string = "theme_advanced_resize_horizontal : true";
var doc_text = document.body.innerHTML;
document.body.innerHTML = doc_text.replace( search_string, replace_string);
}
...but it doesn't work. However, I know the basic search and replace part works because I can use this script to replace text within the editor -- I just can't change the javascript code that initializes the text editor.
Can someone explain what I'm doing wrong? Is this even possible?
Try the simple direct approach, first. Your Greasemonkey script could be as easy as:
GM_addStyle ("#content_tbl {width: 900px !important;}");
-- which works on a default TinyMCE window.
Altering the javascript source code is probably not going to easily work. But, the Devil is in the details.
Provide a link to the page or pastebin the complete code.
No, the script will have already executed when you apply the function.
You will have to get the text editor's element, and apply the properties manually(assuming it is an element).
A link would make me more helpful.

Categories

Resources