I added two classes by table_class_list, but every time I create a table I have to open the advanced settings, choose the class, and save. Without that it doesn't use any class and is unformatted.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_class_list: [
{ title: 'None', value: '' },
{ title: 'No Borders', value: 'table_no_borders' },
{ title: 'Red borders', value: 'table_red_borders' },
{ title: 'Blue borders', value: 'table_blue_borders' },
{ title: 'Green borders', value: 'table_green_borders' }
]
});
I want the first class to always be selected by default, without me having to open the settings and hit save.
In our old version of tinymce we used to have nested dropdown in image_list in insert/edit image plugin, see the attached image. But recently we migrated to tinymce 5.4.2 and since then it's not working.
Old code:
tinymce.init({
selector: 'textarea',
plugins: 'image',
menubar: 'insert',
toolbar: 'image',
image_list: [
{
title: "LearnCenter", menu: [{ title: 'Logo', value: 'Logo' }]
},
{
title: "UserAccount", menu: [{ title: 'Photo', value: 'Photo' }]
}
]
});
Above code is not working anymore so we made changes, see below code:
image_list: [{ title: 'Logo', value: 'Logo' },
{ title: 'Photo', value: 'Photo' }]
But after this code change, nest dropdown is gone. Is there any way by which we can have same functionality that we used to have. See the attached image for expected functionality.
This feature, using TinyMCE 4.x JSON structure, is set to return in TinyMCE 5.5, which, as of the time of posting this, is scheduled to be available later this month.
I am using the latest Keystone.js and following is my Keystone.init
var keystone = require('keystone');
keystone.init({
'name': 'Dashboard',
'user model': 'User',
'auto update': true,
'auth': true,
'cookie secret': 'secure string goes here',
views: 'templates/views',
'view engine': 'pug',
'wysiwyg cloudinary images': true,
'wysiwyg additional plugins': 'example, autosave, charmap, table, '
+ 'advlist, anchor, wordcount, preview, fullscreen, importcss, '
+ 'paste',
'wysiwyg additional buttons' : 'undo redo charmap blockquote formatselect styleselect removeformat |'
+ 'example preview fullscreen bodytext',
'wysiwyg additional options': {
default_link_target: '_blank',
paste_as_text: true,
menubar: true, // added to test formats
'style_formats': [
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
],
formats: {
bodytext: {block : 'p', attributes : {title : 'bodyText'}, styles : {color : 'grey'}}
}
}, });
keystone.set('routes', require('./routes'));
keystone.import('models');
keystone.set('nav', {
'projects': ['Projects', 'Keywords'],
});
keystone.start();
What I get in the TinyMCE editor is Formats dropdown without any custom format inside it.
Does anyone has any idea how to solve it? I need to add a custom format to add a class to text, eg. image caption, body text etc.
After going to Keystone.js files I found out that it is using TinyMCE ver 4.4.3 and Keystone ver is 4.0 RC.
So, I found the solution, it was a silly mistake, the style_formats: is supposed to appear with the quote:
'wysiwyg additional options': {
default_link_target: '_blank',
paste_as_text: true,
menubar: true, // added to test formats
style_formats: [
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } }
],
formats: {
bodytext: {block : 'p', attributes : {title : 'bodyText'}, styles : {color : 'grey'}}
}
}, });
I hope if anyone else is also facing this issue, you can check if this solves it for you.
So I have a panel with a top and bottom toolbar that is created within the dockedItems config:
dockedItems: [
Ext.create('AM.view.TopToolbar',{}), // //This line alone breaks the app
{ //Toolbars
xtype: 'toolbar',
dock: 'bottom',
items: [
{ text: 'About', itemId: 'about' },
'-',
{ text: 'Legal', itemId: 'legal' },
...
The code works fine in FF, but breaks in IE9. I think it has to do with the syntax of my create statement, but I cannot find a solution on the forums.
Here's my TopToolbar class:
Ext.define('AM.view.TopToolbar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.toptoolbar',
defaults: { arrowCls: '' }, //Removing black arrow from toolbar items
items: [
{ text : 'Tools',
menu : {
items: [
//rest of my toolbar items and menus
All file structures are correct and working.
Namespace is 'AM'
Application breaks in Internet Explorer-have not tried in Chrome or Safari
I get this Error
: SCRIPT16389: Unspecified error.
ext-all.js, line 38 character 51878
Any ideas?
Cheers!
I'm having a bit of an issue with TinyMCE.
After saving the contents of the editor and redisplaying it all the HTML tags are visible.
This is how I'm initializing the editor:
tinyMCE.init({
setup: function (ed) {
ed.onSaveContent.add(function (ed, o) {
o.content = o.content.replace(/'/g, '&apos');
});
},
// General options
mode: 'specific_textareas',
theme: 'advanced',
encoding: 'xml',
entity_encoding: 'raw',
height: '500',
width: '100%',
plugins: 'autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave',
editor_selector: 'rich-text-area',
editor_deselector: 'text-area',
// Theme options
theme_advanced_buttons1: 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect',
theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor',
theme_advanced_buttons3: 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align: 'left',
theme_advanced_statusbar_location: 'bottom',
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
content_css: 'css/content.css',
// Drop lists for link/image/media/template dialogs
template_external_list_url: 'lists/template_list.js',
external_link_list_url: 'lists/link_list.js',
external_image_list_url: 'lists/image_list.js',
media_external_list_url: 'lists/media_list.js',
// Style formats
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
The data after its redisplayed:
The data as it is stored in the database:
<p>Testing</p>
See http://www.tinymce.com/wiki.php/Configuration:encoding
Seems like you need to comment encoding: 'xml' on your configuration.
Add this under init function:
tinyMCE.init( {
forced_root_block: false, // Start tinyMCE without any paragraph tag
} )
you can remove Html tags with the help of #Html.Raw()
<p>we are Arrivaler web and Mobile development</p>
index view
#Html.Raw(var.description)
result:
we are Arrivaler web and Mobile development
There is a option by which we get raw data from database which is stored in the form of html tags.
html.raw is used for this purpose
In asp.net #html.raw(object) is the solution for this problem
Remember to decode the string that will be passed to tinyMCE.
Use html_entity_decode function in php.