I would like to use the inline editing feature for a title attribute of a custom document node. But the problem is aloha adds p and br tags when you hit enter in the content canvas but the title attribute shouldn't contains any markup or newline chars:
aloha:
placeholder: 'Enter title here'
autoparagraph: FALSE
'format': []
'table': []
'link': []
'list': []
'alignment': []
'formatlesspaste':
'button': FALSE
'formatlessPasteOption': FALSE
The part in the template I use for is this: <h1>{neos:contentElement.editable(property: 'title', node: node)}</h1>
Is this a feature, a bug or did I miss something? If this is a feature it would mean you can use the inline editing feature only for child nodes and properties with markup right?
Related
I would like to provide a .lead custom style in Tiny with some concerns:
.lead class applies only on p tag
.lead class is removed from any other tags like h2.
when.lead class is apply, only Lead style is highlighted in style dropdown, not p tag.
I am able to achieve this with following code:
style_formats: [
{ title: 'Paragraph', block: 'p', attributes: { 'class': '' } },
{ title: 'Lead', block: 'p', attributes: {'class':'uk-text-lead'} },
{ title: 'Headline 2', block: 'h2', attributes: {'class': ''} },
],
available to test here https://fiddle.tiny.cloud/paiaab/5
The issue is: if I use code editor to add a custom class to eg. h2 tag and save, Headline 2 is not highlighted as class is not empty (I guess). No style is highlighted in dropdown.
Please see https://cln.sh/4pwR5g
Is there a way to remove only .lead class from other tag than p when switching tag and allow other class. Or allow class that contain lead
A solution would maybe be remove only .lead class from h2 attributes?
Any help would be appreciated ;-)
i have some system codes in documents that i edit in tinymce. that codes should be represented by an interactive placeholder in the WYSIWYG editor.
It is like normal images but the result should be this Code instead (and not parsed to HTML):
[img]id=123&text=bla[/img]
I could not find any information on how to create this interactive placeholder element for custom elements...
any suggestions?
Like this, and set as a toolbar item
editor.ui.registry.addMenuButton('plugins', {
text: 'Plugin',
fetch: function (callback) {
var items = [
{type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
];
callback(items);
}
});
I have a requirement to disable/remove "Bold" option of out of box component "text" in CQ5?
Is it possible?
Yes.
The rich text editor can be configured based on your requirements as mentioned here.
Thus, for your requirement, create an nt:unstructured node "rtePlugins" under your richtext widget, and then create another nt:unstructured node "format" under rtePlugins and add the multivalued property called "features" with values as per your requirements i.e., italic and underline.
The json for the same is shown below,
text: { xtype: "richtext", name: "./text", hideLabel: true,
jcr:primaryType: "cq:Widget",
rtePlugins: {
jcr:primaryType: "nt:unstructured",
format: {
features: [ "italic", "underline" ],
jcr:primaryType: "nt:unstructured"
}
}
},
How to disable HTML Clean Up while in the editor mode? I'm in a need of allowing css format & inline html in code. The idea is to disable parser and html clean up action when pasting the code and entering the Editor for editing. Thanks.
You can provide an identity function as the parser attribute upon initializing the wysihtml5 editor. The below script is a coffeescript snippet that disables the cleanup completely.
enableWysiwyg: ->
#$el.find('textarea').wysihtml5
"style": false
"font-styles": false #Font styling, e.g. h1, h2, etc. Default true
"emphasis": true #Italics, bold, etc. Default true
"lists": false #(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": true #Button which allows you to edit the generated HTML. Default false
"link": false #Button to insert a link. Default true
"image": false #Button to insert an image. Default true,
"color": false #Button to change color of font
parser: (html) -> html
JavaScript version of the above code:
$('textarea').wysihtml5({
"style": false,
"font-styles": false,
"emphasis": true,
"lists": false,
"html": true,
"link": false,
"image": false,
"color": false,
parser: function(html) {
return html;
}
});
Actually, this is what the parser rules are for.
You can attach your custom rules to the included var wysihtml5ParserRules before instantiate the editor object or just create your own rules object and give to the editor's constructor.
For example, to allow the h1 and h3 tag in addition to the tags allowed in the distributed simple example rules, you'd need to set up as follows:
<form>
<div id="toolbar" style="display: none;">
<a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
<a data-wysihtml5-command="italic" title="CTRL+I">italic</a>
<a data-wysihtml5-action="change_view">switch to html view</a>
</div>
<textarea id="textarea" placeholder="Enter text ..."></textarea>
<br><input type="reset" value="Reset form!">
</form>
<!-- The distributed parser rules -->
<script src="../parser_rules/simple.js"></script>
<script src="../dist/wysihtml5-0.4.0pre.min.js"></script>
<script>
// attach some custom rules
wysihtml5ParserRules.tags.h1 = {remove: 0};
wysihtml5ParserRules.tags.h3 = {remove: 0};
var editor = new wysihtml5.Editor("textarea", {
toolbar: "toolbar",
parserRules: wysihtml5ParserRules,
useLineBreaks: false
});
</script>
Now, when you enter/paste <title>test</title> into the editor, while you're in the editor mode, and then switch to html view, you'll get <title>test</title>. And when you switch back to editor view, you'll get <title>test</title> again.
That was the general part.
Now, in your case, I'm not sure if it's the best idea to work with 121 custom parser rules (the count of HTML tags to handle) or if it wouldn't be better to take the time and dig into the source code to find a more performant solution (doesn't make much sense to tell a parser to actualy just return the input string anyway, right?). Furthermore, you said you want to allow CSS as well. So your custom parser rules will even extend.
Anyway, as a starting point, feel free to use my custom parser rule set from here: https://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js.
I have a static html form layout where i add extjs form fields using the "renderTo" config. In order to have form validation and simple submit methods i want to add the fields to a form panel. As the layout is managed by the html frame i don't want the form to be rendered by the panel (panel has html frame as contentEl and this should be used as is).
In extjs3 i could achieve this by adding the field not to the panel but to the BasicForm (formpanel.getForm().add(...)) but in extjs4 this method seems to be gone.
How can i do this using extjs4?
Thanks in advance.
Since you already have a Panel that uses the contentEl to render HTML into its body, I recommend to stick with this approach:
Replace the panel with an Ext.form.Panel instance - the configuration, particularly the contentEl config - can remain unchanged.
The code provided here will override a standard Ext class (Ext.layout.Layout) and introduce support for a 'renderItemTo' config property on child items of any Ext container or panel instance (including Ext.form.Panel).
The value of the config property should be the ID of an already rendered DOM node, e.g. a DIV element that is part of the HTML fragment used in as the contentEl of the parent container's body.
Ext.require(['Ext.layout.Layout'], function() {
Ext.override(Ext.layout.Layout, {
renderItem: function (item, target, position) {
if(item.renderItemTo) {
// render 'renderItemTo' components into the specified DOM element
item.render(item.renderItemTo, 1);
// don't allow container layout to seize the component
item.layoutManagedHeight = 2;
item.layoutManagedWidth = 2;
} else {
// just use standard Ext code for non-renderItemTo components
this.callOverridden(arguments);
}
},
isValidParent: function(item, target, position) {
// signal Ext that we are OK with were our 'renderItemTo' component is right now
// otherwise it would get moved during the layout process
return item.renderItemTo ? true : this.callOverridden(arguments);
}
});
});
Usage:
var panel = Ext.create('Ext.form.Panel', {
contentEl: 'form', // the DOM element ID that holds the HTML fragment for the body
title: 'My FormPanel with special FX',
items: [
{
xtype: 'textfield',
renderItemTo: 'text1', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 1',
},
{
xtype: 'textfield',
renderItemTo: 'text2', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 2'
}
]
});
I uploaded a working example to JSFiddle (note: resize the window if you experience a render problem - this is related to JSFiddle, not my override).
After digging through the layout system of ExtJS 4.1 i implemented a custom layout which moves the items after rendering to the desired position in the fixed markup. The result is the same as for the ExtJS 4.0.7 version from this thread. It seams to work for the ExtJS standard fields. I have some problems with my custom fields though.
Ext.define('Ext.ux.layout.Fixed', {
extend: 'Ext.layout.container.Auto',
alias: 'layout.uxfixed',
afterRenderItem: function(item) {
// move items with renderToFixedMarkup to desired position
if (item.renderToFixedMarkup) {
var target = Ext.getDom(item.renderToFixedMarkup);
this.moveItem(item, target);
}
},
isValidParent: function(item, target, position) {
// items with renderToFixedMarkup property are always positioned correctly
return (item.renderToFixedMarkup) ? true : this.callOverridden(arguments);
}
});
It can be used by setting "layout: 'uxfixed'" on the panel and the "renderToFixedMarkup" config on the items.