I'm a UX Designer, with some experience in frontend dev, working in a online editor proof of concept to be tested in a usability study. One of our first finding has been that the users would like to have a button that adds directly the corporate font family and size for body text that is Arial 11px. I know that this can be achieved easily with the inlineStyle.js plugin with a dropdown but I'd like to have the same behaviour like the Bold or Italic button. I've tried to look into the plugin's code but I can't make it work for my case I've also tried the code in this example Froala add custom pre code button but it's too old to work with the latest version of froala.
Thanks.
I guess the way forward could be to actually employ the inlineStyle plugin, then reach into the Froala editor instance and hide the plugin button on the toolbar, whilst adding your own custom button to 'click' the hidden style option in the plugins dropdown.
I don't have the inlineStyles plugin enabled right now but I do have the paragraphStyles plugin which I believe follows the same approach. This picture is a grab from Chromes inspector showing the elements that build the Froala paragraphStyle options dropdown (similar to inlinStyles). The yellow highlight is within the class of an element that 'is' the activating button for my style. The highlighted text is my class name - the class I want applied when that option is clicked. That gives me the chance to target a click trigger via, say, jQuery, so
$('.dzTtlRed').trigger('click'....)
So you would add a custom button to the Froala editor toolbar and set it to trigger the click on your style options in the dropdown.
Regarding hiding the plugin button, this is what I have successfully used to hide the paragraphStyle plugin dropdown button on the Froala toolbar. I expect you could do the same for inlineStyles. Note you need to fire this after the Froala editor finishes building - I have noticed some async behaviour in this which means things don't happen immediately or in any externally predictable sequence, so you may want to use the Froala intialized callback event.
var inputBox = $('#' + eleId); // eleId is the Froala nominate textarea html id attr.
inputBox.closest("div").find("button[data-cmd='paragraphStyle']").hide();
Related
I have created a library that extends the capabilities of HTML (jsx)
Now I can add styles to props.
But WebStorm doesn't know about it and circles all custom attributes.
I can click "add maxWidth to custom html attributes" but I have to add a lot of them.
How to turn off attribute checking?
Disable an inspection in the settings
Press Ctrl+Alt+S to open the IDE settings and select Editor |
Inspections.
Locate the inspection you want to disable, and clear the checkbox
next to it.
Apply the changes and close the dialog.
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.
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 ).
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.