Question: I would like add custom styles to the dropdown in ckeditor, e.g. to show a Button style adding an a tag with class btn. Is there a way to do so within Bolt CMS?
(source: jonathanschmid.de)
Attempt: I was hoping to be able to add styles via the general.wysiwyg.ck config key, but there doesn't seem to be a suitable option. I managed to achieve what I wanted by editing bolt-public/view/js/ckeditor/styles.js – but I guess it's not update-safe.
Does anyone know of a safe way to achieve this within Bolt CMS? If not, I'll try forking to suggest adding general.wysiwyg.ck.styles to config.
There's an official guide about styles.
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Button', element: 'a', attributes: { 'class': 'btn' } }
] );
and
config.stylesSet = 'my_styles';
Then if you put the selection into a link, you can apply the style.
However, if you'd like to create a link from scratch, use CKEDITOR.editor.insertHtml within a custom command and expose it as a button in the toolbar. Styles combo does not insert new elements.
Related
In CKEditor, I added my custom image button, which directly trigger a file input. However, images can only be rendered when the Image plugin is in use.
I don't want to have 2 image buttons on the toolbar, is there a way to hide the Image button, but still use it (like display: none but in a more structural way?)
Thanks in advance.
Since 'CKEditor 4.1' you have something which is called Advanced content filtering.
This allows you set enable or disable certain tags.
The easiest way to allow the images to be displayed is to add
config.allowedContent = true;
in your config.js file. But this will allow everything.
To just add the enablement of the 'img' tag you can add it in the 'extraAllowedContent' element when you create the CKEditor
var myEditor = CKEDITOR.replace(editorId, {
extraAllowedContent : 'img(*){*}[*]'
});
There is removeButton option for CKEditor config, will it work for you ?
config.removeButtons = 'Image';
I'm implementing a new widget that will be very similar to the simplebox example, so I'm trying to make that work first.
In the tutorial, it is said that specifying allowedContent is enough to include additional elements, classes, styles that we need, so that it is not filtered out. In the main editor configuration I have
div(simplebox);
This successfully enables the widget but still, if I switch to source and back to wysiwyg, things inside like the class for the inner div - "simplebox-content" is deleted and the widget no longer works properly. I haven't changed the code for simplebox.
Am I doing something wrong here?
Take a look on widget definition in Simplebox plugin:
editor.widgets.add( 'simplebox', {
// Allow all HTML elements, classes, and styles that this widget requires.
// Read more about the Advanced Content Filter here:
// * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
// * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
allowedContent:
'div(!simplebox,align-left,align-right,align-center){width};' +
'div(!simplebox-content); h2(!simplebox-title)',
// Minimum HTML which is required by this widget to work.
requiredContent: 'div(simplebox)',
...
} );
It says that the minimal requiredContent for the widget to work is div(simplebox). By "minimal", it means that it will run but with a limited set of features.
And this is exactly what happens when you set config.allowedContent = 'div(simplebox)'. If you compare it with allowedContent property in widget definition, you'll notice that by default, the widget registers much more than that in editor's filter, like .align-left, .align-right, .align-center and .simplebox-content classes for <div> and .simplebox-title class for <h2>. Once you set config.allowedContent, you override the rules defined by the widget and if some elements/classes become disallowed because of that, the structure of the widget gets "flattened", just like described
[...] things inside like the class for the inner div - "simplebox-content" is deleted and the widget no longer works properly
So the long story short: When you define config.allowedContent on your own, you are responsible for the shape of editor features and you must understand the consequences. Only if you include all the rules from the definition of Simplebox, you'll enjoy the full functionality of the widget.
I had the same problem. What I did was I added the classes inside editables variable like this:
editables: {
content: {
selector: '.static-gray-box',
allowedContent: 'h5(first-child,last-child);h6(first-child,last-child);p(first-child,last-child)'
}
},
I'm trying to insert a link into an instance of CKEditor using the following line: -
CKEDITOR.instances.CKInstance.insertHtml('My Text');
All that happens though is that 'MyText' is inserted without the link. Anyone know how to insert the link properly?
PS. I know that CKEditor comes with a plugin to insert links but I'm doing my own one
Thanks
Shazoo
I guess that you're using CKEditor 4.1 or newer. And since you don't use the official link plugin, your editor discards all <a> tags. You need to properly configure Allowed Content Filter so your editor accepts <a> tags back again.
You can do it when defining your command, like this:
// Assuming you want a dialog-driven command...
editor.addCommand( 'yourCommand', new CKEDITOR.dialogCommand( 'link', {
allowedContent: 'a[!href]', // Allow <a> in the editor with mandatory href attr.
requiredContent: 'a[href]' // This command requires <a> with href to be enabled.
} ) );
Or in editor's config with config.extraAllowedContent = 'a[!href]'. This is not recommended though as you develop a plugin (right?), which should bring a custom command.
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I have created the layout for my new portfolio webpage here: http://vitaminjdesign.com/work.html
I want to have a legend with tags (ALL, logo design, marketing, web design, print design) and when these tags are clicked, the page filters the results and display them like they are currently displayed. At first, I want ALL projects displayed, but when the user clicks on a tag (say "print design"), the list is filtered and displayed.
If I have this as my legend: logo
and when logo is clicked, I want all of the div's with the class "logos" to stay and all of the the divs with the other classes to fade out.
What is the easiest way in jquery to make this work. Please note: I am not very experienced with jquery, so please be as thorough and idiot-proof as possible.
First add the classes (logodesign, marketing, webdesign, printdesign) that apply to each project to the div your are assigning the numeric class to.
Then create links that are to filter for each tag like:
Logo Design
Then assign a click event that will hide the others and show the selected one.
var $projects = $('#projects');
$('a.logodesign').click(function() {
hideAll();
showTag('logodesign');
});
function showTag(tag){
$projects.find('div.'+tag).stop(true).fadeIn();
}
function hideAll(){
$projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut();
}
Although it isnt a direct answer to my question, I found a tutorial on how to achieve EXACTLY what I wanted. It is here:
http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip