I have correctly configured MoxieManager to be integrated with TinyMCE and all works fine. But I'd like to remove the "browse" button (which opens the MoxieManager dialog) from the "Insert link" dialog.
So from the following screenshot, the green should stay but the red should go.
Self answer, but I guess it will be helpful to other people as well.
Each TinyMCE plugin usually has a JS file located under plugins/[plugin_name]/plugin.js (or plugin.min.js, depending on if you are using the minified version). Those plugins usually call the editor.windowManager.open(), passing an object of configuration options to be applied to the newly opened window.
One of the values this object can have is body which is an array of the items to be displayed in the dialog. Each item has some options to be configured on its own, including the type property.
In the below example, I have used plugins/link/plugin.js to show the difference needed to replace the (default) text field with the file browser button - with the standard text field without the browse button.
win = editor.windowManager.open({
// ...
body: [
{
name: 'href',
type: 'filepicker',
filetype: 'file',
// ...
},
// More code follows here
And the new version:
win = editor.windowManager.open({
// ...
body: [
{
name: 'href',
type: 'textbox',
filetype: 'file',
// ...
},
// More code follows here
Or, if you don't want to change the source .. say you're using a minified version etc, you can disable it via CSS:
div[aria-label="Insert link"] .mce-btn.mce-open {
display: none;
}
add it to you config
file_picker_types: 'media image'
file_picker_types
This option enables you to specify what types of file pickers you need
by a space or comma separated list of type names. There are currently
three valid types: file, image and media.
https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#file_picker_types
Related
I installed the TinyMCE editor on top of a fresh Connections 6.5.1 installation. While syntax highlighting using the codesample plugin is enabled out of the box, it works only for certain languages. I found the codesample_languages, which were overriden like described in this article.
externalPlugins: [{
name: "codesample",
url: "/connections/resources/web/tiny.editors.connections/tinymce/plugins/codesample/plugin.min.js",
settings: {
codesample_global_prismjs: true,
codesample_languages: [
{ text: 'ASP.NET (Core)', value: 'aspnet' },
{ text: 'Apache', value: 'apacheconf' },
{ text: 'Bash', value: 'bash' },
{ text: 'C#', value: 'csharp' },
{ text: 'C++', value: 'cpp' },
{ text: 'CSS', value: 'css' }
]
}
}
]
Now its possible to select them in the editor. But they don't work because the embedded PrismJS from the editor only support extend, insertBefore, DFS, markup, xml, html, mathml, svg, css, clike, javascript, js, c, csharp, cs, dotnet, cpp, java, markup-templating, php, python, py, ruby, rb.
So I loaded the missing plugins from a cdn, e.g. the batch plugin. Including it in header.jsp doesn't work because the Prism namespace is not initialized. In the footer.jsp it seems to have no effect, assuming that PrismJS is already initialized.
Customizing the webresource archive
PrismJS seems to be fetched from https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js so I extracted tiny.editors.connections_4.2.1.1.jar in /opt/IBM/shared/provision/webresources, modified resources/render/prism.js and re-packed those folter:
[centos#cnx65 webresources]$ zip -r tiny.editors.connections_4.2.1.1.jar resources/render/
After restarting Common and Wiki (the application where I'm testing TinyMCE), there is still no syntax highlighting for Bash. Altough when I'm navigating to https://cnx65.internal/connections/resources/web/tiny.editors.connections/render/prism.js, I see the Bash plugin code which I have inserted. To see which languages are avaliable, I append
console.log(Object.keys(Prism.languages))
at the end of the file. This gave me an array containing bash. So the plugin is avaliable, but why doesn't TinyMCE show syntax highlighting?
PrismJS was not the problem: Connections changed the way how they use PrismJS. In the past, they just append the class so that we need to include prisms css/js files in the rendered page (e.g. header/footer.jsp). But it seems that since 6.5.1 (CR1), the TinyMCE editor calls PrismJS when a code block is changed. After pressing save, the editor places the entire parsed highlighted HTML with inline css in its HTML.
As a consequence, it's not enough to reload the rendered page in read mode because it was rendered before the lighlight plugin was added. The highlighting works when we click on edit and make a double click in the code block. Then click save in the code modal and also in the wiki page. Now it works:
Highlight in the editor, too
I found out that resources/render/prism.js is responsible for the readonly view, but not the editor itself. If we only add the plugin there, we get no highlighting in the edit view
To fix this, we need to edit resources/tinymce/tinymce-bundle.min.js inside the TinyMCE archive. Add the plugin JS code in the plugins section. For example, before Prism.languages.csharp=.... Now add the modified file to the archive
[centos#cnx65 webresources]$ sudo zip -r tiny.editors.connections_4.2.1.1.jar resources/tinymce/tinymce-bundle.min.js
and restart common + the application you're using (e.g. Wikis). Now the highlighting works both in the readonly view as well inside the editor:
By default TinyMCE (4) has a "Paragraph ▼" dropdown, and if you click on it you get a list of formatting options ("Paragraph", "Heading 1", etc.).
I'd like to be able to do two things. First, I want to change the options and their names (eg. to "Normal" and "Heading"), and I found the block_formats option which does exactly that:
block_formats: 'Normal=p;Heading=h1'
However, I'm stuck on thing #2: adding classes to the generated elements. Instead of plain <h1> elements, when someone picks "Heading" I want to generate a <h1 class="heading">.
I thought maybe this would work:
block_formats: 'Normal=p;Heading=h1.heading'
... but it doesn't, and I haven't been able to find any other option that would let me do this. Then again, the TinyMCE documentation isn't always the easiest place to find answers, which is why I came here.
Does anyone know how I configure TinyMCE to have a "Paragraph ▼" dropdown with customized names AND custom classes on the generated elements?
I never did find a way to do this, so what I wound up doing instead was remove the block format drop-down entirely and replace it with the (custom) format dropdown. In other words I:
removed the formatselect from the toolbar1 config (removing the un-configurable normal formatting dropdown)
added the custom format dropdown (styleselect) to the toolbar1 config
defined a style_formats config entry with my custom styles
The style_formats config looked like this:
style_formats: [
{
title: 'Header',
inline: 'span',
classes: 'someClass',
styles: {someStyle: '5px'}
},
], // next style would go here
There were only two downsides of this approach. First, the dropdown now says "Formats", and I don't seem to be able to configure that anywhere. However I do have a single formatting dropdown, with only the options I want, and those options add the desired classes to the formatted text, so the dropdown's name isn't a big deal.
The second issue was that TinyMCE uses an <iframe>, which prevents it from using our stylesheet. I could have written a stylesheet for TinyMCE and then appended it to the <iframe> (or used some TinyMCE mechanism, if there is one) ... but I'm lazy so I just used style: entries for each custom format to define the style.
I made a combobox using sap.m library:
var oSelection = new sap.m.ComboBox({
name: <name>,
id: <id>,
items: {
<items here>
})
},
});
Now, how do I make this field kind of read only, so when I tap it on mobile, it wouldn't bring up the mobile's keyboard, but it would bring up the selection options?
I've tried to use editable: false, but it disables the selection together with keyboard.
Thank you.
From what I could find out there's no method that allows such behaviour.
One option, that I personally would not advice, is to access the HTML DOM and disable the input field that composes the sap.m.Combobox component.
Keep in mind that if the development SAPUI5 changes the inner workings of the Combobox component your code could be broken if you update the SAPUI5 libraries.
This being said, to use this option you could do something like:
oSelection.onAfterRendering = function() {
if (sap.m.ComboBox.prototype.onAfterRendering) {
sap.m.ComboBox.prototype.onAfterRendering.apply(this);
}
document.getElementById("<id>-inner").disabled=true;
}
replace the < id>-inner by the correct id given to your component.
This was tested using version 1.22.8 of SAPUI5 development toolkit.
Use sap.m.Select instead of sap.m.ComboBox.
Select does not provide the ability to edit the field content.
In many instances the Select control can directly replace a ComboBox without any other changes to the properties or the items aggregation!
I've created this simple plugin and it removes admin links menu from admin panel.
<?php
/*
Plugin Name: admin menu remover
Description: Remove the admin menus just by a single plugin installation
Version: 1.0
Author: Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/
function remove_links_menu() {
remove_menu_page('index.php'); // Dashboard
remove_menu_page('edit-comments.php'); // Comments
remove_menu_page('themes.php'); // Appearance
//remove_menu_page('plugins.php'); // Plugins
remove_menu_page('tools.php'); // Tools
remove_menu_page('options-general.php'); // Settings
remove_menu_page('users.php'); // Users
}
add_action( 'admin_menu', 'remove_links_menu' );
?>
It removes 6 menus instantly after the installation. 1 line (plugins) is commented out.
Now I want to add setting option to the plugin where the user would be able to select which menu should be removed.
There should be a check box on the plugin setting where we can select which menu should be shown and hidden.
you can save the options in the _options table using update_option( $option, $new_value )
then you can use get_option( $option, $default ) to read the value from the database.
You'll have to be a little carefull when naming your option so it won't conflict with other options names (use of a prefix should fix this)
So I've used FCKeditor for TinyMCE. This integrated easily and gave my customers a nice way to upload files while selecting them. To integrate this I used the following code:
function fileBrowserCallBack(field_name, url, type, win) {
var connector = ROOT + "path/to/tiny_mce/filemanager/browser.html?Connector=connectors/php/connector.php";
connector += "&Type=" + type;
browserField = field_name;
browserWin = win;
window.open(connector, "browserWindow", "modal,width=600,height=400");
}
And file_browser_callback: "fileBrowserCallBack" in the TinyMCE call.
Now I want to use this same function to fill a simple input-tag so my users can select an image for a custom background.
Now I created an onClick event on this input field that opens the file-browser. But when I select a file I get the following javascript error:
TypeError: window.top.opener.tinyfck is undefined
So how can I use this same plug-in as a regular file-browser making it return the selected file?
Edit: The actual name of the plug-in I used is TinyFCK
Unfortuanatly, this is not possible. The tinymce image uploader needs the tinymce document structure which is not present when you use another kind of editor.