I'm using the Infinite Ajax scroll plugin (http://infiniteajaxscroll.com/), which is working really good for me, except one thing.
I'm using all four extension (Trigger, Spinner,Paging, History, in this order) by default, the plugin hide all pagination links (generated by the server) and display the load more items link on the top (by History plugin) and on the bottom (by Trigger plugin) of the container.
I can override the link (both text and class) on the Trigger extension, but the History extension use the same values so you will see the same button above and under the container.
I tried to add the same parameters to the History extension but it is not working:
var ias = $.ias({
container: ".js-job-container",
item: ".item--job ",
pagination: ".pagination",
next: ".pagination-direction-tab-next",
delay: 0
});
ias.extension(new IASTriggerExtension({ text: "View more", html: '<a class="button button--view-more button--action">{text}</a>' }));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension({ text:'Previous elements', html: '<a class="button button--view-more button--action">{text}</a>', prev: '.pagination-direction-tab-prev'}));
Is there any option which i missed to override the default text and class?
Cheers,
Geza
This functionality is added in v2.1.2.
See textPrev and htmlPrev options.
Related
When user clicks on "blockquote" button (that is on toolbar) to insert blockquote element:
then TinyMCE will insert <blockquote> HTML element without any class. I want to change this so that it always inserts <blockquote> with class myClass (but only when blockquote is inserted by clicking on "toolbar" button, not when loaded):
<blockquote class="myClass">
...
</p>
</blockquote>
Do you know how this can be done/achieved?
I'm using TinyMCE 5.
Fiddle: http://fiddle.tinymce.com/Guhaab
UPDATE:
Sorry, my question wasn't precise enough: I want this class to be added just for elements added via the button, not when loaded.
Updated Answer:
The querent added:
I want this class to be added just for elements added via the button, not when loaded.
In that case:
Blockquotes are added to content by applying a predefined, default format called (you guessed it) "blockquote". You can override that default style to include a class when it is applied to content:
formats: {
// Changes the default format for blockquote to have a class of 'foo'
blockquote: { block: 'blockquote', classes: 'foo' }
},
Here is a Tiny Fiddle demonstration:
http://fiddle.tinymce.com/svhaab/1
Here's information about formats in TinyMCE:
https://www.tiny.cloud/docs/configure/content-formatting/
Original Answer:
One option would be to use a node filter to add this class to all <blockquote> elements:
https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter
https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.domparser/#addnodefilter
Here is a Tiny Fiddle example:
http://fiddle.tinymce.com/hvhaab/1
(ETA correct Fiddle link)
Note: As seen in the Fiddle, this approach will also add the class to <blockquote> elements that are loaded or pasted in to the editor as existing content - not just <blockquote> elements added via the button.
Also, if a <blockquote> element already has a (different) class, this will add your custom class to the attribute.
I have large data of content (newsletter) and I have added in Tiny Mce Editor. Contents looks fine but when I start typing (adding more content) it types very slow and I have to wait until it's done printing the character.
The issue is with large contents only not with small content.
You can check below demo link to test the above case. Paste the large content it source code and try to type in Tiny Mce editor not in source code.
https://www.tinymce.com/docs/demo/basic-example/
i faced similar issue. My problem was that in tinymce.init i had a function for update textarea:
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
Problem was that the function update textarea with every change, with every key press or color change. More content, more slower.
My solution here was simple, delete triggerSave from tinyMCE init and call tinymce.triggerSave() right before submitting form via submitting button:
<button type="submit" name="btn-addpost" onclick="tinyMCE.triggerSave();"><span class="glyphicon glyphicon-send"></span> Add Post</button>
Maybe you have similar problem.
I hope this will be in any way helpfull for you.
I am using TineMce with React js and facing the same problem. The problem was on every key press inside editor I was updating the form value which was causing the slow typing.
So instead of updating form on every key press I am updating at onBlur event now.
Below is my example for React js but you just have to implement onBlur event in your js code
const handleEditorBlur = (ed, event) => {
const content = event.getContent();
if (content) {
formik.setFieldTouched("content", true);
}
formik.setFieldValue("content", content);
}
<Editor
apiKey={process.env.MIX_TINYMCE_API_KEY}
onBlur={handleEditorBlur}
//onEditorChange={handleEditorChange}
//value={formik.values.content}
init={{
content_css: "writer",
plugins: "lists",
toolbar: "code",
}}
/>
im trying to create customizable menu in umbraco. i.e. user should be able to add /remove / edit any menu item in menu. (User will not be a developer)
but i dont know how to do that..i've heard about Macros but dont know much about them so cant use it.
I think this has been done before also..
Thanks in advance
Generally, your menu will reflect your node structure within umbraco. This is the easiest way to allow your clients control of the site's navigation. If there are nodes that you would rather not have in the menu, that you could use the umbracoNaviHide property on the document type.
Try out some of the starter kits that are available. They will come with macros that build the navigation based on your nodes and will give you a good idea of how they work. You can even start by using a starterkit and then just modify it as you like. That's what I would recommend as you start out with umbraco. Umbraco has about 4 or so built in starterkits and Our Umbraco has several more that other users have contributed.
To use the default navigation template provided with Umbraco:
If you log into the Umbraco backoffice and head over to the Developer section, should should see Scripting Files. Right-click Scripting Files and choose Create. Choose a filename, like Nav and and from the "Choose a template" menu, select Site Map, then click Create. You should end up with the following razor code:
#*
SITEMAP
=================================
This snippet generates a complete sitemap of all pages that are published and visible (it'll filter out any
pages with a property named "umbracoNaviHide" that's set to 'true'). It's also a great example on how to make
helper methods in Razor and how to pass values to your '.Where' filters.
How to Customize for re-use (only applies to Macros, not if you insert this snippet directly in a template):
- If you add a Macro Parameter with the alias of "MaxLevelForSitemap" which specifies how deep in the hierarchy to traverse
How it works:
- The first line (var maxLevelForSitemap) assigns default values if none is specified via Macro Parameters
- Next is a helper method 'traverse' which uses recursion to keep making new lists for each level in the sitemap
- Inside the the 'traverse' method there's an example of using a 'Dictionary' to pass the 'maxLevelForSitemap' to
the .Where filter
- Finally the 'traverse' method is called taking the very top node of the website by calling AncesterOrSelf()
NOTE: It is safe to remove this comment (anything between # * * #), the code that generates the list is only the below!
*#
#inherits umbraco.MacroEngines.DynamicNodeContext
#helper traverse(dynamic node){
var maxLevelForSitemap = String.IsNullOrEmpty(Parameter.MaxLevelForSitemap) ? 4 : int.Parse(Parameter.MaxLevelForSitemap);
var values = new Dictionary<string,object>();
values.Add("maxLevelForSitemap", maxLevelForSitemap) ;
var items = node.Children.Where("Visible").Where("Level <= maxLevelForSitemap", values);
if (items.Count() > 0) {
<ul>
#foreach (var item in items) {
<li>
#item.Name
#traverse(item)
</li>
}
</ul>
}
}
<div class="sitemap">
#traverse(#Model.AncestorOrSelf())
</div>
This will produce a ul/li menu of the structure of your site. You plug this into your template by inserting the macro.
Take a look at the default Top Navigation template for XSLT or Razor. That should give you an idea of where to start and how navigation generally works in Umbraco. I second Douglas' answer that the Navigation usually mirrors the content structure in the Content section.
If you really want a setup where you add items to the nav independent of the Content tree structure, then use a Multinode Tree Picker on your Home Page and have that be the navigation in your Top Nav macro.
How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?
What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.
The output should look like this
<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >
<img src="http://domain.com/imageGen.ashx?
image=%2fmedia%2f2813%2fDSC_2615.JPG&width=420" alt="DSC_2615" title="DSC_2615"
class="alignright">
</a>
I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue
Default umbraco tinymce add image interface is
<plugin loadOnFrontend="false">umbracoimg</plugin>
I was able to modify it to show additional field in the image selection interface, then render markup I want.
I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
Then if you are adding custom attributes, you might want to add them to \config\umbracoSettings.config
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
and \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.
There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.
I'm using jquery-ui tab example to add extra tabs. I changed that code to be able to add tabs that load a form via Ajax. I was able to create that just changing these:
var $tabs = $( "#tabs").tabs({
cache: true,
tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
//ajaxOptions: a
});
So I changed the tabTemplate to load the same Form always.
My problem is that I'm not sure how to retrieve, either to tell that every tag from that form use jquery-ui stuff, like buttons, datepickers, etc.
In a regular form I would do something like:
$("#btnRevisar").button()
But when we talk about form load via Ajax it is different.
and also, how can I try to differ one form from other one, if they are all named with the same name, is it possible?
Thanks guys
Carlos.
Within the tabs docs page, tab titled "Events" there is a "load" event. The "ui" argument gives you access to an object that includes the current panel that is loaded. If you are using same ID on forms, beware that ID's must be unique in a page.
var $tabs = $( "#tabs").tabs({
cache: true,
tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
/* add new option for load event*/
load: function( event, ui){
var $currTabContentPanel=$(ui.panel);
/* only look in currently loaded content for formClass*/
$currTabContentPanel.find('.formClass').doSomething()
}
});