Scroll to the bottom of ckeditor - javascript

any ideas on how to scroll to bottom of a ckeditor editor using javascript / jQuery?
I cant find anything.
All my search shows is:
document.getElementById("ID").contentWindow.scrollTo(0,3);
Which gives me an error of contentWindow is undefined.
The class of the ckeditor text part appears to be "cke_editable".
Any help on scrolling to the bottom of the editor?

Access the editor and get the editable area via that instead of getting the DOM element directly. Like so:
var editor = CKEDITOR.instances.editor1;
var jqDocument = $(editor.document.$);
var documentHeight = jqDocument.height();
jqDocument.scrollTop(documentHeight);
This works in the Demo: http://ckeditor.com/demo (you need var $ = jQuery; if you try it in the console).
Note that your editor might not be named "editor1" - use the appropriate name for you.

Related

How to add <span> within CodeMirror editor?

No jQuery please!
I'd like to add a styled span within the body of a CodeMirror editor. This is for the purposes of a mail merge like application where you can for instance do: (From Zapier)
I believe this may be possible using a CodeMirror Widget but I'm lost as to what direction to go in. I found an example of something similar (albeit far more complicated) here.
I also tried tagify which is extremely similar to what I'm after but doesn't have multi-line inputs, which is a requirement.
All I need is the ability to add and remove (via backspace with the caret just behind the tag) these spans but there doesn't appear to be a simple solution.
Also if there is a convenient library or some other direction I can go in not involving CodeMirror that'd also be fine.
CodeMirror is actually well suited for this.
First insert some placeholder into the document, such as [[tag]].
var lineNumber = 0;
var charNumber = 0;
var snippet = "[[tag]]"
editor.doc.replaceRange(snippet, {line:lineNumber, from: charNumber});
Then create your DOM element, I recommend a span.
var htmlNode = document.createElement("span");
//Style and add what you like to the span
Then use doc.markText to replace it with that node.
editor.doc.markText({line: lineNumber,ch: charNumber}, {line: lineNumber,ch: charNumber + snippet.length}, {
replacedWith: htmlNode
})

How to Modify Element in CKEditor

I have CKEditor with config.fullPage = true;, so I have an entire document to work with.
My goal is to automatically find and modify the action of all form elements in the CKEditor content. I've tried using the method of converting the html string to jquery and back with no luck (I think it's because I'm working with a full document).
Any help is greatly appreciated!
If editor is the instance of your CKEditor, then calling editor.editable().$ will get you the native body element of the iframe, then you can keep using DOM methods or jQuery if you prefer.
jQuery(editor.editable().$).find('form').attr('action', '');
UPDATE
check this CKEditor Jquery Adapter and you can also get HTML of the element with .getHtml .
ANOTHER UPDATE
$("#mybutton").click(function(){
var editor_contents = CKEDITOR.instances[YOUR_TEXTAREA_ID].getData();
var dom = document.createElement("DIV");
dom.innerHTML = editor_contents
var plain_text = (dom.textContent || dom.innerText);
alert(plain_text);
});

inject into iframe from wysihtml5 text area

I've turned a simple text box into one with editing features using the wysihtml5 editor. The project necessitates that the text box inject its html into an iframe. Previous to installing the editor, things were working great. Now, the jQuery for the iframe injection no longer works, since the editor has converted the textarea to an iframe. Any ideas on how I might convert the following jQuery to work with the editor?
(function() {
var frame = $('iframe#preview'),
contents = frame.contents(),
body = contents.find('body'),
styleTag = contents
.find('head')
.append('<style>*{font-family:arial}h2{color:#CC6600}</style>')
.children('style');
$('textarea').focus(function() {
var $this = $(this);
$this.keyup(function() {
body.html( $this.val() );
});
});
})();
I know that something needs to change in the $('textarea').focus call, I just don't know what. I'm new to the javascript/jQuery world and have tried a few possibilities, but so far haven't been able to figure this one out.
Many thanks for any insight.
As i know (probably i know what im talking), you cannot apply css styling to iframes outside of iframe (from parent document). You should TRY to embed styling inside iframe. Its because browser styling works with document, but iframe its another document and must ship with own css styling. Hope this helps

Styling the preview in CKEditor with CSS

I have integrated CKEditor into my website CMS. The Preview button works but I cannot get it to use stylesheets (CSS). I have edited the preview.html located in:
Website/ckeditor/plugins/preview/
But it doesn't seem to listen to any of the html I wrap around the code that pulls the content from the WYSIWYG editor.
As I understand this bit of code:
<script>
var doc = document;
doc.open();
doc.write( window.opener._cke_htmlToLoad );
doc.close();
delete window.opener._cke_htmlToLoad;
</script>
Pulls in whatever is in the editor, so I should be able to wrap around that html to include elements that will be available for every page? And links to stylesheets?
Anyone ever done this? Is it possible?
The "window.opener._cke_htmlToLoad" seems to be a string (containing a complete html document).
To get the innerHtml of the <body></body>, you can use this regex:
var doc = window.opener._cke_htmlToLoad; // is string
var innerBody = ( doc.replace(/((?:.(?!<\s*body[^>]*>))+.<\s*body[^>]*>)|(<\s*\/\s*body\s*\>.+)/g,'') );
document.getElementById('insertIntoMe').innerHTML = innerBody;
From my testing this seems only to work in Firefox. But Chrome and Internet Explorer directly display the window document without allowing any changes. So maybe somebody else can provide a better solution?

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?
This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');
From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.
If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();
Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');
$('#name_of_your_textarea').val('');

Categories

Resources