I have a tinyMCE editor and I want to build 2 buttons that allow raw/styled copying to clipboard of the text.
Raw works perfectly with getContent({ format : 'text' });
the copyRich2Clip function should mimic the browser behavior of keeping the styling when copying the text. With the below function, when I paste to word it just shows the html tags.
How can I get the tinyMCE content in a format that can be pasted with the applied styling so that it will look the same in word as in the browser editor instance?
function copyRich2Clip() {
var copyText = tinyMCE.activeEditor.getContent();
var dummy = $('<input>').val(copyText).appendTo('body').select()
document.execCommand("copy");
dummy.remove()
}
Thanks
I managed it with the execCommand, selectAll and copy
tinyMCE.execCommand('selectAll',true,'id_text');
tinyMCE.execCommand('copy',true,'id_text');
Related
This question is very similar to the following question posted here Copy output of a JavaScript variable to the clipboard , but there are a few things unanswered, which i cant figure out. This approach works, but my test var is actually a string on multiple lines, because it contains a few html tags and once copied, each tag with information must appear separate on a line. However once i copy it, on the clipboard this gets copied all in 1 line. How can i modify this in order to copy it properly on multiple lines?
testingVarTest(testvar);
function testingVarTest(testvar) {
var dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=testvar;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
As said in the comments, an input doesn't have line breaks, so just replace input with textarea in your code
I'm creating a new editor by using:
CKEDITOR.replace( textAreaName );
It's replacing the textarea, but the value of the text area (which was set dynamically in javascript) is not showing in the editor.
Prior to creating the editor, I run:
textArea.value = "Test value";
textArea.innerHTML = "Test value";
But this still does not show in the editor. How do I get the editor to use its value?
The node was created but not yet added to the document. CKEDITOR cannot create an editor until the source element has been placed into the document.
In CKEditor I wants to differentiate between pasted content and the content added by the user. So, on paste event of ckeditor I am changing the p tags of copied content to div so that all new paragraphs are represented by div tags for copied code. Below is the code.
editor.on('paste', function(evt) {
evt.data.dataValue = data.replace(/(<p)/igm, '<div').replace(/<\/p>/igm, '</div>');
});
This works fine but after doing this when I am pressing enter and trying add any new content ckeditor is adding a new div tag to wrap the content whereas I have this declaration present in my config
config.enterMode = CKEDITOR.ENTER_P;
config.shiftEnterMode = CKEDITOR.ENTER_P;
I tried to change the enter mode in after paste event but didn't helped.
editor.on('afterPaste', function(evt) {
editor.setActiveEnterMode(null);
});
Any suggesttions?
You should not mix <div>s with paragraphs. The content inside the editor should be clean and by making it inconsistent you make it messy. This may cause more issues in the future.
Try the config.forceEnterMode option. By default CKEditor uses the block that you're currently in (to be consistent). With this option you are forcing it to use the block from the enter mode.
I was wondering if it were possible to preformat text that is inside a textarea. Right now I have a textarea code that I want to add syntax highlighting and also add linenumbers so I am trying to wrap the text inside a pre tag. Is this correct or should I be doing something completely different?
<textarea id="conversation" class="codebox" style="font-family:courier;">
<pre class="brush: js;">// Start typing...</pre>
</textarea>
textareas are not able to render content like you're wanting to do, they only display text. I would suggest an in-browser code editor. A good one is CodeMirror, which is fairly easy to use:
HTML
<textarea id="code" name="code">
// Demo code (the actual new parser character stream implementation)
function StringStream(string) {
this.pos = 0;
this.string = string;
}
...
</textarea>
Javascript
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true
});
And CodeMirror insert an editable block with that content within the new editor.
There are other options. Wikipedia has a comparison of Javascript-based source code editors entry.
Having the Pre tag contain the textarea works in Chrome
The textarea element content is treated as preformatted in implementations, though browsers by default line wrap the text if a line is longer than specified by the cols attribute. The wrapping can be disabled using the nonstandard but widely supported attribute wrap=off.
The textarea element is not adequate for mere display of content, though. Neither is it suitable for setting up an input editor with formatting features, since all markup inside textarea is taken literally.
I have a regular texbox control. I need to highlight some words with a red color. Is it any possible to do with JavaScript (jquery or anything else)?
Most rich text javascript editors use an iframe with designMode='on' since that yields the best cross browser results:
<iframe ID="rtbox"></iframe>
To make the iframe editable and insert rich text via Javascript you can use the following sample code:
var rtbox = document.getElementById('rtbox');
var doc = rtbox.document ? rtbox.document : rtbox.contentDocument;
doc.designMode = 'on';
doc.body.innerHTML = 'one <span style="color:red">red</span> word';
No, you can't do that. Your only way would be to use a rich text editor component like FCKEditor or similar.
No you cannot use different styles in a standard <textarea>.
I recommend using TinyMCE for a rich text editor.
And no, what you say is not possible on a normat textarea.