I have just started with Tinymce and am trying to build rich text editor on my web page using self-hosted package. After integration, setting the Theme to Advanced and Plugin to autoresize, I see the editor as -
Tinymce editor on web page (UI editor options looks distorted and not properly formatted)
I was expecting it to be something similar to what I see on Tinymce docs -
Tinymce editor on docs
Is this a Tinymce version specific or browser related issue? I tried downloading the latest version 5.8.2 (Development & Production), however the Themes I see are Silver & Mobile while it should be Simple & Advanced as I see in the official Tinymce documentations.
Also if I try to add multiple Plugins or Themes to my deployment as guided here, it doesn't reflect on my web page.
These is how I have initialized my Tinymce -
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script>
$(document).ready(function(){
if ($("#Test").length) {
tinyMCE.init({
// General options
mode : "exact",
elements : "Test",
theme : "advanced",
width : 800,
plugins : "autoresize",
content_style: " div, p { font-size: 14px; }"
});
}
});
</script>
It looks like you are using version 3 of TinyMCE (9+ years old). Upgrade to version 5 and it should be a lot better.
Related
I have a really strange problem. I added a blockstyle to the RTE of my TYPO3 website. It works fine everywhere except in Edge. Even in IE 11 it is working fine.
In Edge the blockstyle section is inactive the whole time (grayed out).
When I put the cursor into a text which already has a blockstyle it shows "unknown block style".
I am confused and so far found no info about Edge handling the RTE blockstyles different. Did I make a mistake with my code or is it a bug of Edge?
My code in RTE.ts:
RTE {
default {
contentCSS = path/to/RTE.css
showButtons = blockstylelabel, blockstyle, formatblock, bold, orderedlist, unorderedlist, insertcharacter, link, findreplace, chMode, removeformat, undo, redo, about
buttons {
formatblock {
removeItems = h4, h5, h6, pre, address, article, blockquote, footer, header, nav, div, aside, section, container
}
}
}
}
# configuration for introtext blockstyle
RTE.default.buttons.blockstyle.allowedClasses := addToList(introtext)
RTE.default.proc.allowedClasses := addToList(introtext)
RTE.classes.introtext.name = Introtext
# configuration for checkmarks blockstyle
RTE.default.buttons.blockstyle.allowedClasses := addToList(checkmarks)
RTE.default.proc.allowedClasses := addToList(checkmarks)
RTE.classes.checkmarks.name = USP Liste
Code in RTE.css
/* Block styles */
p.introtext {
font-size: 24px;
}
ul.checkmarks {
list-style: none;
padding-left: 1em;
}
This looks like Bug and should be fixed by the TYPO3 Core Team. The RTE should not has/need Browser Specific Configuration.
you could report the bug here :
https://forge.typo3.org/projects/typo3cms-core/issues
(you need to be signed in with your typo3.org account. before the page shows you the "new Issue" button.
Here is a list of things that help developers Find the Issue more quickly:
1) TYPO3 Version. (see the about module)
2) Installed Extensions (if your suspect they interact with the RTE)
3) Possible Javascript Errors. (press F12 and click the tab "Console")
4) Steps to reproduce the Issue.
The TYPO3 issue was closed with the following comment:
We are sorry, but we close this issue as now TYPO3 uses CKEditor and
RTEHtmlarea is no more supported by TYPO3 .
RTEHtmlarea development has stopped - it has been decoupled from the
core and its code is available on GitHub:
https://github.com/FriendsOfTYPO3/rtehtmlarea
If you still need this fixed please create a PR on GitHub
I am trying to migrate from tinymce version 4.1.9 to latest tinymce version 4.3.12. I have a custom button which fires an event and simultaneously toggle (change the image of the button). It works fine with earlier versions of tinymce (all versions of 3.x and 4.1.2) but now giving an error message in tinymce 4.3.12.
Error message is: Uncaught TypeError: self.addClass is not a function in chrome debug console.
I have checked the latest documentation and which clearly shows .addClass is part of the library (tinymce.dom.DOMUtils class).
See below part of the code I am using:
tinymce.init({
setup: function (ed) {
ed.addButton('autosave', {
image: '/images/autosave_disk_off.png',
cmd: 'autosave',
selectable: true,
onClick: toggleAutoSave,
onPostRender: function() {
var self = this;
self.addClass('classAutosave');
ed.on('autosaveStateChanged', function(e) {
self.active(e.state);
});
}});
}
});
I want to add a class to current element so that image switching can be done.
Can someone help to understand the reason why this code is not working in tinymce 4.3.12?
Is there alternate way to add class in onPostRender?
Thanks
I sort of figured out the reason, what I have done is that compared the code of tinymce.js version 3.1.10 and tinymce.js version 3.2.0. I chose 3.1.10 because this is the last version in which my addClass() works. This is breaking in and after from 3.2.0.
While comparing, I found a lot of code changes has been done for addClass() and removeClass() API's. I also found that internally tinymce is using self.classes.add('classAutosave') to add new class. So I tried the same way in my plug-in and it works. So far, I haven't found any documentation mentioning this change. I am still checking in tinymce forums probably I will open a ticket with tinymce dev. Will update answer if any new info arrives.
Observation:
Use self.classes.add('classAutosave') instead of self.addclass('classAutosave')for adding new class with tinymce 3.20 -> tinymce 4.3.12.
The icons that displayed here:
http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/default.html#/ are working fine, though if I copy paste the entire code and copy-paste it in my index.html in my local Ionic project that I created - the icons are not aligned.
[Screenshot]
[]1
Thing is, beside index.html - I really didn't change anything, so I'm not really sure what's causing it:
The <a> tags are with text-align: center after rendering ( "computed" in Firebug )
I though the Ionic version maybe outdated/too new, but version 1.1.1 works fine vs 1.0.0 in the demo URL.
Another thing to notice is that the code in the demo:
<style>
.slider-slide h3{
color:#fff;
margin-top:10px;
};
.scroll{ height:100%;};
</style>
should make the title "Games content" white ... but it's not affecting it.
Clarifying my debugging
Checkout my plunker for example: http://plnkr.co/edit/3wLO3MNgeMOESSBRA0Vp?p=preview
( code is exactly as in the GitHub example in the link above just I played with the Ionic version to see if maybe I have an outdated version of Ionic )
In my server I did:
> I created a new Ionic project, bower.json:
"ionic": "driftyco/ionic-bower#1.1.1"
> I edited files under www
> In www/index.html - I copy pasted the content of index.html from the Plunker
> Plunker works OK, but in my server I have Icons aligned to the left vs centered
Any thoughts ?
I am working with FusioChartsXT Trial Version.I am using this version for rendering charts in my cshtml pages.It is working fine .But showing a water mark as "Fusion Chart XT trial" below all charts.It is using single JavaScript file for rendering charts.. I am sharing code.
In my Layout page
<script src="~/Scripts/js/fusioncharts.js"></script>
<script src="~/Scripts/js/themes/fusioncharts.theme.zune.js"></script>
****In My View Page****
var dashboardChart = new FusionCharts({
type: chartType,
renderAt: "chartContainer",
width: chartWidth + 'px',
height: "350",
dataFormat: "xml",
dataSource: $('#xmlDoc').val()
,
"events": {
"renderComplete": function (eventObj, argsObj) {
loadResult();
}
}
}
But our company already had fusion chart license. It is 3.2.2.2.It is using in old project which not required in mobile devices
How I can use to my current development?
If You are using the Trial version the watermark is intended. And can not be removed by changing the code snippet you shared. If you have prior license files you need to replace your FusionCharts specific files with those old files and check whether they serve the purpose.
If not, you need to get in touch with FusionCharts, and buy / upgrade your license.
Hope this helps.
worked for me in FusionCharts version 3.11.3
add this css
[class*="creditgroup"]{
display: none;
}
I try to update tinyMce plugin to be able writing from right to left (like Arabic,Urdu,Persian) .
So i found this code in tinyMce support
tinymce.init({
directionality : 'rtl',
});
The problem is that i don't found where i can add this lines ?
So what is the file to edit this issue
Wait for you answer ... Thank you
Here's the documentation about TinyMCE configuration in ImpressPages - http://www.impresspages.org/docs/tinymce
And example plugins to get you started - http://market.impresspages.org/plugins/?q=tinymce
Download any of it, check how it's built and change to your needs.
Yes its works, i turn it on to support right to left:
For the default settings it was just edit Ip/Internal/Core/assets/tinymce/default.js
and add : directionality : 'rtl', over ipTinyMceConfig = function ()
For update the pluging FullTinyMCE http://market.impresspages.org/plugins/FullTinyMCE
i edited the file Plugin/TinyMceComplete/assets/tinymcecomplete.js
and add this line : tinyMceDefault.directionality = 'rtl';