I want to be able to have default text like "Enter content here..." appear when the editor first loads, but I want this text to disappear when the user clicks/focuses on the content area. Then, if they "blur" (move out) of the content area without inputting anything, I want the "default text" to re-appear in the editor.
After Googling and looking through TinyMCE's wiki, it looks like there are onActivate and onDeactivate events that should partially do this; however, the wiki page for onDeactivate has a disclaimer stating that it is not a true "blur" method, plus I was not able to get the onActivate events to work (using FF 3.5 at least).
Has anyone else found a solution to this? I'm using a stock TinyMCE install and have jQuery loaded for my other JS tasks for the site I'm building, so I'm open to some jQuery wizardry to make this happen if there's nothing available in the TinyMCE API.
Thanks,
Seth
the onNodeChange tinyMCE event will fire if the user tabs into the editor. use tinyMCE's onMouseDown to detect a click. between these two events you should be able to determine when the user has activated the editor. use $(body).click() in the main page to determine when the user clicks out of the editor and blurs it.
i would also shy away from putting the default text as the actual value of the editor. instead, i would make the iframe/body of the editor be transparent and put the default value behind it in an absolutely positioned div. using the above triggers, just show()/hide() that div when you want the default value to [dis]appear.
Hmmm, tricky one...
here's an idea you might like to try:
We have established the onActivate works fine, so hook up the code for that... now, for onDeactivate...
tinyMCE stores it's content in the original (now hidden) textarea it replaces. That's how the content gets sent to the server when the form is posted.
Now, to blur away from the editor, a user has to click on something else on the page. using jQuery you can attach a $("body").click() function that checks the content of the hidden textarea (using $(id_of_hidden_textarea).val()). If the content is empty, set the content to "Enter content here..." in both the textarea (using val()) and the MCE instance (using tinyMCE.setContent()).
The $("body").click() function would not fire when clicking on the editor because it's in an iframe.
Related
I'm building a simple WYSIWYG editor in React and I've implemented all of the different button functionalities except this last one: selecting text and turning it into a hyperlink.
I need to preface this with: I'm not interested in answers like "just use React-Quill" or "just use react-draft-wysiwyg".
So the type of feature I'm trying to implement can be seen on https://quilljs.com/ - scroll down until you see the demo editor, then select some text, click the "link" button, and a secondary window will pop up containing a text input that allows you to enter a URL. Click SAVE, and the originally selected text will turn into a hyperlink.
I'm approaching this like so:
Using document.execCommand('createLink', false, myURL) to handle the actual hyperlink creation
When my url entry window pops up, I save the currently selected range by saving off the result of document.getSelection().getRangeAt(0)
When the SAVE button is clicked, I restore the range by grabbing the document selection again, clearing all ranges with sel.removeAllRanges() and then calling sel.addRange(mySavedRange)
Note: all of this range saving and restoring is necessary, because when the user clicks on the text input on the pop-up window to enter a url, the document selection clears.
So here's what I'm seeing happen:
Instead of the selected text turning into a hyperlink (in this case I was selecting the word 'this',) the url is just thrown at the end of the line of text.
For reference, after trying my own code, I decided to try the functions implemented here: https://gist.github.com/dantaex/543e721be845c18d2f92652c0ebe06aa
I still see the same issue.
Any thoughts?
An extra note: I'm building an electron app, so I'm not as concerned with "cross-browser" compatibility. If it works in Chrome, then great!
My solution: the issue was that the contenteditable div needed to be focused.
So I changed my approach:
Upon clicking "Save", instead of using the document.execCommand right away, I would update a global state field, like enteredHyperlinkText (I'm using Reactn)
I added a ref to my editor with useRef and an effect to my editor with useEffect (I'm using React Hooks) the effect would only re-run when enteredHyperlinkText updates, and it will handle focusing on the editor, restoring the selection, and calling document.execCommand.
Note: focus the contenteditable div before restoring the selection.
I'm using an iframe to get the content of a registration form on a web page, and, as I have to show this registration form inside an HTML app for Android, I'd like to analyse the html inside the iframe to search for input textfields and to use my custom text field as "dummy" or "proxy" for the considered element:
Let me explain better:
As the web page wouldn't give the user the same easy approach as an app, instead of clicking on a textfield and having the problem that the virtual keyboard overlaps the other fields making it difficult to go further.
I want to create a div that covers the iframe and has a text field inside with the same functionality as the one clicked: by this way after entering the text into the dummy field and clicking an ok button aside, the clicked field would be updated and all the other things hidden (virtual keyboard, etc.).
It would be simple if the goal was just to copy a text from a field to another, but the real problem is that the clicked field could have some events like onkeypress or onchange (e.g. to autocomplete) and so on, and I should get the same behaviour on the dummy field.
In an imaginary world I'd do:
document.getElementById("dummy") = document.getElementById("original")
And then destroying and recreating the dummy whenever required.
Do you know if is there something possible to do?
You can't read a div from inside of an iframe after the iframe has loaded. The reason for this is to prevent hackers from making programs that can grab your credit card numbers from web-based forms through iframes and then use the apps to record them.
UPDATE
You would have to retrieve the entire form in the background, then render it again using webkit, then when the person clicks submit, you would have to submit the exact same form data to the host from your device.
Its possible, but I don't see a good reason why you would ever need to use that.
My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).
This very textbox I'm typing in on Stackoverflow uses Pagedown.js markdown to HTML conversion.
I'd like to use the Pagedown.js editor but only show the live preview HTML onclick rather than onkeyup. My reasoning is that for mobile devices the keyup-based parsing seems too taxing (SO itself doesn't use it) and it would provide just as nice a user experience to click a button to reveal the formatted text.
Is there any way to separate out editor.run() such that the button bar formatting (e.g., bracketing text with asterisks) and the live preview formatting can be uncoupled?
You can trigger the refresh by calling editor.refreshPreview() after calling editor.run(). However, the onkeyup event doesn't seem to be configurable. You can disable it by changing var startType = "delayed" to "manual" in Markdown.Editor.js.
I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?