I'm using Magento with TinyMCE, and currently it does not support assigning custom CSS class to anchor element through user-friendly interface:
I tried adding this:
extended_valid_elements : "a[name|href|target|title|onclick|class]"
to setup.js, to settings var, but it didn't help.
How would I add custom class to <a> element in tinymce?
Thanks
ADVlink supports only classes for the starting point of the anchor - here is it possible to chose a class from a pulldown, but not for the target.
Yes, it is possible at least in TinyMCE v4. The option you are looking for is called visual_anchor_class. All you have to do is to add the following line to your TinyMCE configuration:
visual_anchor_class: 'my-custom-class'
And all anchor links you create will get a class 'my-custom-class'.
(Manual: https://www.tinymce.com/docs/configure/content-appearance/#visual_anchor_class)
I would do it using a custom rightclick menu and an own popup.
A bit late but have you tried the advlink plugin? This provides a dropdown for css classes, that you can define in the settings with advlink_styles:
http://www.tinymce.com/wiki.php/Plugin3x:advlink
You can use link_class_list https://www.tiny.cloud/docs/plugins/link/#link_class_list
Example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "link",
menubar: "insert",
toolbar: "link",
link_class_list: [
{title: 'None', value: ''},
{title: 'Dog', value: 'dog'},
{title: 'Cat', value: 'cat'}
]
});
Related
I use "CKEDITOR.stylesSet.add(...)" in a custom .js for my CMS. I can add custom styles for headlines, p-tag, ul here...but how can I add a "div", so that two children div will be in it?
I start to add a "div" in this way:
CKEDITOR.stylesSet.add("ifmstyle", [
{
name: "Custom DIV",
element: "div",
attributes: {
class: "custom-div",
},
},
]
..that means, that I have a div where I can place images, p-tags, a-tags for example. But I would like to make it like this (My custom div will have two children divs):
Custom DIV
children-div1
children-div2
image example
You're basing your code on this doc page, right?
https://documentation.bloomreach.com/14/library/concepts/document-types/html-fields/customize-ckeditor-styles.html
This is about the content perspective. You can change styling there but you can't change the markup unless you fork/rewrite some underlying Wicket code.
HTH
Jeroen
BTW community.bloomreach.com is more active then SO here
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I am not able to find a way to change the Ace-Editor that is built into the AllouUI widget. The example below is what I would like to achieve with the theme attribute.
YUI().use(
'aui-ace-autocomplete-base',
function(Y) {
var editor = new Y.AceEditor(
{
boundingBox: '#myEditor',
height: '200',
mode: 'python',
value: 'print("Hello there!!!")',
width: '700',
theme: 'chaos'
}
).render();
Sadly, there in the code there are no predefined ways I saw to change the theme.
Is there a way change the theme to ace editor for alloyui's widget?
Not sure if Y.AceEditor component exposes the required api, but you can try to get the real ace editor object, which allows to change the theme dynamically
document.getElementById('#myEditor').env.editor.setTheme("ace/theme/chtome")
You should be able to call AceEditor.getEditor().setTheme():
editor.getEditor().setTheme('ace/theme/twilight');
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
I am looking to add a title to the Kendo UI grid toolbar and align it left. Is there some way I can add an h2 or h3 to this area?
Also to style just this toolbar can I access the style property? ( I want to put a darker color/gradient to the top and bottom (where pagination is))
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
The class that identifies the Kendo Grid toolbar is k-grid-toolbar. So for styling it, you might use:
#grid .k-grid-toolbar {
background: red;
}
For adding some content to the toolbar, you can use:
$(".k-grid-toolbar", "#grid").prepend("<h1>hello</h1>");
or
$(".k-grid-toolbar", "#grid").before("<h1>hello</h1>");
$(".k-grid-toolbar", "#grid").after("<h1>hello</h1>");
depending if you want to add the HTML inside the div containing the buttons before or after it.
And grid is the id of the div containing the grid.
In Kendo-MVC parlance, the solution is quite simple:
#(Html.Kendo().Grid<MyGridsViewModel>()
.Name("MyGridsName")
.ToolBar(toolbar => toolbar.Template("<h4>My Grid's Title</h4>"))
.DataSource(datasource => ...
This works fine until you start getting crazy and attempt to use the Create/Custom buttons builders with the toolbar lambda.
In that case, the buttons are never rendered. The solution there is to use one of the other approaches identified in this thread: http://www.telerik.com/forums/custom-command-button-in-toolbars