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.
Related
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');
I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:
do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1
I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>
Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.
After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>
The following did not work (wrapped in Applescript):
document.getElementById('tinymce').value ='INSERT TEXT HERE';
It produces the error: "missing value".
As per #WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:
document.getElementsByTagName('p')[n].innerHTML ='Insert text here';
I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.
You need to access the <p> element, which is just after the body of the document, as such...
document.getElementsByTagName('P')[0].innerHTML = 'your text'
The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].
The innerHTML property will allow you to set the contents of the <p> element.
Following is a good JavaScript reference...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
The following reference is for the web page, or Document Object Model (DOM).
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.
http://www.tinymce.com/
Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...
document.getElementsByName('fax_text')[0].value = 'This is my text!';
document.getElementsByTagName('textarea')[0].value =
document.getElementsByName('fax_text')[0].value +
'\nThis is additional text...';
<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>
This text field is in an iFrame.
This iFrame contains an HTML document (<html><head><body>).
To get this document, you need the_iFrame.contentDocument.
do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1
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 am trying to write a drag and drop html editor using tinymce and initialize it as inline, it is work correctly.
But in a part I have a duplicator of an element that do this:
$(obj).parent()[0].outerHTML += "\n\n"+$(obj).parent()[0].outerHTML;
After execute this part, tinymce do not work for this element and new element that created.
In another part I have a html code editor, if user change html codes tinymce do not work at all!!
why??
I change duplicator to:
$(obj).parent()[0].outerHTML += "\n\n"+$(obj).parent()[0].outerHTML;
initTinymce(); //this is my initilizer function
But...
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.