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 ).
Related
I'm trying to use JavaScript to scrape data from the following page, specifically the "free shipping free returns" text that appears when you hover your mouse over the cart icon:
Whenever I hover over the cart icon, new HTML is added to the DOM.
And when I move my mouse away, the the previously added HTML goes away. I want to be able to parse data from the HTML that gets added without having the popup visible. How would I be able to scrape this text data even if someone does not hover over the cart icon? Is there a way to access all the HTML data at once?
You can try to catch the JavaScript function being executed when you hover your mouse over the cart icon. You can do this via the developer tools. Add break points to code execution if the DOM changes (on the parent element in which the new element is added).
Once you get the function, just execute it directly on that page and you'll probably be able to see the popup and extract it's contents.
You could also try to simulate a hover as explained in these answers: How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
Scraping a page for data is not usually recommended since they can change over time (especially ones not written directly in HTML, but are rather generated (usually they have CSS classes like 8h2H1)).
If this is not supposed to be a long-term solution, the above answer by #nvkrjn is a good answer. Or, you can just check for an element with the id name free-shipping-label.
But, if this is supposed to be a long-term solution, then I would suggest using an API (this site doesn't seem to have one) or querying the database like how to Javascript does. Also, if you're using a non-browser environment (eg BeautifulSoup), it may not run the JS required to get the data.
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
I've been working on a WYSIWYG project that utilizes the document.execCommand() method. Currently our toolbar contains a data-target attribute, but it's not being utilized to link the toolbar to it's respective editor. A while back we received a couple of reports from users asking for help with this because they were adding multiple editors on the page. Because the data-target isn't being utilized in our code, when they use the toolbar on for one editor the styling is being applied on both editors.
I've been looking online for resources to figure this out but every example I've been able to find just shows one editor on the page at a time. Any suggestions as to how I might be able to apply the styling created by the document.execCommand to only that editor specified in the data-target attribute?
Get the tool bar parent DOM id which you click in one editor.
Get the selected text DOM parent Id.
Compare if both are same means allow to apply the action other wise reject it.
See the image I've included. When you click on a row in the table (it won't be a table most likely, as each row will probably be a Dojo Widget), the 'pulldown shade' appears and is clickable. When the user clicks it, a new layer of content appears and the pulldown shade switches from 'Open' to 'Close'.
Can that all be done with CSS, meaning do a Hover:After type event, or am I going to have to use JS to make this happen? JS isn't an issue, just trying to confirm I'll have to use JS to make it happen.
Javascript is required for the click event,
1 - you can show the additional content with hover
2 - then bind this to click ( *no point using hover as old IE does not work unless it is an anchor tag <a> * )
3 - you then can switch the text with js.
:)
remember
css is for visual
js is for behaviour :)
In CSS there is an option to use :target pseudo class (more on this here https://developer.mozilla.org/en-US/docs/CSS/:target ), but I am not sure this will work well for in your case - you’d have to create separate element for each row, and it doesn’t seem wise.
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.