I try to create template and this template should be from 1 element - textarea, but this textarea should be extended to TinyMCE control.
I try to do it via following ascx control:
<textarea id="SubComment" name="SubComment" style="width: 80%">
<% = Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %></textarea>
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,imagemanager,videoupload",
// Theme options
theme_advanced_buttons1: <% = txtAdvButtons %>,
theme_advanced_buttons2: "tablecontrols",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_resizing: true,
onchange_callback: "changed",
// 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"
},
setup: function(editor) {
editor.addButton('myupload', {
title: 'Insert image',
image: '/tiny_mce/plugins/imagemanager/pages/im/img/insertimage.gif',
onclick: function() {
mcImageManager.upload({
path: '{0}',
onupload: function(info) {
var i, html = '';
for (i = 0; i < info.files.length; i++)
html += '<img src="' + info.files[i].url + '" />';
editor.execCommand('mceInsertContent', false, html);
}
});
}
});
}
});
</script>
but when I try to use this template I see simple textarea. How to apply this javascript extention (it works correctly out of ascx control)?
Thanks
So I read up on the documentation for tinyMCE and it turns out that the code you posted there should be placed in the Head tag or another script file.
Change your textarea to this:
<textarea name="SubComment" class="tinyMCETextArea" style="width: 80%">
And in your tinyMCE initialization code:
$(function(){
tinyMCE.init({
/// all your options
editor_selector: "tinyMCETextArea",
/// More stuff
});
});
Related
In an asp.net Core web application I'm using the Tagify component (Tagify home page & examples) for showing tags in input and textarea controls. Following an example from the link (see under: Same using custom suggestions) I have the following code:
<div class="col-auto" title="Start typing to show available tags ...">
<textarea name="tbSearch2" placeholder="Filter by tags" id="tbSearch2" class="form-control email-filter" rows="1"></textarea>
</div>
and javascript (ajax executes only once -> on page load):
var tagslist = '';
$.ajax({
'url': "Email/GetTags",
'success': function (data) {
tagslist = data;
// load tags for searching
var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
tagTextProp: 'name',
enforceWhitelist: true,
delimiters: null,
whitelist: tagslist,
editTags: false,
dropdown: {
mapValueTo: 'name',
searchKeys: ['name'],
maxItems: 20, // <- maximum allowed rendered suggestions
classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
},
});
}
});
The tags work, but only when the user starts typing some text into the textarea. The dropdown does not appear immediately when Tagify control has focus (as in the example in the link in the beginning of this post).
Any ideas what I'm doing wrong?
*note: there are no errors in the browser console.
You can try to check the versions of tagifycss and js, Here is a working demo:
GetTags action:
public List<string> GetTags()
{
return new List<string>{ "A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript"};
}
js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
var tagslist = '';
$(function () {
$.ajax({
'url': "GetTags",
'success': function (data) {
tagslist = data;
// load tags for searching
var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
tagTextProp: 'name',
enforceWhitelist: true,
delimiters: null,
whitelist: tagslist,
editTags: false,
dropdown: {
mapValueTo: 'name',
searchKeys: ['name'],
maxItems: 20, // <- maximum allowed rendered suggestions
classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
},
});
}
});
})
</script>
result:
I have jq Grid table with export options.
Created a custom button to Export to PDF inside of JQGrid, here is a bit of the code:
JQ-grid code :
$("#list1").jqGrid({ datatype: "xml", colModel:[{name:'success',index:'SCOUNT', width:90,sortable:true,formatter:function(cellvalue, options, rowObject) {
if(cellvalue!=0)
var html ='<span sugar="sugar0b" style="cursor:pointer;" onClick="showSuccessDetails('+options.rowId+');return false;"><u>'+cellvalue+'</u></span>';
else
var html ='<span sugar="sugar0b" style="cursor:pointer;">'+cellvalue+'</span>';
return html
}},
{name:'failure',index:'FCOUNT', width:90,sortable:true,formatter:function(cellvalue, options, rowObject) {
if(cellvalue!=0)
var html ='<span sugar="sugar0b" style="cursor:pointer;" onClick="showFailureDetails('+options.rowId+');return false;"><u>'+cellvalue+'</u></span>';
else
var html ='<span sugar="sugar0b" style="cursor:pointer;">'+cellvalue+'</span>';
return html
}}]
Export Button Code:
`
$("#exportPDF").click(function(){
$("#list1").jqGrid("exportToPdf",{
/* title: 'jqGrid Export to PDF', */
orientation: 'portrait',
pageSize: 'A4',
customSettings: null,
download: 'download',
includeLabels : true,
includeGroupHeader : true,
includeFooter: true,
fileName : "CDR_Report.pdf"
})
});
The problem is on click of Export button it will export table as PDF in that for Success column and Failure column showing formatter html code also.
How to remove Html code for exporting only Needed cellValue in pdf.
Kindly check sample Image: Link
This answer explains how to, for example, remove the menubar and status bar for all form fields in tinyMCE:
tinymce.init({
selector: "textarea",
menubar:false,
statusbar: false,
..
});
My question is: how can I do that for individual text areas? ie I would like some to have status bars and others not to..
You need to give your textarea element an id and then use it in every configuration:
tinymce.init({
selector: "textarea#editor1",
menubar:false,
statusbar: false,
...
});
<textarea id="editor1"></textarea>
tinymce.init({
selector: "textarea#editor2",
// standard toolbar for editor 2
...
});
<textarea id="editor2"></textarea>
// and so on...
This way you tell tinyMCE for which textarea the configuration is in effect. Have a look at the advanced example on the tinyMCE site:
selector: "textarea#elm1",
Select only the textarea with ID elm1
UPDATE
Yes, it is possible. You need to set a unique id for all editors, but it is possible to select multiple id's at once like this:
<script type="text/javascript">
tinymce.init({
selector: "textarea#common1,textarea#common2",
theme: "modern",
height: 100,
menubar:false,
statusbar: false
});
tinymce.init({
selector: "textarea#comment_toolbox",
theme: "modern",
height: 100,
toolbar: false
});
</script>
</head>
<body>
<div width="100%" height="100%">
<textarea id="common1"></textarea>
<br/>
<textarea id="comment_toolbox"></textarea>
<br/>
<textarea id="common2"></textarea>
<br/>
</div>
</body>
The site looks as expected:
this is based off pasty's answer above, it keeps it as DRY as possible:
this.setupRichTextEditorSettings = function() {
var regularElements = ['eobjs','emats','eprocs','eclos','ehoms'];
var specialElements = ['comment_box'];
var convertToSelectors = function(elements) {
return $.map(elements, function(element) {
return "textarea#"+element;
});
};
var regularElementSelectors = convertToSelectors(regularElements);
var specialElementSelectors = convertToSelectors(specialElements);
tinymce.init({
selector: regularElementSelectors.join(','),
menubar: false,
statusbar: false
})
tinymce.init({
selector: specialElementSelectors.join(','),
menubar: false,
statusbar: false,
toolbar: false
})
};
Use a selector like this:
$('textarea#mytext').tinymce({
menubar:false,
statusbar: false,
..
});
I am using an inline editor ipweditor tool which internally use tinyMCE editor. On their demo page it is using old version of tinyMCE which is not working in my IE. So I updated tinyMCE with latest version.
In old version of TinyMCE it was returning me defined content with all the HTML tags, while in new version it is returning me only text without HTML tags.
Here is the link of jsFiddle demo. Anyone know how do I configure tinyMCE so it return me HTML tags also.
HTML
<div style="display:none">
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</div>
<div style="border: solid thin gray; padding:5px;">
<div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b>
</div>
Javascript
$(document).ready(function () {
var ed = new tinymce.Editor('content', {
mode: "exact",
theme: "advanced",
plugins: "emotions,table",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
table_default_cellspacing: 0,
table_default_border: 1,
remove_linebreaks: false
});
$('.my_text').editable({
type: 'wysiwyg',
editor: ed,
onSubmit: function submitData(content) {
alert(content.current);
},
submit: 'save',
cancel: 'cancel'
});
});
It's always not preferable to make any modification in plugin library, but this really need some modification. The problem was with 'ipweditor.js' tool. It's creating new tinyMCE editor object internally and getting response in "text" format from tinyMCE.
var r =options.editor.getContent({format : 'text'});
We need to replace 'text' with 'html'
var r =options.editor.getContent({format : 'html'});
It's more preferable to make this format setting also dynamic so append a setting variable in inital settings and fetch value from there.
var defaults = {
onEdit: null,
onSubmit: null,
onCancel: null,
editClass: null,
submit: null,
cancel: null,
type: 'text', //text, textarea or select
submitBy: 'blur', //blur,change,dblclick,click
editBy: 'click',
editor: 'non',
options: null,
format:'text'
}
var options = $.extend(defaults, options);
and now retrieve using the format defined in setting.
var r =options.editor.getContent({format : options.format});
You can use content.previous. Here is a modified fiddle.
I have a problem with my webgrid, in one of my columns I have an actionlinks that has a JavaScript with a click function, everything works fine. But after I have sorted any column or paging the grid my JavaScript stops working. I have removed the ajaxupdatecontainerID property and my JavaScript works after paging but I can´t sort my columns anymore and after paging the browser scrolls to top of the page. check my code below:
<div id="grider">
#{ var grid3 = new WebGrid(Model.webgridlastlopp.ToList(), rowsPerPage: 10, defaultSort: "Status", canPage: true, ajaxUpdateContainerId: "grider");}
#grid3.GetHtml(tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
grid3.Column("Startstation", "Start station/kombiterminal"),
grid3.Column("Slutstation", "Slut station/kombiterminal"),
grid3.Column("Upphämtningsdatum", "Startdatum", format: #<text>#item.Upphämtningsdatum.ToString("yyyy/MM/dd")</text>),
grid3.Column("Leveransdatum", "Leveransdatum", format: #<text>#item.Leveransdatum.ToString("yyyy/MM/dd")</text>),
grid3.Column(format: (item) => Html.ActionLink("Visa detaljer", "OrderDetails", "Home", new { id = item.Ordernummer }, new { #class = "modal", #Style = "color:Gray;" }))
))
</div>
<script type="text/javascript">
$(function () {
$('.modal').click(function () {
alert("hello");
});
</script>
As you page, new HTML is being loaded into the page. Because of this, you need to use the jQuery live method:
<script type="text/javascript">
$(function () {
$('.modal').live('click', function () {
alert("hello");
});
</script>
jQuery live
In your code add reference to the js function for attribute
#{
var grid3 = new WebGrid(
Model.webgridlastlopp.ToList(),
rowsPerPage: 10,
defaultSort: "Status",
canPage: true,
ajaxUpdateContainerId: "grider",
ajaxUpdateCallback: "GridUpdate");
}
js function
function GridUpdate(data) {
applyGridChanges();
}