I'm using Froala for my website CMS.
I'm trying to add unordered lists to the editor.
I've added the lists plugin like so:
<script src="js/plugins/lists.min.js"></script>
and when I init the editor, I add it to the tool bar buttons
toolbarButtons: ['fullscreen','undo', 'redo' , '|', 'bold', 'italic', 'underline',
'outdent', 'indent', 'fontSize' , 'lists', 'color',
'clearFormatting', 'insertTable', 'insertImage',
'insertFile', 'html'],
but it doesn't show up in the editor.
Why?
p.s.: I also tried adding 'insertUnorderedList' instead of 'lists'
I was using an incorrect setting in the toolbarButtons.
The correct terms are formatUL and formatOL, not lists.
https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons
Related
I want to create a content element where the editor can chose an icon to display on the frontend.
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'tt_content',
'CType',
[
'LLL:EXT:your_extension_key/Resources/Private/Language/Tca.xlf:yourextensionkey_newcontentelement',
'ServiceCE',
'example-registration',
],
'textmedia',
'after'
);
$GLOBALS['TCA']['tt_content']['types']['ServiceCE'] = [
'showitem' => '
--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
--palette--;;general,
header; Header,
bodytext;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel,
',
];
Here I'm creating the layout on the back-end to insert the content, with just a header and a bodytext.
There would be a lot of possible solutions:
dependent whether the icon should be assigned to pages or content elements work with the table pages or tt_content
your extension will provied the list of icons:
add an additional field with a select list for the icons to the records. put it into TCA (Configuration/TCA/Override/<table>.php). Make sure the value is the icon-name, so you do not need additional replacements in FLUID.
Add the rendering to the FLUID template where it belongs. As it should be available everywhere the Layout-templates would be a good place.
use sys_categories:
use the build in categories for providing icons to any record.
create some categories with either the icon as category image or use another field as the icon name. (You even could add another field especially for the icon name.)
For the rendering of pages or tt_content add a data processor to get the assigned sys_category-records of the data record and then render the first/all icon(s) of the record in the Layout-templates.
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:
I'am working with Typo3 V8
And I need to add some extra fields in BE so a have created an extension that allow me to add extra fields and it's working fine.
My problem is
All the fields are showing in all pages
some fields shouldn't be appearing in all pages
For example my home page contain a slider so in BE I have fields for uploading images but in other pages I don't need these fields to be shown.
You could add a special doktype that has the extra fields.
Let's assume it will be doktype 163, then in ext_localconf.php add:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addUserTSConfig(
'options.pageTree.doktypesToShowInNewPageDragArea := addToList(163)'
);
to add it to the list of page types above the pagetree.
In the same file register the icon for the doktype:
\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
\TYPO3\CMS\Core\Imaging\IconRegistry::class
)->registerIcon(
'apps-pagetree-mytype',
TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
[
'source' => 'EXT:' . $extKey . '/Resources/Public/Icons/Mytype.svg',
]
);
(Of course you need to add your svg image or use a different icon provider to register a bitmap)
In Configuration/TCA/Overrides/pages.php put:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'pages',
'doktype',
[
'Page type name',
163,
'apps-pagetree-mytype'
],
'1',
'after'
);
$GLOBALS['TCA']['pages']['ctrl']['typeicon_classes'][163] = 'apps-pagetree-mytype';
Instead of adding your custom fields with a call to \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes() you add them with:
$GLOBALS['TCA']['pages']['types'][163]['showitem'] =
$GLOBALS['TCA']['pages']['types'][\TYPO3\CMS\Frontend\Page\PageRepository::DOKTYPE_DEFAULT]['showitem']
. 'the list with your new fields';
This basically copies the fields from the default page type and adds them to your custom doktype.
Of course it's nicer to have the name of the page type in an XLIFF file and to have the doktype number as a constant in your code, but that's for you to add.
Based on the doktype you can render whatever the new fields are for.
Hopefully this was the complete list of settings for adding a page type :-)
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 was trying to understand how can we make drop-down values in dialog box easily authorable?
Select lists in dialogs can load their options dynamically from anywhere, so long as they are provided as an array of values in JSON format (from the docs):
[
{
value: "pink",
text: "Pink",
qtip: "Real Pink"
}
]
So one solution would be to:
Create a new template that would allow an editor to add/remove values from a list — make this editable for content authors as per any other content (e.g. using the page properties, or components that you can drag onto that template).
Create a Servlet that will parse those values & output them in the expected JSON.
Register that servlet, e.g. via a path (/bin/selectvalues).
Using the cqinclude xtype to load in your values:
i.e.
<select
type="select"
xtype="selection"
options="/bin/selectvalues"/>
If you are looking for a drop-in solution for this, take a look at http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html. This supports easily authorable lists of name/value pairs which can be used (without writing additional code) in:
Classic UI Dialogs
Touch UI Dialogs
Touch UI Asset Metadata Editor