How to change Formatting menu options in redactor? - redactor

By default, under the Formatting menu (when the button is clicked), there are these options:
Normal Text
Quote
Code
Header 1
Header ...
Header 5
I would like to only have these options:
Normal Text
Quote
Code
Is there any way to do that? I've been scouring the configuration options and haven't been able to find out how to do it.

Olivérs answer is wrong.
You can easily achieve this by doing the following:
$('#redactor').redactor({
formattingTags: ['p', 'blockquote', 'pre']
});
Demo: http://jsfiddle.net/EkM4A/

Sadly the only way to achieve this is to decorate your redactor instance before init and overwrite the default toolbar setting in redactor.
You can see a working POC here: http://jsfiddle.net/Zmetser/7m3f9/
And the code below:
$(function() {
// Decorate redactor Object before init
$.Redactor.fn = (function () {
var toolbarInitOriginal = this.toolbarInit;
// Create a new toolbarInit method which suits our needs
this.toolbarInit = function (lang) {
// Grab the default toolbar...
var toolbar = toolbarInitOriginal(lang);
// ...and overwrite the formatting dropdown menu
toolbar.formatting.dropdown = {
p: {
title: lang.paragraph,
func: 'formatBlocks'
},
blockquote: {
title: lang.quote,
func: 'formatQuote',
className: 'redactor_format_blockquote'
},
pre: {
title: lang.code,
func: 'formatBlocks',
className: 'redactor_format_pre'
},
};
return toolbar;
};
return this;
}.call($.Redactor.fn));
// Init redactor
$('#redactor').redactor({
buttons: ['link', 'formatting', 'html']
});
});

Related

How to close parent container in extjs

I tried to close parent window in extjs with this.up().close(), but this.$className is undefined.
I am looking for a solution without using Ext.getCmp.
https://fiddle.sencha.com/#view/editor&fiddle/3b4i
Your scope is wrong. You give your element the scope of the application which is the reason why this.up() won't work. If you remove scope: this you should be able to use this.up() to get the parent container.
I made a fork of your sencha fiddle with a working example:
Sencha fiddle example
Not sure what you want to hide, anyway:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'my Panel',
html: "Some text.",
width: 350
}, {
xtype: 'box',
html: ' Close window',
listeners: {
render: function () {
this.getEl().on('click', function () {
//this.up('container').hide(); // Hide wrapper container
this.previousSibling().hide(); // Hide previous Panel
}, this);
}
}
}]
});
}
});

Inline style instead of quill editor inbuilt classes as classes are not available at the time to render HTML

