I am using TinyMCE as my editor. If I use setContent method provided by TinyMCE, I can see the paragraph getting inserted into the editor. Then I use the save method, to make sure the hidden textarea is also inserted with the same content. But when I use checkValidity method of Javascript for the form, it doesn't recognise the content.
But when I simply copy content from a website and paste it (Ctrl + V literally) into the TinyMCE editor, checkValidity then works, it doesn't fail.
I am not sure what is the difference between setContent and copy/paste into the editor. Can some one explain it to me conceptually? If I understand this, probably I can come across a solution as well. Or if you have faced this issue, then please let me know how this was resolved.
Related
I am having a problem in TinyMCE when I use paste_as_text: true in conjunction with forced_root_block: false. Pasting already plain-text in works fine, but pasting from Word adds extra <br> tags between every newline. It's not like I can simply parse these out, because that breaks correct double-newlines from plain text.
I have noticed that pasting with ctrl-shift-v fixes this issue, and would love to make that the default pasting method, but can't find how.
I'm currently trying to write a parser to use in paste_preprocess, but since it's possible to do in other ways, I figure there must be a better solution.
Pasting from Microsoft Word is broken in must copy and paste/Cliboard APIs. you will need to modify Newline.js or Clipboard.js manually.
For example, replace line 63 in Newline.js:
return p.split(/\n/).join('<br />');
with:
return p.replace(/\r?\n/g, '<br>');
If you can open an issue on the plugin page, I will create a proper pull request.
I want to include images in an aloha editable after a drop event, thus not using the toolbar button.
While some aloha commands may be executed programmatically, there is not so much doc about it and one must look into the code.
With the debugger i found that the relevant function is here so now i would go for copying the insertImg function body somewhere in my code and build my function.
On the other hand it would be much cleaner to reuse that code calling something like
Aloha.plugins.image.insertImg();
In a way similar to how it is done here. Is it possible to do such a thing?
A colleague explained me that there is nothing special required in order to insert an image. The function used by aloha is just a way to substitute jQuery and is not necessary.
Once the common/image plugin is loaded, it is sufficient to append an <img> tag inside the editable, also with jQuery, and the plugin will be triggered on it, adding the resize handle and showing the image toolbar when needed.
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.
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
I am using the Ace Editor, but I do no use JavaScript a lot so I'm finding it hard to make it actually work without a proper documentation.
I'm working on a local PHP file editor.. so open files etc, works fine, setcontent works like a charm. But now I want to save the editor's information back to the file.
In itself not really a problem. But how do I retrieve the var code.
If I use document.write it will not show the current information in the editor
If I could print out what is in the editor I could save the data. But I don't know how to provide a valid callback for getValue
Can someone please give me a little bit more information on what to do?
Simply say:
editor.getSession().on('change', function(){
editor.getSession().getValue();
});
editor.getSession().getValue()
Where editor is the instance of the editor. If you're using jQuery along side of Ace, what I've been doing is preserving the editor instance on the DOM element.
var editor = ace.edit('...');
$('#editor').data('editor', editor);
Later on if you need to get the value back you can then just do...
$('#editor').data('editor').getSession().getValue();