TinyMCE displaying html tags after saving and reloading the data - tinymce

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(/&#39/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.

Related

How to update CSS class and rel attributes for anchor link in TinyMCE 5 file_picker_callback / callback() function

so I'm using TinyMCE 5 and can't find how to update CSS class="" and rel="" attributes for:
<a class="..." rel="...." href="data.url">data.text</a>
anchor link with callback() function?
Couldn't find solution through documentation:
https://www.tiny.cloud/docs/plugins/opensource/link/
https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback
and Google.
My TinyMCE 5 init() JavaScript example code:
tinyMCE.init({
//...
file_picker_types: 'file image',
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'file') {
tinymce.activeEditor.windowManager.openUrl({
title: 'File browser',
url: TINYMCE_FILE_BROWSER_URL,
onMessage: function (api, data) {
if (data.mceAction === 'fileAction') {
callback(data.url, { text: data.text, 'css_classes_attribute': 'int_mark_link' });
api.close();
}
}
});
}
},
//predefined CSS classes:
link_class_list: [
{title: 'None', value: ''},
{title: 'External Link', value: 'ext_link'},
{title: 'Internal Support Link', value: 'int_sup_link'},
{title: 'Internal Marketing Link', value: 'int_mark_link'},
{title: 'Other Internal Link', value: 'int_other_link'}
],
//...
});
Thanks in advance.
A rel can be set with the rel_list
rel_list: [
{title: 'None', value: ''},
{title: 'Rel nofollow', value: 'nofollow'},
{title: 'Rel sponsored', value: 'sponsored'}
],
Classes like this
link_class_list: [
{title: 'None', value: ''},
{title: 'Bold', value: 'classbold'},
{title: 'Extrabold', value: 'classextrabold'}
],

Custom Format not working in 'wysiwyg additional options'

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.

Remove "Blocks" in "Format" button dropdown menu in TinyMCE

I have this "Format" toolbar button in tinymce, and I just want to know if there's a way to configure it's dropdown list items and how.
For now I have "Headers", "Inline", "Blocks" and "Alignment",
and I want to remove "Blocks".
Thanks in advance :)
Here's a screenshot of what I want to remove:
tinymce dropdown menu item http://imageshack.com/a/img34/2654/wr2h.png
I know this post is old but it appears an answer was never provided. The following will create a custom format menu for the toolbar in TinyMCE 5.0
tinymce.init({
style_formats: [
{ title: 'Headers', items: [
{ title: 'Heading 2', block: 'h2' },
{ title: 'Heading 3', block: 'h3' },
{ title: 'Heading 4', block: 'h4' },
{ title: 'Heading 5', block: 'h5' },
{ title: 'Heading 6', block: 'h6' }
]
},
{ title: 'Blocks', items: [
{ title: 'Paragraph', block: 'p' },
{ title: 'Div', block: 'div' },
{ title: 'Blockquote', block: 'blockquote' },
{ title: 'pre', block: 'pre' }
]
}
]
});
can you try this?
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: '|'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table'},
tools: {title: 'Tools'}
}
});

Replace Episerver Commerce Editor (TinyMCE)

Is there anybody who knows how can I replace TinyMCE with the default editor on Episerver Commerce SP2?
Copy tiny_mce folder to eCommerceFramework\5.2\EPiServerCommerceManager\Shared\Apps\Core\Controls\Editors\
Copy TinyMCEEditor.dll to the \bin folder in your Commerce Manager site.
In the Commerce Manager site folder open appSettings.config. Change the 2 keys “HtmlEditorControl” and “AdminHtmlEditorControl” to the new editor path.
Create folder name “UserFiles” in the root folder of Commerce Manager site.
Done, enter Commerce Manager and test the editor.
Use the following Control :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="EditorControl.ascx.cs" Inherits="TinyMCEEditor.EditorControl" %>
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "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",
file_browser_callback : "filebrowser",
setup: function(ed) {
ed.onKeyPress.add(
function(ed, evt) {
}
);
},
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,charmap,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,code,|,preview",
theme_advanced_buttons3: "tablecontrols",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// 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' }
],
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
function filebrowser(field_name, url, type, win) {
fileBrowserURL = "../FileManager/Default.aspx?sessionid=<%= Session.SessionID.ToString() %>";
tinyMCE.activeEditor.windowManager.open({
title: "Ajax File Manager",
url: fileBrowserURL,
width: 950,
height: 650,
inline: 0,
maximizable: 1,
close_previous: 0
}, {
window: win,
input: field_name,
sessionid: '<%= Session.SessionID.ToString() %>'
}
);
}
</script>
<script type="text/javascript" language="javascript">
$(".ajax__htmleditor_editor_toptoolbar").each(function (index) {
$(this).html($(this).html() + "<img onclick=showImgManager('" + index + "') src='../FileManager/icons/img-add-32.png' class='ajax__htmleditor_toolbar_button' /><img onclick=showFileManager('" + index + "') src='../FileManager/icons/Files-add-32.png' class='ajax__htmleditor_toolbar_button' /><div style='display:none;float:left;width:100%;padding-top:5px;' id='divImgManager" + index + "'></div>");
});
function openFileManager(index) {
window.open("../FileManager/Default.aspx?sessionid=<%= Session.SessionID %>&input=" + index, "myWindow", "status = 1, height = 650, width = 950, resizable = 0")
}
</script>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 40%"
runat="server"></textarea>

TinyMCE image customization

How can I customize TinyMCE so that I'll be able to choose a css class for a specific image?
you can use the style_formats setting of tinymce to use the style plugin with classes of your own (using content_css setting too)
// Style formats
style_formats: [{
title: 'Styles'
}, {
title: 'Absatz 1',
block: 'p',
classes: 'absatz1',
exact: true
}, {
title: 'Absatz 2',
block: 'p',
classes: 'absatz2',
exact: true
},