I am using ngx-quill editor as my rich text editor in my angular project. So that I can save HTML generated by it in DB and then render it on different browsers as innerHTML. As it is not using inline CSS and there is a class attribute to style the HTML which refers to the inbuilt classes of this editor. I want to render this HTML on the platform where these inbuilt-classes are not available.
How to render the HTML on the page where these inbuilt classes are not available?
OR
Is there any way to convert these classes into inline styles?
OR
and if any other options to render HTML saved by this editor with the styling applied to it?
Any help would be appreciated
It's definitely possible. I managed to do it, but not in an Angular way, so in the end I am only using quill and not ngx-quill. I've been trying to figure out how to adjust ngx-quill to reflect this but with no success yet.
Anyway if you want to know how I am currently doing it.
First I create the html element:
<div id="editor"></div>
Then I add this to the top of my component:
import Quill from 'quill'
var DirectionAttribute = Quill.import('attributors/attribute/direction');
Quill.register(DirectionAttribute, true);
var AlignClass = Quill.import('attributors/class/align');
Quill.register(AlignClass, true);
var BackgroundClass = Quill.import('attributors/class/background');
Quill.register(BackgroundClass, true);
var ColorClass = Quill.import('attributors/class/color');
Quill.register(ColorClass, true);
var DirectionClass = Quill.import('attributors/class/direction');
Quill.register(DirectionClass, true);
var FontClass = Quill.import('attributors/class/font');
Quill.register(FontClass, true);
var SizeClass = Quill.import('attributors/class/size');
Quill.register(SizeClass, true);
var AlignStyle = Quill.import('attributors/style/align');
Quill.register(AlignStyle, true);
var BackgroundStyle = Quill.import('attributors/style/background');
Quill.register(BackgroundStyle, true);
var ColorStyle = Quill.import('attributors/style/color');
Quill.register(ColorStyle, true);
var DirectionStyle = Quill.import('attributors/style/direction');
Quill.register(DirectionStyle, true);
var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(SizeStyle, true);
And then in my init method I declare it:
ngOnInit() {
this.editor = new Quill('#editor', {
modules: {
'toolbar': [
[{ 'font': [] }, { 'size': [] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'script': 'super' }, { 'script': 'sub' }],
[{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
['direction', { 'align': [] }],
['link', 'image', 'video']
]
},
theme: 'snow'
})
}
And then wherever I want to read the content:
this.email.message = this.editor.root.innerHTML
Of course this is not ideal at all, and it's a lot of code that I prefer to have inside a component. Maybe somebody else can help out squeezing this in a component

How to remove rendered route using gmap3 plugin?

I use GMAP3 plugin to render driving direction. And would like to add a clear button so it can be clear but I haven't been able to find the right syntax in GMAP3. Here is the my js code, modified from the sample in gmap3.net. I have markers plotted already and latlng are retreived from plotted markers instead of from clicks position on the map.
function removePath() {
$(mapID).gmap3({
action: 'clear',
name: 'directionRenderer'
// tag: 'path' // works too with tag instead of name
});
function updatePath() {
$(mapID).gmap3({
action: 'getRoute',
options: {
origin: m1.getPosition(),
destination: m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) return;
$(mapID).gmap3({
action: 'setDirections',
directions:results,
});
}
});
};
function updateDirection(mm) { // Directions between m1 and m2
var mmID = $(mm).prop('id');
...
if (mmID == 'clearDirection') {
...
removePath();
return;
};
...
if (m1 && m2) { updatePath(); };
};
function initmap() {
$(mapID).gmap3(
{
action: 'init',
options: defaultMapOptions
},
// add direction renderer to configure options (else, automatically created with default options)
{ action: 'addDirectionsRenderer',
preserveViewport: true,
markerOptions: { visible: false },
options: {draggable:true},
tag: 'path'
},
// add a direction panel
{ action: 'setDirectionsPanel',
id: 'directions'
}
);
};
A is in place in HTML documents as directions panel. It has a a wrapper which is hidden when the route is cleared by using jquery css property change. The wrapper div's display property is changed back to 'block' whenever value is assigned to either m1 or m2.
<body>
...
<div id="direction_container" class="shadowSE">
....
<div id="directions"></div>
....
</div>
</body>
Its absolutely working fine.
$map.gmap3({ action: 'clear', name: 'directionRenderer' });
*Instructions-
If you later draw the route then you must write below code otherwise directions not display.
$map.gmap3({ action: 'addDirectionsRenderer', preserveViewport: true,
markerOptions: { visible: false} },
{ action: 'setDirectionsPanel', id: 'directions' });
Thanks...
Use this:
$(mapID).gmap3({action:"clear", name:"directionRenderer"});
The chosen answer above didn't work for me. I'm unsure if it's version related, but the solution I'm using is more simple:
$(your-selector).gmap3({clear: {}});
Afterwards, you can draw a new route without reconnecting the directions rendered with the map.

Extjs Alert doesn't work when button is pressed (Button Scope issue)

I am building an application and I am trying to keep it object oriented. The issue is that the alert box doesn't appear when the button is clicked. I believe it is an issue with the scope of the button. It could also be related to the way i am building my app. It is based off of an example provided by Sencha. I have searched, and tried many things, but I haven't come up with a solution. Here is my code:
Ext.require([
'Ext.grid.*',
'Ext.panel.*',
'Ext.msg.*'
]);
Ext.Loader.onReady(function() {
Ext.define('App.SimplePanel', {
extend: 'Ext.Panel',
alias: 'widget.SimplePanel',
width: 100,
height: 50,
initComponent: function() {
this.buttons = [{
text: 'Trigger Alert',
scope: this,
hander: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
this.callParent();
}
});
}, false);
Ext.onReady(function() {
// create an instance of the app
var simplePanel = new App.SimplePanel({
renderTo: document.body,
});
});
The issue is property should be called handler not hander
this.buttons = [{
text: 'Trigger Alert',
scope: this,
handler: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];

Ext JS 4 direct store how to *prevent* loading mask?

I have found many references on how to create a 'loading' message or mask when loading data in to a grid in Ext JS 4 via a data store / proxy (I am using direct type).
So I had added this in my controller at one point (because I was NOT getting a loading message previously) :
init: function() {
var store = this.getEncountersStore();
store.on({
beforeload: function(store,operation,eopts) {
Ext.getBody().mask('Loading...');
},
load: function(store,records,success,operation,eopts) {
Ext.getBody().unmask();
}
});
}
That seems to work for me in my MVC application, however, next I added a task manager timer to automatically refresh the grid data every 10 seconds:
this.runningTask = Ext.TaskManager.start ({
run: this.loadEncounterData,
interval: 10000,
scope: this
});
loadEncounterData: function() {
var store = this.getEncountersStore();
store.load({
params: {
},
callback: function(r,options,success) {
if(success == true)
...
} //callback
}); //store.load
I noticed that there were now TWO 'loading' mask messages on the screen!
So, I removed my 'store.on' code block above from my controller init, and now I have only one message.
So where does the other message come from?
Is it part of a Grid?:
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
...
I found a page that seems to asking the same question, though I was not able to figure out how to get it to work, or how to do it according to ExtJS 4 / MVC.
loadMask is not a config in Grid panel.
You can add as a config in gridpanel
viewConfig : {
loadMask: false
}
The loadMask is part of the gridView.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.View-cfg-loadMask
GridPanel components all have a gridView component that defines various things to do with the table view in the panel.
To prevent a loadMask on a grid, you set config for loadMask to false, IE:
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
loadMask : false,
...
You could change your load function to just load the store:
loadEncounterData: function() {
var store = this.getEncountersStore();
store.load();
...
Then you could use the following approach to automatically handle the loadMask whenever the grid store loads.
Using Ext.util.DelayedTask is handy to prevent the loadMask from appearing if the load takes less than 500ms.
Ext.define('ESDB.view.encounter.List', {
extend: 'Ext.grid.Panel',
...
initComponent: function() {
var me = this;
me._mask = new Ext.LoadMask(me, {msg: 'Loading...'});
me._maskd = new Ext.util.DelayedTask(function() {
me._mask.show();
});
me.store = Ext.create('Ext.data.Store', {
...
listeners: {
beforeload: function() {
me._maskd.delay(500);
...
},
load: function() {
me._maskd.cancel();
me._mask.hide();
...
}
}
});
...

Resources