I'm making a web app using the CkEditor for some neat wysiwyg editors. On page load the page gets a couple of strings from a database using AJAX. How do I insert the strings into the div that is editable? I don't want to use a textarea because the inline editor looks much better with divs and require less work then.
I've tried the following scripts without success:
The first one tries to add the data to the div that becomes editable.
$('#awayList').append(data.boxOneCont);
And the second one I found here on stack overflow but that doesn't work either.
CKEDITOR.instances["awayList"].setData("Hej");
The connection with the db works perfectly, so the problem lies somewhere else.
Thanks in advance!
I solved it with this:
CKEDITOR.instances.editor1.setData( '<p>Some other editor data.</p>', {
callback: function() {
this.checkDirty(); // true
}
} );
Related
Since 4.3.0 TinyMCE includes Codesample plugin that lets you enter code snippets.
This works very well for languages like Java, PHP, C# etc. that are not directly running in the browser. You save your code snippet to the server, load it back into the browser, edit it, and save it back to the server again - no hassle.
If you want to do it with HTML, JavaScript, or XML, then it seems not to be possible to load the code snippet back into the browser after saving it to the server.
Most of the tags will be removed, despite being already encoded before.
See TinyMCE Fiddle 1 and TinyMCE Fiddle 2 that try to illustrate the problem.
Any ideas? Many thanks in advance!
If you want to reload content into TinyMCE that was previously stored in your database I would use TinyMCE's JavaScript APIs to load the data after the editor is initialized. I have created a fiddle to show how you would do this.
http://fiddle.tinymce.com/50faab/3
In this example the content that would have come out of TinyMCE from a prior edit is in the theContent variable:
var theContent = '<pre class="language-markup"><code><ul><li>one</li><li>two</li></ul></code></pre>';
(In a real application you would of course grab this from the database and inject it into the web page instead of hard coding the value)
I then use the TinyMCE API for setContent to add the content to TinyMCE once its loaded:
setup: function (editor) {
editor.on('init', function () {
var theContent = '<pre class="language-markup"><code><ul><li>one</li><li>two</li></ul></code></pre>';
this.setContent(theContent);
});
}
When you do it this way the editor will properly syntax highlight the code sample content (as seen in the Fiddle).
<textarea> tags and HTML are a difficult combination if you have anything beyond the simplest of HTML so I would avoid dropping HTML directly into the <textarea>.
Expanding on Michael's answer, putting your content into a hidden DIV, then grabbing it's html works better for me:
<div class="theDiv">
<pre class="language-markup">
<code><ul><li>one</li><li>two</li></ul></code>
</pre>
</div>
var theContent = $('.theDiv').html();
The answer of Felix Riesterer in the forum of TinyMCE might be of help as well:
Yes, in the way I pointed out: < > and " need to be properly encoded as < > and " because these characters have a special meaning in HTML context. So if you want to comply with the specs (and TinyMCE expects you to do so!) you need to convert these characters accordingly. There is no way around that.
And yes, I forgot to mention that & (ampersand) needs to be encoded as & as well.
You might have to double-encode stuff: If you want to see "" you need to code <h1> so the HTML code renders as plain text. The logic behind it is like this:
1. content gets decoded into raw text (< gets translated to <, & becomes &)
2.raw text gets treated as original HTML code for the editor contents (<h1> renders as <h1>, <h1> renders as a first-level heading)
I need to be able to extract, manipulate and update the text in wordpress's tinymce #content textbox.The code is coded in a wordpress plugin.
The below post helps but i am unable to comment or contact the original creator to ask him further questions. Having 1 points I cant practically do anything except ask questions. Let me know if i am doing this wrong.
Basically the code from this link is what i need to manipulate or edit the content in wordpress tinymce editor.
Manipulating TinyMCE content with jQuery
But the code seems to be overly simplified.
so my question is:
Do i need to include jquery
Do i need to include the tinymce js or class? is it in wordpress itself?
The code seems to be half javascript half php? Is the code suppose to be coded in a .js file?
do i need to put php tags here?
// make it into a jQuery object
var $content = $(content);
// manipulate the jquery object using jquery
$content = $content.remove('a');
Thanks.
hi I have figured it out after a bit more researching.
At first I was working with php to manipulate data after it is saved. But then i went on to wanting to manipulate the text before it was saved like underlining certain text based on a list in the database. So I needed to move on to javascript because i was editing the text before it was submitted or a page reload which i didn't wrap my head around yet.
So next i just coded the changes into javascript and built a button to call the process.
and seems i didn't need to include the tinymce class because probably the header of the editor page has already included it.
I have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.
I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.
I'm creating a Wordpress plugin, which adds a metabox right under the post editor containing a button. The plugin also loads a Javascript file right below the closing </body> tag.
PURPOSE
At the moment, what I am trying to achieve with the plugin is simple. When a user enters content to the editor and then clicks the button inside the metabox, I want to modify the editor's content.
JS CODE
In its simplest form:
jQuery(document).ready(function($) {
$('#button').on('click', function(e) {
e.preventDefault();
var editor = tinyMCE.get("content");
editor.setContent(some_content);
});
});
PROBLEM
The problem is that editor variable returns undefined.
FIREBUG (when trying to set var editor)
wpActiveEditor : "content"
editors : [ ]
activeEditor : null
WHAT HAVE I TRIED
I have tried many, many things (also many small tweaks) found on Tinymce's documentation and here on Stackoverflow but the problem still remains the same.
Any help would be very appreciated.
PS. The content textarea is visible when running my tests.
When the Editor first loads with the "Text" mode active, tinymce does not get initialized, therefore you cannot use tinyMCE.get(), as opposed to the "Visual" mode.
(I hadn't noticed that it actually works on the "Visual" mode, as I was keep testing it on the "Text" mode)
So, a conditional statement is necessary to determine first which tab is active. I solved my problem with this method:
function setEditorContent(val) {
var $_editorTextArea = $('#content');
$_editorTextArea.is(':visible') ? $_editorTextArea.val(val) : tinyMCE.get('content').setContent(val);
}
Hope this answer will prevent some headaches :)
Well, a live example would help a lot.
This way i can only guess: It looks a bit as if you cannot get the editor you want.
There are two possible reasons that come into my mind:
The editor id you are using is not the id of your editor
To verify this you check the id of your editors soure html element (in most cases a textarea).If there is no id set tinymce will use "content" as default.
There iy no editor initialized at all
To verify this you can use console.log(tinymce.editors) in your javascript console. If no editor is initialized then you will get an empty array.
Many years later but maybe this will help someone...
In addition to everything said above some consideration needs to be paid to the JS event model. Consider:
TinyMCE may not initialize (and the tinymce global may not be available) until the document is done loading. The OP correctly wrapped calls in jQuery(fn), which will solve this. This is relevant if you're using an added framework that initializes and tries to manipulate the editors (like AngularJS directives).
Parts of initialization seem to be asynchronous so even if you wrap everything in jQuery(fn) the editors may not be available until later. WP loads Underscore as part of Backbone so wrapping initial attempts to locate editors in _.defer(fn) seems to get me lots of mileage. This could be done with the native JS setTimeout as well.
Beyond the fantastic answer by #m.spyratos, it may be helpful to note that you can hook mode change events (Visual/Text) by adding a jQuery click event handler to button.switch-tmce[data-wp-editor="my_editor_id"] and button.switch-html[data-wp-editor="my_editor_id"] for when the user selects Visual or Text, respectively. Your version may vary but I found that the textarea goes away when switching to Visual mode and the tinymce.editor instance goes away when switching to Text mode. Hooking to these events gives a persistent means to re-hook when the user decides to change modes.
As a quick reference, you can attach to the editor object (activeEditor or something in editors[], which is keyed by editor ID) to receive any and all changes in visual editor content with by hooking to the editor with editor.on('NodeChange keyup', fn) and a single event callback. I included blur in my solution as well, for posterity. The text editor content can be hooked with jQuery('textarea#my_editor_id').on('keyup', fn).
I have successfully managed multiple editors on a page that are entirely two-way bound entirely through JS; the editors are created with wp_editor and no initial content then loaded asynchronously (via AJAX in my case) and managed through multiple edit cycles without a server round-trip. This is possible, if not slightly convoluted.
Like the question says has anyone been able to take a OpenWYSIWYG control and change its contents dynamically with JavaScript? It's hard because it takes your textarea and transforms it into a WYSIWYG editor by making the textarea invisible and inserting some kind of iframe and uses that as the editor.
I've tried code like this but failed:
document.getElementById("textarea-wysiwyg").value = "BLARG";
If you know that is it the only frame on the page then you can do something like this:
window.frames[0].document.body.innerHTML = 'blarg'
The above works when I tried it on http://www.openwebware.com/wysiwyg/demo.shtml in firebug.
Hope this helps...