If I add a paragraph style to the CKEdtior
eg:
format_p: { element : 'p', attributes : { 'style' : 'FONT-SIZE:16px;color:#000000;FONT-STYLE:normal;FONT-FAMILY:Arial, Helvetica, sans-serif;font-weight:normal;' } }
The default style when pressing the enter key is blank. However, if I set the style to "Normal" the style is applied and subsequent p's created by clicking the enter key include the style above.
What I want is for all paragraphs (tag 'p') to use the "Normal" style by default. Is there a way to achieve this?
I think you have use 'contentsCss', have you try 'dataProcessor' like this :
CKEDITOR.on('pluginsLoaded', function (event) {
event.editor.dataProcessor.dataFilter.addRules({
elements: {
p: function (element) {
// element.attributes
}
}
});
event.editor.dataProcessor.htmlFilter.addRules ({
elements: {
p: function (element) {
// element.attributes ...
}
}
});
});
Related
How to close\ open accorion on click to .shewron element?
Example: https://codepen.io/npofopr/pen/vYKKXbJ?editors=1010
let util = UIkit.util;
let lkOrderIconExpand = document.querySelectorAll(".shewron");
util.on(lkOrderIconExpand, "click", function () {
let accordionEl = util.$("[uk-accordion]");
// find closed li array
let allItems = util.$$("[uk-accordion] > li");
// for each element
util.each(allItems, function (el) {
// get index
let openIndex = util.index(el);
// Check if some element has some class
if (util.hasClass(allItems, "uk-open")) {
console.log("Class was found!");
// toggle it
UIkit.accordion(accordionEl).toggle(openIndex);
} else {
console.log("Class was NOT found!");
// toggle it
UIkit.accordion(accordionEl).toggle(openIndex);
}
});
});
You can easily do it with CSS:
.uk-accordion-title::before{
background-image: url(**icon-url-here);
}
.uk-open > .uk-accordion-title::before{
background-image: url(**icon-url-here);
}
So that your chevron icons will show instead of default accordion icons.
I have get this old code
// myenter.js, enter key is binded to insertParagraph command.
$.summernote.addPlugin({
name : 'myenter',
events : {
// redefine insertParagraph
'insertParagraph' : function(event, editor, layoutInfo) {
//you can use summernote enter
//layoutInfo.holder().summernote('insertParagraph');
// also you can use your enter key
layoutInfo.holder().summernote('insertNode', document.createTextNode("\r\n"));
// to stop enter key
//e.preventDefault();
}
}
});
$('.summernote').summernote({ height : 300 });
but now method of add plugin has changed and i want this functionality with new version by this code
$.extend($.summernote.plugins, {
'myenter': function (context) {
console.log('myenter');
}
});
but it is not called at all
I had tried to get same functionality by
summernote.onEnter
and
summernote.keyPress
but it gives error..
$.extend($.summernote.plugins, {
'brenter': function (context) {
this.events = {
'summernote.enter': function (we, e) {
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
document.execCommand('insertHTML', false, '<br><br>');
e.preventDefault();
}
};
}
}
I managed to fix it like this:
$('#summernote').summernote('destroy');
$.extend($.summernote.plugins, {
'brenter': function (context) {
this.events = {
'summernote.enter': function (we, e) {
//get hold of the enter event and trigger a shift+enter keypress
e.trigger($.Event("keydown", {
keyCode: 13, // ENTER
shiftKey: true
}));
//stop the normal event from happening
e.preventDefault();
}
};
}
});
// then do summernote as normal...
$('#summernote').summernote({
In CKEditor I'm having issues adding some dataProcessor rules.
I have a custom plugin defined in ckeditor/plugsin/x
I have added the plugin name to config.js extraPlugins
My plugin looks like
CKEDITOR.plugins.add('x',
{
init:function(editor)
{
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
div : function( element )
{
element.setAttribute("x","y");
}
}
});
editor.dataProcessor.dataFilter.addRules(
{
elements :
{
div : function( element )
{
element.setAttribute("x","y");
}
}
});
});
However it doesn't insert the attribute.
Am I doing something wrong here?
CKEDITOR.dataProcessor works with CKEDITOR.htmlParser.element instead of CKEDITOR.dom.element. CKEDITOR.htmlParser.element is not a real DOM element but an abstract object to make parsing and filtering much easier. It has own set of methods and attributes.
Also note that dataFilter works on input data (what comes to the editor) while htmlFilter deals with output data (content produced by the editor).
You should also get used to Allowed Content Filter because quite likely you need to configure it to have the editor working properly, i.e. config.extraAllowedContent = 'div[x]'.
See the fiddle.
CKEDITOR.replace( 'editor', {
extraAllowedContent: 'div',
on: {
pluginsLoaded: function() {
this.dataProcessor.dataFilter.addRules( {
elements: {
div: function( el ) {
console.log( 'processing', el, 'in dataFilter' );
el.attributes.datafilter = 'x';
}
}
} );
this.dataProcessor.htmlFilter.addRules( {
elements: {
div: function( el ) {
console.log( 'processing', el, 'in htmlFilter' );
el.attributes.htmlfilter = 'y';
}
}
} );
}
}
} );
Is it possible to automatically select the first row when using smart-table. I have added the class st-selected conditionally using ng-class which highlights the row, but when I then select another row it does not deselect the first row.
I would be grateful of any help.
Thanks
I have just had a similar problem, but wanted to have a specified default selection, I solved the issue with allot of swearing and a directive.
(function(undefined) {
'use strict';
angular
.module('mymodule')
.directive('stDefaultSelection', function() {
return {
require: 'stTable',
restrict: 'A',
scope: {
selection: '=stDefaultSelection',
},
link: function link(scope, element, attrs, controller) {
scope.$watch('selection', function(newValue, oldValue) {
var selectionMode = 'single';
if (angular.isArray(newValue) && newValue.length > 1) {
selectionMode = 'multi';
}
if (angular.isArray(newValue)) {
newValue.forEach(function (row, index, array) {
controller.select(row, selectionMode);
});
} else {
controller.select(newValue, selectionMode);
}
});
}
};
});
})();
Then in your html:
<table st-table="myCtrl.data.records" st-safe-src="myCtrl.data.safeRecords" st-default-selection="myCtrl.defaultRecord">
Once the data has been set then set your default record and that may solve your problem.
You can use $watch operator and $filter operator to do the needful.
//fired when table rows are selected
$scope.$watch('displayedCollection', function (row) {
//get selected row
row.filter(function (r) {
if (r.isSelected) {
$scope.selectedId = r.id;
//getInfo(r.id);
}
else if (!$scope.rowCollection[0].isSelected) {
$scope.rowCollection[0].isSelected = true;
$scope.selectedId = $scope.rowCollection[0].id;
//getInfo($scope.rowCollection[0].id);
}
})
}, true);
This will select the selected row, and if no row is selected, it will by default select the row with index 0. (First Row)
You need to pass to attributes to your smart table:
<tr ng-repeat="row in rowCollection" st-select-row="row" st-select-mode="single">
You can make a css class to highlight the row:
.st-selected {
background-color: #ffd800;
}
I've configured extraAllowedContent in "config.js" to allow div elements with specific classes, per the Advanced Content Filtering guide, which is working.
However, I need to strip any div elements that have no attributes. Is this possible?
You can specify config.disallowedContent with match function:
CKEDITOR.replace( 'editor1', {
disallowedContent: {
div: {
match: function( el ) {
return CKEDITOR.tools.isEmpty( el.attributes );
}
}
}
} );
While it correctly filters out the contents, for some reason (a bug), it also disables the Div plugin and its dialog. Thus I'd rather suggest something like this at the moment:
CKEDITOR.replace( 'editor1', {
on: {
pluginsLoaded: function( evt ) {
var editor = evt.editor,
rules = {
elements: {
div: function( el ) {
if ( CKEDITOR.tools.isEmpty( el.attributes ) ) {
// Return false to get rid of an element with children.
return false;
// The element can also be removed preserving children.
// el.replaceWithChildren();
}
},
}
};
// Filter what comes out of an editor.
editor.dataProcessor.htmlFilter.addRules( rules );
// Filter what comes into an editor.
editor.dataProcessor.dataFilter.addRules( rules );
}
}
} );