I'm wondering if it's possible to add custom formatting to redactor? I created a custom button, and I'm able to change the formatting of text, but only using certain elements:
['p', 'blockquote', 'pre', 'h3', 'h4', 'h5']
However, I'm not able to add any of the following:
['small', 'figcaption']
I followed the Redactor docs to set up the button, and here is my function that is being called:
var selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('formatblock', '<small>');
I also tried adding elements to my 'formattingTags' array, but it didn't seem to have any affect.
formattingTags: ['p', 'blockquote', 'small', 'pre', 'h3', 'h4']
Thank you in advance.
I think I figured it out.
I added the following to my button function:
var $selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('inserthtml', '<small>' + $selected_html + '</small>');
However, this is not perfect as it does not replace the parent tag, and you can keep adding elements within elements.
Something like that:
redactorOptionsDefaults = {
buttonsAdd: {},
activeButtonsAdd: {},
buttonsCustom: {}
};
redactorOptionsDefaults.buttonsCustom.small = {
title: 'small Header',
callback: function () {
this.formatBlocks('small');
}
}
redactorOptionsDefaults.activeButtonsAdd.small = 'small';
It formatting block, highlight button if needed while selecting block. But don't remove style while repeat button click
Related
I have an Algolia search widget set up in my site, however the results all have their list number next to them. How do I style this to remove the numbers?
The docs have this under cssClasses.
instantsearch.widgets.infiniteHits({
// ...
cssClasses: {
root: 'MyCustomInfiniteHits',
list: [
'MyCustomInfiniteHits',
'MyCustomInfiniteHits--subclass',
],
},
});
So I tried something like this.
instantsearch.widgets.infiniteHits({
// ...
cssClasses: {
list: [
'list-style: none',
],
},
});
but the numbers still appear.
My widget is inside of a Django template if that helps and I am using instantsearch.js.
Ok, I actually figured it out. The string that you include inside of
list: [
'customClass'
]
is the class that is applied to the element. So you can then just add styling to your stylesheet.
I have a div that is conditionally binded to a class in vueJS. The formula for my computed variable uses Screen.width. It seems to work correctly when first loading, but if I change the size of the screen it doesn't rebind with the new screen size, unless I refresh the page. Is there a way I can get my conditionally binding to honor the change in screen?
<div class="div_1" v-bind:class="{ horizontalScroll : showScroll }"/>
showScroll(){
return this.events.length*225>(screen.width*.84);
}
If you wanna do it this way, you will probably have to register a 'resize' listener. Your code should look something like this:
data: () => ({
windowWidth: document.documentElement.clientWidth,
windowHeight: document.documentElement.clientHeight
}),
mounted() {
window.addEventListener('resize', this.setDimensions);
},
methods: {
setDimensions() {
this.windowWidth = document.documentElement.clientWidth;
this.windowHeight = document.documentElement.clientHeight;
},
}
and don't forget to remove it:
beforeDestroy() {
window.removeEventListener('resize', this.setDimensions);
},
I am trying to customize the behavior of an editor button in a plugin. On click, it opens a modal where the user can input some text. On confirmation, I want to wrap this text into code tags. But I don't want to take this text as if it comes from a text editor, I want to handle it as visual text. This means, I want to preserve any formatting (whitespaces and linebreaks) but not accept any other tags besides the code tags that I add afterward.
function showDialog() {
var win = ed.windowManager.open({
title: "Insert code",
body: {
type: 'textbox',
name: 'code',
multiline: true,
minWidth: ed.getParam("code_dialog_width", 600),
minHeight: ed.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)),
spellcheck: false,
style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
ed.focus();
ed.undoManager.transact(function() {
ed.insertContent('<code>' + e.data.code + '</code>');
});
ed.selection.setCursorLocation();
ed.nodeChanged();
}
});
}
First i'd wrap that function in tags and make sure to initiate the function by adding showDialog() at the end of that function so the DOM knows to call the function. and with wordpress's content filter its going to add spaces no matter what unless you disable the content filter from auto populating format. if you go to a site like https://www.willpeavy.com/minifier/ and copy your code into that and minify the spaces you should be able to include it in your text(not Visual) tab in MCE. That being said its really bad practice to run functional code in MCE you're better off making a separate page / Post template for it.
I am currently designing a table that was made with rc-table. I made the last row for actions which renders the buttons edit and delete. I want to edit it's style with Sass but I was unable to
I also specified classes for both the edit and delete button since they'll have different background-colors.
Is it possible to access it directly via a class? or is there another way which I don't know about.
for example if you have something like this in your code
this.columns = [
{
title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
<a className="delete-btn" onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
},
];
you can add class t the a element and the overwrite those styles with your CSS/SASS.
like this
.rc-table td {
background-color: 'red';
// custom styles here
}
notice the className attribute in a.
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO