Did anyone successfully put 2 editors in different languages on the same page?
When I tried adding one editor in English and another in French, the first editor's top level menu items remained in English, but the drop down menus, tooltips and dialogue buttons all changed to French.
It seems that the last call to .init translates not only the ID provided in selector, but the other editor except the top level menus as follows:
This is the config I am using:
<textarea id="emailBody" rows="7" name="emailBody"></textarea><br />
<textarea id="emailBodyFrench" name="emailBodyFrench"></textarea><br />
<script type="text/javascript">
var oInitBodyEng = {
selector: "#emailBody",
language: "en_CA"
};
tinymce.init(oInitBodyEng);
var oInitBodyFr = {
selector: "#emailBodyFrench",
language: "fr_FR"
};
tinymce.init(oInitBodyFr);
</script>
Is there anything wrong with the way I am initializing the 2nd editor that might cause partial translation of the editor already initialized? Does any initialization have to be performed asynchronously?
Related
In my project I'm using AdminLTE from https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/js/adminlte.min.js but it doesn't load SidebarSearch.js on it.
How do I use this plugin in my project? Does anyone have a simple example to show me, because in the documentation itself it is not clear how to use this plugin.
mainly at this point:
$('[data-widget="sidebar-search"]').SidebarSearch('toggle')
Where in HTML / JS should I put this line of code?
To answer your question, simply add it in a script tag before the closing body tag of your page, example:
<html>
<head>
...
</head>
<body>
...
<script>
$(document).ready(function()
{
// Example to toggle dropdown list of the search bar
$('[data-widget="sidebar-search"]').SidebarSearch('toggle');
// Example to initialize the plugin with options
let options = {
arrowSign: '/',
minLength: 2,
highlightClass: 'text-yellow',
notFoundText: 'No results'
...
};
("[data-widget="sidebar-search"]").SidebarSearch(options);
});
</script>
</body>
</html>
However this method seems to return duplicate results.
Preferred method
Just add the options as attributes beside data-widget="sidebar-search".
It should look like this data-not-found-text='No results' data-highlight-class='text-yellow' data-min-length='2'
adminLTE documentation
I am using Confluence 5.10.8. On some pages I have several text snippets to be copied to the clipboard by the reader. For each of those text snippets I would like to be able to add a non-editable text field and a button to copy the text to the clipboard when clicking it, maybe like this:
I also need some visual feedback to indicate the text was copied.
I think a user macro is the right thing to do this, right? Something like (does not copy yet):
## #param Text:title=Text|type=string|required=true|desc=The text to be displayed and copied
<!-- font-awesome contains the clipboard icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span style="white-space: nowrap">
<input type="text" value="$paramText" size="$paramText.length()" readonly>
<button class="fa fa-clipboard" title="click to copy">
</span>
I was able to solve this using clipboard.js. I am not sure why, but it did not work when adding the <script> tag directly to the macro. So instead I have added it to:
Confluence administration → Custom HTML → Edit ( /admin/editcustomhtml.action ) → At the end of the BODY
<!-- used by copy-text user macro to copy stuff to the clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>
Confluence administration → User Macros ( /admin/usermacros.action ) → Create a User Macro
## Macro title: text to copy
## Macro has a body: Y
## Body processing: Rendered
##
## Developed by: https://stackoverflow.com/users/1948252/
## Date created: 2018-06-28
## #param AllowLineWrap:type=boolean|default=false
## strip tags (in case they were pasted) to remove any formatting
#set ($body = $body.replaceAll("<.*?>",""))
#if ($paramAllowLineWrap == true)
#set ($whitespace = "normal")
#else
#set ($whitespace = "nowrap")
#end
<!-- for the clipboard icon etc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
window.onload=function()
{
var clipboard = new ClipboardJS('.copy-text-button');
clipboard.on("success", function(e)
{
console.log(e);
var button = $(e.trigger);
var title = button.prop("title");
button.addClass("fa-check-square");
button.html(" copied to clipboard");
function reset()
{
button.removeClass("fa-check-square")
button.html("");
}
window.setTimeout(reset, 5000);
});
clipboard.on('error', function(e) { console.log(e); });
}
</script>
<span class="panel" style="white-space: $whitespace;font-family:monospace;font-size:1em">
<span class="panelContent">$body</span>
<button class="copy-text-button fa fa-clipboard" data-clipboard-text="$body" title="click to copy">
</span>
Remarks:
In my first attempt I used a parameter and no body. But as it turned
out, template variables cannot be used in macro parameters. So the
usage of the macro was very limited. Therefore I removed the
parameter and enabled the body.
Body Processing has to be set to Rendered. I also tried the other options (Escaped and Unrendered), but those did not work together with template variables.
I replaced the initial text field by a simple span to be able to enable line wrap. This also solved issues with " characters in the body.
I use that font-awesome <link> to have some icons (clipboard and
check-square). At the first attempt I added the <link> to that
field on the Custom HTML page (because there is also the clipboard
<script>), but then the macro preview had no icon and thus looked
broken. So I decided to add it directly to the macro.
On editing a confluence page you can use it with
Ctrl+Shift+A and then enter the
macro name. Seems to work well with multiple usage on the same page.
Also works with template parameters.
I've an issue on TinyMCE and Plone 5 but I'm not sure if the core of the problem is in Plone CMS or TinyMCE.
I'm adding custom styles in the TinyMCE control panel configuration ("TinyMCE Settings" --> "Inline styles").
The new configuration is something like this:
Bold|bold|bold
Italic|italic|italic
Underline|underline|underline
Strikethrough|strikethrough|strikethrough
Superscript|superscript|superscript
Subscript|subscript|subscript
Code|code|code
Custom style|customClass|custom-class
Then the TinyMCE editor renders the menu correctly:
But the news entry is "disabled", clicking on it will do nothing.
Inspecting the markup of the TinyMCE menu I find:
<div aria-checked="false" aria-disabled="true" role="menuitem" id="mceu_155" class="mce-menu-item mce-menu-item-preview mce-stack-layout-item mce-last mce-disabled" tabindex="-1">
<i class="mce-ico mce-i-custom-class"></i>
<span id="mceu_155-text" class="mce-text">Custom style</span>
</div>
So: TinyMCE is disabling it. The issue seems related to the class I'm using, not about the name I give or the missing icon.
If I use a duplicate of another style, like...
...
Custom style|italic|custom-class
...it works. The same if I use another well know Plone class like...
...
Custom style|discreet|custom-class
... but someway other classes are not allowed.
Is this related to TinyMCE internals? Is TinyMCE someway "testing" the class to enable/disabled them?
Or is this issue related to Plone?
After lot of debugging, loosing myself inside the mockup+Plone JSON conf+TinyMCE hell, I found a solution for that usecase:
Having additional and working inline style is a matter of both "Inline Styles" configuration...
...and "Formats" configuration...
So: you can easily configure this also through generic setup providing a registry.xml as follow:
<registry>
<record name="plone.inline_styles" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="inline_styles">
<value>
<element>Bold|bold|bold</element>
<element>Italic|italic|italic</element>
<element>Underline|underline|underline</element>
<element>Strikethrough|strikethrough|strikethrough</element>
<element>Superscript|superscript|superscript</element>
<element>Subscript|subscript|subscript</element>
<element>Code|code|code</element>
<element>Foo Bar Baz|foo|foo</element>
</value>
</record>
<record name="plone.formats" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="formats">
<value>{
"clearfix": {
"classes": "clearfix",
"block": "div"
},
"discreet": {
"inline": "span",
"classes": "discreet"
},
"foo": {
"inline": "span",
"classes": "foo"
}
}
</value>
</record>
</registry>
NOTE: this is not related to the content of the "Formats" menu.
Styles there are automatically loaded from the ++plone++static/tinymce-styles.css stylesheets thanks to the TinyMCE importcss plugin.
See https://github.com/plone/Products.CMFPlone/issues/492 and https://github.com/plone/Products.CMFPlone/issues/1264 for more.
When I put the string '' into a ZK Textbox, that is
<textbox value="<html>" />
it causes a JavaScript error in the browser
Uncaught SyntaxError: Unexpected token ILLEGAL
and I can see in the developer tools of the browser that the generated JS code is really incomplete:
zkmx(
[0,'g2JQ_',{dt:'z_y20',cu:'\x2Fdtag',uu:'\x2Fdtag\x2Fzkau',ru:'\x2Fzul\x2Fcomponent\x2Fmenu.zul',style:'width\x3A100\x25\x3B',ct:true},[
...
['zul.inp.Textbox','g2JQp7',{id:'tb',$$0onBlur:true,$$0onSwipe:true,$$0onError:true,$$0onAfterSize:true,$$0onChanging:true,$$1onChange:true,$$1onSelection:true,$$0onFocus:true,width:'500px',style:'font-size:11px;',_value:'
</div>
How can I escape the content of the textbox so that I can display any HTML code in the textbox?
I tried
Replace '<' with '> but then > is displayed.
I also tried
<![CDATA[ <html></html>]]>
but then it was literally displayed, that is, also the
<![CDATA[
UPDATE
It is somehow due to the fact that we have JSPs containing several ZK pages.
And the exact content what causes problem is the closing HTML tag
</html>
The workaround is the following:
Events.echoEvent("onLater", txtDescription, txtDescription);
txtDescription.addEventListener("onLater", new EventListener<Event>() {
#Override
public void onEvent(Event event) throws Exception {
txtDescription.setValue("<html>...</html>");
}
});
Normally you should get values from your composer or viewmodel, and then this problem doesn't exist.
If you want to do it in the zul, you can make a parameter in zscript like this :
<zscript>
<![CDATA[
String a = "<html>";
]]>
</zscript>
<textbox value="${a}" />
Here I created a fiddle so you can test it.
Many time we have saved HTML code in database but when we are going to display that saved value in zk page it show HTML code as well with data .
To resolve this issue we have to use HTML escape there are plenty of way to fix this
You can do it on Java side as well zul page and here is simple way how you can achieve in the zul page
<html>
<![CDATA[
${vm.accessYourValue}
]]>
</html>
I am having problem with autocomplete mode with dhtmlx combo.
The includes files are as follows:
// Images
<script>
window.dhx_globalImgPath="combo/dhtmlxCombo/codebase/imgs/";
</script>
// CSS
<link rel="stylesheet" type="text/css" href="combo/dhtmlxCombo/codebase/dhtmlxcombo.css">
// Required JS files
<script src="combo/dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script src="combo/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<script src="combo/dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script>
I have no issues with the code above and works well.
The following code I have on the page I have the combo itself is as follows:
<!-- HTML Combo -->
<div id="pickup" style="width:260px;"></div>
<!-- Initialisation of combo -->
<script>
var x = new dhtmlXCombo("pickup",260,"image");
// this works
x.loadXML("list.xml");
x.enableFilteringMode(true);
</script>
My problem is i want to use autocomplete mode by using the following line of code:
x.enableFilteringMode(true, "list.xml", true, true)
When i try the above line, it doesnt give error but it doesnt filter either. However im told to use a php file but i don't know what I need to put in the list.php file itself. I can code just dont know what to put in. Can anyone shed some light, the docs arent that helpful.
enableFilteringMode enables server-side filtering. It means that when you type something in the combo header, this text is sent to the script that is defined the second parameter of the method. The script generates XML with options that correspond the mask.
Therefore, you can't use static XML in this case.
You can find a demo of the dynamic loading in the dhtmlxCombo package:
dhtmlxCombo/samples/04_filtering/01_combo_big_db.html
Also, you can use dhtmlxConnector that provides a ready solutions for the server side (PHP, ASP.NET, etc.). The dhtmlxConnector package includes a demo with dhtmlxCombo, e.g.:
dhtmlxConnector_php_v10_110725/php/samples/combo/02_sql.html