OnChange not reading attribute - tinymce

I have this
tinyMCE.init({
// General options
selector: 'textarea',
forced_root_block: "",
theme: "silver",
paste_text_sticky: true,
paste_text_sticky_default: true,
plugins: "paste,autolink,contextmenu,fullscreen,nonbreaking,template",
//plugins: "wordcount,paste,autolink,advlink,fullscreen,nonbreaking,template,inlinepopups,style",
// Theme options
//theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,undo,redo,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
//theme_advanced_buttons2: "cut,copy,paste,|,cleanup,removeformat,|,bullist,numlist,outdent,indent,hr,charmap",
//theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,formatselect,bold,italic,underline,forecolor,backcolor,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,bold,italic,underline,|,fullscreen",
//theme_advanced_blockformats: 'p,h1,h2,h4,h4,h5,h6',
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
//theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing: true,
theme_advanced_path: false,
// Example content CSS (should be your site CSS)
selector: "textarea",
content_css: "/css/admin.css",
setup : function (ed) {
ed.on('click', function () {
new_value = tinymce.activeEditor.getContent()
alert(new_value);
new_value = new_value.replace(/,/g, "☀");
alert(tinymce.DOM.getAttrib(ed,"data-hidden"));
hidden_Field = tinymce.DOM.getAttrib(ed,"data-hidden");
$("#" + hidden_Field).val(new_value);
});
},
});
How do I get the value of the data-hidden attribute of the textarea that was filled in. tinymce.DOM.getAttrib(ed,"data-hidden"); isn't find anything as hidden_Field is, set when I do the alert. I am guessing Tinymce is ignoring it but how do I stop it from ignoring the attributeo
Thanks

Related

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.

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>

How to set readonly attribute of a tinymce editor false?

I have a tinymce editor on a textarea of my page. I am initializing it in READONLY mode by setting readonly attribute as true. Please refer init below:
tinyMCE.init({
mode : "exact",
elements : "p_desc",
debug : false,
nowrap : false,
cleanup_on_startup : true,
fix_nesting : true,
readonly : true,
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '' ,
...
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
textCounter('p_desc','Charcount',4000);
});}
});
Now depending upon the value of a hidden input field on the same page, i am enabling edit using tinyMCE.get('p_desc').getBody().setAttribute('contenteditable', true);
The editor starts working in editable mode but the onKeyUp event defined in setup is still not working.
Someone please help.
You could try
tinyMCE.init({
readonly : true,
...
setup : function(ed) {
if (!ed.getParam('readonly')) ed.onKeyUp.add(function(ed) {
textCounter('p_desc','Charcount',4000);
});}
});

Setting language for TinyMCE 3.x

I'm using TinyMCE and wanting to display it in Spanish (es)
The TinyMCE version info is as follows
majorVersion : '3',
minorVersion : '3.9.2',
releaseDate : '2010-09-29'
The documentation says to download the language pack from here and copy the files to the appropriate
folders:
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/themes/advanced/langs/
/tinymce/jscripts/tiny_mce/plugins/<pluginname>/langs/
and also set
tinyMCE.init({
// General options
language: 'es',
mode: "textareas",
theme: "advanced",
relative_urls : false,
file_browser_callback : ekmUpload,
plugins: "safari,spellchecker,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,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1: "newdocument,save,print,|,code,preview,fullscreen,|,bold,italic,underline,strikethrough,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "image,template,|,cut,copy,paste,pastetext,pasteword,|,search,|,bullist,numlist,|,sub,sup,|,undo,redo,|,link,unlink,anchor,|,hr,removeformat,",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
content_css : " ",
editor_selector: "HTMLEditor",
height : '500',
width : '100%',
convert_urls : false,
inline_styles : true,
save_enablewhendirty: true,
save_onsavecallback: "SaveDocuments",
This answer here also gives the same advice.
But the language pack (zip file) only contains lang/es.js
Having does this, nothing appears in Spanish, the "format", "font-family" and "font-size" drop downs don't appear in Spanish.
What am i missing?
What you donwloaded is the language file for tinymce 4, you need the language pack for tinymce 3. You will get it here: http://www.tinymce.com/i18n3x/index.php?ctrl=lang&act=download&pr_id=1
See: http://www.tinymce.com/wiki.php/Configuration:language
example...
tinymce.init({
...
language: "sv_SE"
...
});
You have: language: 'es',

insert line break instead of <p> in TinyMCE

I have initialised TinyMCE as follows. I want to force line breaks when user presses enter and not the paragraphs. I'm trying following, but not working. I'm using TinyMCE version 3_3_8.
tinyMCE.init({
mode: "exact",
theme: "advanced",
elements: "textAreaId",
cleanup: false,
theme_advanced_toolbar_location: "",
theme_advanced_buttons1: "",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
height: 200,
width: 300,
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
oninit: InitPosition
}); //init ends
I tried to define forced_root_block : "", but still it is not working.
What am I doing wrong?
Simply add forced_root_block : false
Or if you want a wrapper: forced_root_block : 'div',
Works like a charm!
Instead try:
force_p_newlines : false,
force_br_newlines : true,
convert_newlines_to_brs : false,
remove_linebreaks : true,
I faced the same situation with TinyMCE 4. All my "Enter" (keyboard) resulted in a new <p>&nbsp</p> injected.
I didn't want to use forced_root_block : false so I figured something out in the tinymce.init function (each empty paragraph will be cleaned directly):
setup : function(editor) {
editor.on('PostProcess', function(ed) {
// we are cleaning empty paragraphs
ed.content = ed.content.replace(/(<p> <\/p>)/gi,'<br />');
});
}
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
https://www.tinymce.com/docs/api/class/tinymce.editor/#postprocess
What worked for me was:
tinymce.init({
...
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
Each linebreak is producing br tag with these settings.
SOURCE: http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines
The "forced_root_block : false" option works fine for TinyMCE 4.0.
Insert in theme functions.php the following code:
add_filter( 'tiny_mce_before_init', 'my_switch_tinymce_p_br' );
function my_switch_tinymce_p_br( $settings ) {
$settings['forced_root_block'] = 'br';
return $settings;
}
TinyMCE On Mozilla Firefox adds <div> instead <br> or <p>.
I found the solution:
Open Mozilla Firefox and put in the address:
about:config
Search the option and turn false:
editor.use_div_for_default_newlines
in tinyMCE 5 I needed to add 1 extra parameter
tinymce.init({
...
valid_elements: 'br',
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
Just add
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : false,
anywhere in tinymce.init