When user clicks on "blockquote" button (that is on toolbar) to insert blockquote element:
then TinyMCE will insert <blockquote> HTML element without any class. I want to change this so that it always inserts <blockquote> with class myClass (but only when blockquote is inserted by clicking on "toolbar" button, not when loaded):
<blockquote class="myClass">
...
</p>
</blockquote>
Do you know how this can be done/achieved?
I'm using TinyMCE 5.
Fiddle: http://fiddle.tinymce.com/Guhaab
UPDATE:
Sorry, my question wasn't precise enough: I want this class to be added just for elements added via the button, not when loaded.
Updated Answer:
The querent added:
I want this class to be added just for elements added via the button, not when loaded.
In that case:
Blockquotes are added to content by applying a predefined, default format called (you guessed it) "blockquote". You can override that default style to include a class when it is applied to content:
formats: {
// Changes the default format for blockquote to have a class of 'foo'
blockquote: { block: 'blockquote', classes: 'foo' }
},
Here is a Tiny Fiddle demonstration:
http://fiddle.tinymce.com/svhaab/1
Here's information about formats in TinyMCE:
https://www.tiny.cloud/docs/configure/content-formatting/
Original Answer:
One option would be to use a node filter to add this class to all <blockquote> elements:
https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter
https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.domparser/#addnodefilter
Here is a Tiny Fiddle example:
http://fiddle.tinymce.com/hvhaab/1
(ETA correct Fiddle link)
Note: As seen in the Fiddle, this approach will also add the class to <blockquote> elements that are loaded or pasted in to the editor as existing content - not just <blockquote> elements added via the button.
Also, if a <blockquote> element already has a (different) class, this will add your custom class to the attribute.
Related
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
In Chrome DevTools, the element tab shows the constructed DOM and I can click on elements in the DOM which also highlights the element on the page. Image of both versions shown in DevTools
If the DOM shows:
<input class="gLFyf">
Then the page highlight will show:
input.gLFyF
I realise these are two ways of writing the same thing, I also realise the former is HTML style and the latter follows CSS conventions. However, I lack the vocabulary to properly refer to either.
What do I call each format?
Eg. would it make sense to refer to <input class="gLFyf"> as HTML syntax and input.gLFyF as CSS syntax? Is there a more widely accepted way to differentiate and name them?
gLFyf is the name of the class which is an attribute that can be referred to in the stylesheet to match styles with elements of that class on the page.
A class leads with a period (.) - whereas an ID would lead with a hash (#).
So .gLFyf is a class.
And #gLFyf would be an ID.
It is a class, whether viewing HTML markup or the DOM inspector. They both refer to the same thing as you already state.
This may be of some use/reference.
Is there a built in TinyMCE command to change the class name of its outer-most div? I have a div which is populated with either a PHP version of TinyMCE or the jQuery version, but the TinyMCE editor's outermost div classes are different.
I would preferably like to avoid having to use jQuery.
jQuery
class="mce-tinymce mce-container mce-panel"
PHP
class="wp-core-ui wp-editor-wrap tmce-active"
I don't mind if I can only change one, although it would be nice to know how to change both. I have tried
tinymce.inti({
body_class:"classname";
});
From docs
// Add a class to an element by id in the page
tinymce.DOM.addClass('someid', 'someclass');
// Add a class to an element by id inside the editor
tinyMCE.activeEditor.dom.addClass('someid', 'someclass');
From doc: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#body_class/
Here you can also add a body_class option like;
tinyMCE.init({
...
body_class : "some_class_name"
});
I want to be able to remove classes from an element within the WYSIWYG editor provided by TinyMCE. I've spent some time looking around for something and haven't had any success. I've already written 4 or 5 plugins to handle different needs, but this seems to be such a basic utility, it must exist and would prefer not to have to write another plugin.
A sample use would be a paragraph that has been assigned a class using the dropdown class selector. I can continue to add classes to the paragraph element, but I can't replace them or remove them. I would like to be able to select an element in the editor and click a button to remove all assigned classes - and I want to be able to confine the function to that element node, not the entire contents (as the Remove Formatting plugin does).
<h4>Here is my headline</h4>
I use the Styles dropdown to add the class .all-caps
<h4 class="all-caps">Here is my headline</h4>
I decide I want that to use the .inverse class instead, so I select from the dropdown and end up with this:
<h4 class="all-caps inverse">Here is my headline</h4>
What I want is this:
<h4 class="inverse">Here is my headline</h4>
A plugin that will either allow me to reassign or remove classes from elements is what I need. Does anyone know of one out there?
I have a form in a module that I want to appear in a modal window. Depending on the id the window may be blank, or if it does show any content all classes and ids are removed, so I can't validate or style the form.
Truncated Code:
...
<div id="feedback">
<div class="feedbackinner">
<!-- form module -->
<div id="contact-wrapper">
<!--form elements with ids and classes-->
</div>
<!-- end module -->
</div><!-- end .feedbackinner -->
</div><!-- end #feedback -->
This triggers the modal window without any ids or classes (using Firefox Web Developer outline current elements):
Click for ugly unstyled form that won't validate
This triggers a blank modal window:
Click if you like staring at a blank white box
So most importantly how do I keep all the ids and classes inside the modal window, and why won't calling the parent div work?
( As a work around I moved the form to a component view then called it using handler: 'iframe' instead of clone. I still want to know what's going on with the modal window. )
Thanks!
not seen the code but implications of using Element.clone on an element are apparent. By nature of HTML, id is meant to be unique. This means you are not really supposed to have more than one element with the same id injected into the DOM at the same time.
MooTools mirrors the sentiment correctly by implicitly removing the id from any element it creates a clone of:
https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L860
the .clone method accepts optional arguments which allow you to override stuff:
clone: function(contents, keepid){ - see http://mootools.net/docs/core/Element/Element#Element:clone as well.
cloned elements also lose all the events you may have assigned to them (but cloneEvents can help with that).
I would recommend looking at the squeezebox implementation and double check that the clone is implemented in the intended way. A better practice may be to adopt and re-attach the elements instead - or to copy the whole innerHTML (though this will once again cause non-delegated events to fail).