multiple tinymce textareas - html

I use tinymce for a webpage that dynamically generates at least 5 texts.
The configuration I use only works on the first textarea unfortunately.
tinyMCE.init({
height : "300",
mode : "exact",
elements : "content",
theme : "simple",
editor_selector : "mceEditor",
...
<textarea class="mceEditor" name="content" rows="15" cols="40">content</textarea>
What's the configuration to enable tinymce editing in all textarea's.


If you're using "exact" mode you'll need to specify the ids of the elements you wish to convert to editors.
function initMCEexact(e){
tinyMCE.init({
mode : "exact",
elements : e,
...
});
}
// add textarea element with id="content" to document
initMCEexact("content");
// add textarea element with id="content2" to document
initMCEexact("content2");
// add textarea element with id="content3" to document
initMCEexact("content3");
Or, you can use the "textarea" mode, which indiscriminately applies the editor to all textareas.
function initMCEall(){
tinyMCE.init({
mode : "textareas",
...
});
}
// add all textarea elements to document
initMCEall();
Just remember that if you're creating textareas dynamically, you will need to call tinyMCE.init() after creating the elements, because they need to be existing for tinyMCE to be able to convert them.
Here is the documentation on modes.


For TinyMCE 4.0 you have to use a selector or defining a tinymce.init object/method for each desired configuration (https://www.tinymce.com/docs/get-started/multiple-editors/).
For example, this is a page with 3 editors:
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditable-h1',
toolbar: 'undo redo'
});
tinymce.init({
selector: '.standard-editor'
});
</script>
</head>
<body>
<form method="post">
<h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
</form>
<form method="post">
<div id="myeditable-div1" class="standard-editor">
<p>This section1 of content can be edited...</p>
</div>
<div id="myeditable-div2" class="standard-editor">
<p>This section2 of content can be edited...</p>
</div>
</form>
</body>
</html>


You should use different mode in your configuration. For example mode: "specific_textareas" to work for all textarea with a given class which is specified in the editor_selector parameter.
In order to work on all textareas with class mceEditor you can use this:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor",
.....


use class in selector
i have two or more textarea that i want init those with tiny int so
<textarea class="mytextarea"></textarea>
<textarea class="mytextarea"></textarea>
.
.
.
in init tinyint code:
tinymce.init({
selector: 'textarea.mytextarea',
plugins : 'advlist autolink link lists preview table code pagebreak',
.
.
.


selector: 'textarea#new_f2f_feature_tech_notes,#new_f2f_feature_desc'
We can add multiple tinymce textarea like above lo


According to tinymce.com/wiki.php/Configuration:selector, selector is the recommended way of selecting what elements should be editable.
For all textarea elements, as requested:
selector: "textarea",
Or more elegantly, only those elements with a specific CSS tag:
selector: "textarea.editme",
<textarea class="editme">

Related

html() method in jquery need to return textarea with value

I'm trying to store the html element of a table which includes textarea tags also.
I need to store the textarea with value when I call html() method in jquery.
Code in html:
<div id="test">
<textarea></textarea>
</div>
After user input for textarea field, for example user inputs "Mango".
Then when I call
var test = $('#test').html();
it should return the output as "< textarea >Mango< / textarea >"
Any ideas please. Thanks in Advance.

A <textarea> can contain innerHTML, which is displayed when there's no value:
$("#test textarea").append("<strong>Inner</strong> html");
console.log($("textarea").html())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"><textarea></textarea></div>
though it's mostly ignored (as shown above) and lost when user enters a value.
So we can take advantage of that by setting the HTML to the value just before reading the HTML and it should work. Here's a snippet that loops through all text areas as sets their HTML to the value:
// empty on load
console.log($("#test").html())
$("button").click(() => {
$("textarea").html(function() { return $(this).val(); });
// output the outer #test div's innerHTML
// includes both textareas and their newly set HTML
console.log($("#test").html())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<textarea></textarea>
<textarea></textarea>
</div>
<button>click me</button>

TinyMCE 4 - allow AlpineJS attributes for all HTML tags

I want to allow all Alpine JS components (x-data, x-init, etc.) as attributes for all HTML tags in TinyMCE 4.
I tried to add them via a rule for extended_valid_attributes in different ways, but everything fails. Either they are still stripped from the code or they become valid, but all other attributes are then stripped.
Here are some examples of what I already tried, most of it I found in answers to other tinyMCE questions here (e.g. TinyMCE 4 - add custom styles/classes/attributes to any HTML tag) and read in the tinyMCE docs (https://www.tiny.cloud/docs-4x/configure/content-filtering/#extended_valid_elements, https://www.tiny.cloud/docs-4x/configure/content-filtering/#controlcharacters):
$alpineAttributes = 'x-data|x-init|x-show|x-text|x-html|x-model|x-for|x-transition|x-effect|x-ignore|x-ref|x-cloak|x-teleport|x-if|x-id';
$settings['extended_valid_elements'] = '*['. $alpineAttributes .']';
-> select all elements via *: doesn't work, the alpine attributes still get stripped
$settings['extended_valid_elements'] = '#['. $alpineAttributes .'],div,a,p';
-> here at least the attributes don't get stripped anymore for div, a and p tags, but all other attributes that would normally be allowed for each of those three now get stripped, because the list of allowed attributes doesn't get extended but overriden with my attributes.
$settings['extended_valid_elements'] = '#['. $alpineAttributes .'],*';
-> doesn't work, the alpine attributes still get stripped
$settings['extended_valid_elements'] = '#['. $alpineAttributes .']';
-> doesn't work, the alpine attributes still get stripped
Is there really no way to just EXTEND the list of allowed attributes for each element instead of completely overriding it with my rules in extended_valid_elements?

We can solve this issue using different strategy. We can change Alpine prefix from x- to data-x-.
As per the HTML standard x-data, x-init ... are not valid "custom attributes". The attributes need to have prefix data-.
TinyMCE allows data-* custom data attributes by default, without having to specify them in any rules. So instead of forcing Alpine prefixes on TinyMce we can simply change the prefix on Alpine, using Alpine.prefix("data-x-").
Demo: on codepen
<!DOCTYPE html>
<html>
<head>
<style>
#output {
font-family: monospace;
font-size: 0.9em;
color: rgb(83, 23, 23);
}
</style>
</head>
<body>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://unpkg.com/alpinejs#3.8.1/dist/cdn.min.js"></script>
<script>Alpine.prefix("data-x-");</script>
<p data-x-data="{date:'Date: '+ new Date().toISOString()}" data-x-text="date">date place holder</p>
<textarea id=editor>Tiny!</textarea>
<input type="button" id="btn" value="Show editor HTML content" />
<div id=output></div>
<script type="text/javascript">
let content = `<br><p data-x-data="{date: 'Date: '+new Date().toISOString()}" data-x-text="date">date place holder</p>`;
tinymce.init({
selector: '#editor',
schema: 'html5',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(content);
setTimeout(() => Alpine.initTree(editorDOM()), 200);
});
}
});
btn.onclick = function () {
output.innerText = tinyMCE.activeEditor.getContent();
}
function editorDOM() {
return (editor_ifr.contentWindow
? editor_ifr.contentWindow.document
: editor_ifr.contentDocument).body;
}
</script>
</body>
</html>
The alpine x-text attribute works inside the editor as well, and it shows current date. This is because TinyMce allows our data-x-text attribute.
Note:
In the demo I've used TinyMce latest version 5. It works on version 4 as well. Tested using following CDN:
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>
TinyMCE doesn't work on StackOverflow because of iframe restrictions that is why I've provided the codesandbox link.

Can't get polymer databinding to custom html tag to work while it works on standard tags

I'm using polymer 1.3.1 but can't get the following to work inside a polymer-element named: poly-main. The text of the <div> should be in red but isn't.
<div testcolor="[[colorLocalRed]]">
-->ERROR This must be RED because testcolor="[[colorLocalRed]]"
(expected "myred" and styles.css translates this to color="red")
</div>
with the following at the start of the script tag:
Polymer({
is: 'poly-main',
properties: {
colorLocalRed: {
type: String,
value: "myred",
notify: true
},
And the following inside styles.css:'
[testcolor="myred"] {
color: red;
}
Note: the following works as it should:
<div testcolor="myred"> some red text </div>
Not using the custom tag testcolor but using directly style or color is not an option because this example is only to show the problem of databinding to a non-standard html-tag

I guess this is what you want:
<div testcolor$="[[colorLocalRed]]">
Adding $ to the attribute name binds to the attribute instead of the property which can't be addressed in CSS.
For more details see https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding

How do you produce a dialog box on hover over checkbox via jQuery

Since I don't know much about jQuery I have am not being able to produce a dialog box on hover over a checkbox. Any suggestion would be helpful. Below is my code:
<input type="checkbox" id="employee-id" name="employeeId" onmouseover="produceDialog()">
<div id="employee-info-div"></div>
Similarly my jQuery is:
produceDialog(){
$("employee-info-div").dialog({
open : function ( event, ui ) {
$(".ui-dialog-titlebar-close").hide();
},
dialogClass : 'fixed-dialog',
resizable : false,
height : 150,
width : 250,
modal : false,
create : function ( event ) {
$(event.target).parent().css('position', 'fixed');
},
});
}

This may be the example you are looking for:
Working jsFiddle here
Below is a stand-alone example, which should just be copy/play.
Notes:
The element $('#employee-info-div'); was assigned to a variable to make code more efficient and faster to type. (More efficient b/c only check DOM once for the element, retrieve from variable after that.)
Used jQuery hover() method to open the dialog, but initialized the dialog separately (upon document ready). Note that the hover method must have two functions associated with it; the second function need not do anything but it must be there.
The hover-IN method assigned to the class $('.employee-id') runs the code $('#employee-info-div').dialog('open');, which opens the dialog. Note that the 2nd element is accessed via variable name.
Copy/Paste the following code into a separate document in your webroot and run, OR just use the above jsFiddle link to see it all in action.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
#employee-info-div{
width:40%;
float:right;
padding:5px;
background:wheat;
color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var eid = $('#employee-info-div');
var blurb = '<h2>Employee Information:</h2>Here is some example information about this employee. It can be text inserted like this, or it can be information retrieved from a database via AJAX. For simple AJAX examples, <a target="_blank" href="http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843"> see this StackOverflow post </a> (remember to upvote any posts that are helpful to you, please.)';
function hovIn() {
$(this).css({'font-weight':'bold','color':'blue'});
eid.html(blurb);
eid.dialog('open');
}
function hovOut() {
//eid.html(''); //<-- Causes dlg text to appear/disappear as you move mouse on/off checkbox and label
$(this).css({'font-weight':'normal','color':'black'});
}
$('.employee-id').hover(hovIn, hovOut);
eid.dialog({
autoOpen:false,
title:"Your jQueryUI Dialog",
show: "fade",
hide: "fade",
width:500, //orig defaults: width: 300, height: auto
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
}); //END eid.dialog
}); //END $(document).ready()
</script>
</head>
<body>
Hover over below checkbox to see hidden DIV:<br><br>
<input type="checkbox" id="employee-id" class="employee-id" name="employeeId" ><span class="employee-id">Hover over this checkbox</span>
<div id="employee-info-div"></div>
</body>
</html>

You can bind the hover event to your checkbox:
$("#employee-id").hover(function(){
// call your produceDialog function here
});

HTML : How to retain formatting in textarea?

I am using HTML textarea for user to input some data and save that to App Engine's model
The problem is that when I retrieve the content it is just text and all formatting is gone
The reason is because in textarea there is no formatting that we can make
Question:
is there any way to retain the format that user provides?
is there any other element(other than textarea), that i'll have to use?(which one?)
P.S I am very new to area of web development and working on my first project
Thank you

What you want is a Rich Text Editor. The standard HTML <textarea> tag only accepts plain text (even if the text is or includes HTML markup). There are a lot of example out there (including some listed on the page linked) but I would highly recommend using a prepackaged one for this. Coding your own is fairly complicated for people who are new, and even for a lot who have some experience. Both TinyMCE and CKEditor are very common ones, but there are many others as well.

A text box is like wordpad, you cant format it, if you paste in from word or any other formatted text it will wipe all the formatting and you will be left with just the text.
You need add an editor to the text areas, I use TinyMCE, but there are many other out there too.
To implement you need to have all the source (which you can get from TinyMCE) in your web directory.
Here's an example which you can try:
Add this the the head section of your page:
<script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
+ "bullist,numlist,outdent,indent",
theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
+"undo,redo,cleanup,code,separator,sub,sup,charmap",
theme_advanced_buttons3 : "",
height:"350px",
width:"600px"
});
</script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,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",
// 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_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
Then to call the textarea:
<textarea name="content" style="width:100%">YOUR TEXT HERE</textarea>
NB: You need to download and have in your directory the js files for <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
Hope this helps!

This won't solve the case when you want somebody to be able to format their text (e.g. with WYSIWYG bold buttons etc.), but if you want to be able to accept pre-formatted HTML (e.g. copy and paste from other HTML source such as a webpage), then you can do this:
<form ...>
<label>Paste your HTML in the box below</label>
<textarea style='display:none' id='foo'></textarea>
<div id='htmlsource' contenteditable style='border:solid 1px black;padding:1em;width:100%;min-height:2em;' ></div>
<input type='submit' />
</form>
<script>
jQuery(function(){
jQuery('form').submit( function(e) {
jQuery('textarea').val( jQuery('#htmlsource').html() );
});
});
</script>
This uses a contenteditable div element which you can format to look like an input box and will accept pasted HTML, and a hidden textarea#foo which will be populated with the pasted HTML just before the form is submitted.
Note that this is not an accessible solution as it stands.

Depending on your goal for the programm it could already be sufficient to just add "pre" tags left and right to the input of your textarea. for example if your code submits to a form whatever is inside a textarea and than echos it in the target File this would already work.
> File 1:
>
> <form action="Output.php" methode=post>
> <textarea name="Input"></textarea>
> </form>
>
> File Output.php
>
> $UserInput = $_POST["Input"];
> $UserInput = "<pre>" . $UserInput . "</pre>"
> echo $UserInput
this already will retain all Enters for example that where used in the original user input and echo them correctly
If you retrieve the content from the App Engine Saving the Content with the pre tags added already in most cases does the trick