I am trying to get a version of the widgetbootstrap working with the widgettemplatemenu and have run into a snag. This is coded straight from the example found at http://albatrossdigital.github.io/widgetbootstrap/
The screen displays properly:
When I click the gear icon, the menu drops down and then immediately disappears.
Here is my config.js:
CKEDITOR.editorConfig = function( config ) {
// %REMOVE_START%
// The configuration options below are needed when running CKEditor from source files.
config.plugins = 'dialogui,dialog,about,a11yhelp,basicstyles,blockquote,clipboard,panel,floatpanel,menu,contextmenu,resize,button,toolbar,elementspath,enterkey,entities,popup,filebrowser,floatingspace,listblock,richcombo,format,horizontalrule,htmlwriter,wysiwygarea,image,indent,indentlist,fakeobjects,link,list,magicline,maximize,pastetext,pastefromword,removeformat,showborders,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,undo,wsc,lineutils,widget,bootstrapVisibility,autogrow,bbcode,colordialog,devtools,custimage,div,divarea,find,flash,floating-tools,forms,iframe,liststyle,onchange,pagebreak,placeholder,preview,showblocks,stylesheetparser,tableresize,uicolor';
config.skin = 'moono';
config.extraPlugins = 'widgetbootstrap,widgettemplatemenu';
// %REMOVE_END%
config.height = 400;
config.toolbar = [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'Bold' ],
[ 'WidgetTemplateMenu' ]
];
allowedContent: 'p a div span h2 h3 h4 h5 h6 section article iframe object embed strong b i em cite pre blockquote small,' +
'sub sup code ul ol li dl dt dd table thead tbody th tr td img caption mediawrapper br[href,src,target,width,height,colspan,' +
'span,alt,name,title,class,id,data-options]{text-align,float,margin}(*);';
};
I am pretty sure I have all dependent plugins loaded properly.
Has anyone else run into this problem?
Thanks,
JG
Update to issue:
I have noticed some other odd behavior. I added a Styles combo to the page and it exhibits the same behavior as the gear icon. I click and the styles list drops down then disappears.
It may be a coincidence but it seems very odd.
Perhaps missing or corrupt dependency? Which, by the way I have checked pretty thoroughly.
Related
In https://www.mediawiki.org/wiki/Extension:TinyMCE, there a section with Toolbar buttons including a Citation/reference button which looks like this:
Furthermore, it says: "Depending on configuration, some or all of these buttons may be shown".
It is not clear however how to enable/disable specific buttons in LocalSettings.php.
In the https://www.mediawiki.org/wiki/Extension:TinyMCE/Configuration page, there are instructions on how to add buttons to toolbars, and based on that I have added this to my LocalSettings.php:
wfLoadExtension( "TinyMCE" );
$wgTinyMCEEnabled = true;
$wgTinyMCESettings = [
".tox-tinymce" => [
"toolbar+" => " | citation",
],
];
.tox-tinymce being the selector for the text box where TinyMCE applies.
The citation button does not appear currently, and before I debug, I'd like to know (1) if I am on the right track, and (2) how can i know the machine name of a button (I assume it's citation, but maybe it's "footnote" or "cite", it is not clear where to find the mapping of machine names to buttons).
I have gone through the mediawiki-extensions-TinyMCE-master
Inside custom plugin directory mediawiki/plugins I saw 12 custom plugins.
I have opened one by one plugin code I observed only 3 plugins wikitext, wikitoggle , wikiupload are loaded in tinymce plugin manager. Ex:-
tinymce.PluginManager.add('wikitoggle', wikitoggle);
I could enable these buttons directly in load-extensions.php.
wfLoadExtension( "TinyMCE" );
$wgTinyMCEEnabled = true;
$wgTinyMCESettings = [
"#wpTextbox1" => [
"toolbar" => 'wikitext wikitoggle wikiupload',
],
];
I saw wikireference code at the end it has plugin function defination.
function Plugin () {
// only load plugin if the 'cite' extension is enabled
// in the wiki, eg, if 'ref' tag is in extension tag list
if ( extensionTagsList.split('|').indexOf('ref') > -1 ) {
pluginManager.add('wikireference', function (editor) {
registerCommands( editor );
registerButtons( editor );
setup( editor );
});
}
}
Plugin();
// only load plugin if the 'cite' extension is enabled
// in the wiki, eg, if 'ref' tag is in extension tag list
from the plugin method comments I could figure it out how to load reference and comment buttons.
first we need to download and install Cite extension plugin
echo 'Downloading and installing Cite'
echo 'See https://www.mediawiki.org/wiki/Extension:Cite#Installation'
curl -O -L https://github.com/wikimedia/mediawiki-extensions-Cite/archive/refs/heads/master.zip
unzip master.zip
rm master.zip
mv mediawiki-extensions-Cite-master extensions/Cite
Enable reference and comment button in load-extensions.php
[
"toolbar" => 'reference comment',
],
];
TYPO3 11.5.4
I want to add a Plain HTML content element to a page, e.g.:
<style type="text/css">
h1#testheader { font-weight: bold; }
</style>
<h1 id="testheader">
Header
</h1>
(just as a simplified example)
But rendered output is:
<style type="text/css"> h1#testheader { font-weight: bold; } </style>
Header
I thought that style is allowed because I set:
lib.parseFunc.allowTags = ...,style,...
lib.parseFunc_RTE.allowTags = ...,style,...
but it doesn't work.
Setting
lib.parseFunc.htmlSanitize = 0
helps but is there something better to allow <style> in Plain HTML content elements?
EDIT:
Looking into the DB entry the html tags are not encoded, so no "<" or ">" instead of "<" and ">", so it's not an issue of the RTE.
After some more research (hours of hours again invested) I come to the conclusion that the only way is to extend the HTMLSanitizer.
The following sources have been used for this solution:
https://punkt.de/de/blog/2021/htmlsanitizer-in-typo3.html
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/9.5.x/Important-94484-IntroduceHTMLSanitizer.html
https://gist.github.com/ohader/2239dab247e18d23e677fd1b816f4fd5
The complete solution to allow <style>,<script> and <iframe> is shown below.
Still I am not able to allow <font> with this approach!
It's implemented in a local site package (gpcf_theme) and composer is used.
Add <style>,<script> and <iframe> to
lib.parseFunc.allowTags = ... style, ..., iframe, script, ...
in the TypoScript part of the site package.
style seems to be standard and is already part of this list.
The path to the local site package is:
local_packages/gpcf_theme
with a symbolic link to it from:
public/typo3conf/ext/gpcf_theme -> ../../../local_packages/gpcf_theme
These are the important file changes:
local_packages/gpcf_theme/composer.json:
{
"name": "oheil/gpcf_theme",
...
"autoload": {
"psr-4": {
"Oheil\\GpcfTheme\\": "Classes/"
}
},
...
}
local_packages/gpcf_theme/ext_localconf.php:
<?php
defined('TYPO3_MODE') || die();
...
$GLOBALS['TYPO3_CONF_VARS']['SYS']['htmlSanitizer']['default'] = \Oheil\GpcfTheme\MyDefaultBuilder::class;
...
local_packages/gpcf_theme/Classes/MyDefaultBuilder.php
<?php
namespace Oheil\GpcfTheme;
use TYPO3\CMS\Core\Html\DefaultSanitizerBuilder;
use TYPO3\HtmlSanitizer\Behavior;
use TYPO3\HtmlSanitizer\Behavior\Attr;
use TYPO3\HtmlSanitizer\Behavior\Tag;
class MyDefaultBuilder extends \TYPO3\CMS\Core\Html\DefaultSanitizerBuilder
{
protected function createBehavior(): \TYPO3\HtmlSanitizer\Behavior
{
// https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/9.5.x/Important-94484-IntroduceHTMLSanitizer.html
return parent::createBehavior()
->withName('common')
->withTags(
(new Tag(
'style',
Tag::ALLOW_CHILDREN + Behavior::ENCODE_INVALID_TAG
))->addAttrs(
(new Attr('type')),
...$this->globalAttrs
),
(new Tag(
'iframe',
Tag::ALLOW_CHILDREN
))->addAttrs(
...array_merge(
$this->globalAttrs,
[$this->srcAttr],
$this->createAttrs('scrolling', 'marginwidth', 'marginheight', 'frameborder', 'vspace', 'hspace', 'height', 'width')
)
),
(new Tag(
'script',
Tag::ALLOW_CHILDREN
))->addAttrs(
...array_merge(
$this->globalAttrs,
[$this->srcAttr]
)
),
// more tags...
);
}
}
After these changes of course you need to clear the TYPO3 cache and (not sure here) you need to do:
composer remove "oheil/gpcf_theme"
composer require "oheil/gpcf_theme"
The above is working now, but I am still happy for any expert to give some more insights in what is wrong or can be done better, perhaps easier?
And why does this not work for <font> ?
Example:
<font class="font713099">Some Text</font>
I'm using Tinymce 5.9.1 with template plugin.
I made a new template like this code with special css code :
templates: [
{title: 'green-box', description: 'box tiny green', content: '<div class="tiny-green-box"> Content </div><div class="p-1"></div></br>'},],
It works when edit content in one line. when i want to put multiple line there is a problem.
Tinymce duplicates template for every new line.
for example if i type line1 and press ENTER it will create new div and result will be something like this :
you can see in html code it repeates many time :
putting content inside an extra <p></p> tag can solve this problem.
final code must be something like this :
templates: [
{
title: 'green-box',
description: 'box tiny green',
content: '<div class="tiny-green-box"><p> Content </p></div><div class="p-1"></div></br>'
}
,],
The result HTML code will be like this :
<div class="tiny-green-box">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
I'm using tinymce a trying to extend a plugin to show a dialog with specific layout:
editor.windowManager.open({
title: 'Title of my dialog',
body: [
{type: 'label', text: 'my label'},
{ name:'my_input', type: 'textbox'},
// { type: 'text', html:'some content with <b>bold</b> if posilbe!'},
// { type: 'html', value:'<div>with custom formating</div>'}
]
}
I checked the the documentation for tinymce.ui several times but can find a way to add html or text component in the constructor of the dialog (like the comment rows in the example).
I know there is a option using a ready html template for the dialog.. but there are also a lot of events and triggers so using the constructor and .ui components is more suitable for my case.
I used to use JQuery UI dialog for this but ran into some issues after TinyMCE 4.0.
I have a TinyMCE plugin that lets people fetch the plain text version of their post in the WordPress editor. Then I show them that text using this:
var plain_block = {
type: 'container',
html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>'
};
ed.windowManager.open({
title: "Plain Text of This Post",
spacing: 10,
padding: 10,
items: [
plain_block
],
buttons: [
{
text: "Close",
onclick: function() { ed.windowManager.close();}
}
]
});
End result is a pretty plain-jane dialog box with some HTML and a Close button
I am using Tiny 4.3.3 for MODx
I need to add a
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.
I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.
Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please?
Thanks
It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)
I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.
Steps to be done, in order to achieve the desired solution:
tell the TinyMCE editor, that your elements are good using the two configuration keywords extended_valid_elements and custom_elements:
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.
create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case editor.css):
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:
plugin code:
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
The editor now looks like this:
and the source like in your example:
First of all you will need to modify the tinymce setting valid_elements and valid_children to your needs (add em to the valid_elements and em as child to the tags desired (probably p) to valid_children).
Second you will need an own plugin with an own drop down or button to insert this code.
You can add one or more tag structures simply using the template plugin.
See documentation
https://www.tiny.cloud/docs/plugins/opensource/template/
See interactive example:
https://codepen.io/gpsblues/pen/WNdLgvb
tinymce.init({
selector: 'textarea#template',
height: 300,
plugins: 'template code',
menubar: 'insert',
toolbar: 'template code',
extended_valid_elements: "emstart[*],emend[*]",
templates : [
{
title: 'emstart/emend',
description: 'Add a personal tag structure with personal tags <emstart></emstart> <emend></emend>.',
content: '<p class="classname"><emstart class="openImg"></emstart>Input text<emend class="closeImg"></emend></p>'
}
],
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px}'
});