Path to My JS file calling Tinymce Into My Page
C:\xampp\htdocs\myapp\seller\js\functions.js
Using This JS
tinymce.init({
selector: "textarea[name=\"content\"] ",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", file_browser_callback: RoxyFileBrowser
});
var roxyFileman = 'fileman/index.html?integration=tinymce4';
function RoxyFileBrowser(field_name, url, type, win) {
var roxyFileman = 'fileman/index.html';
if (roxyFileman.indexOf("?") < 0) {
roxyFileman += "?type=" + type;
}
else {
roxyFileman += "&type=" + type;
}
roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
if(tinyMCE.activeEditor.settings.language){
roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;
}
tinyMCE.activeEditor.windowManager.open({
file: roxyFileman,
title: 'Roxy Fileman',
width: 850,
height: 650,
resizable: "yes",
plugins: "media",
inline: "yes",
close_previous: "no"
}, { window: win, input: field_name });
return false;
}
But My Roxy fileman is located
C:\xampp\htdocs\myapp\fileman
Which is one directory back from tinymce. So, i want to know how can i access fileman in tinymce.
I tried this:
var roxyFileman = '../fileman/index.html?integration=tinymce4';
Thanks!
Related
I'm trying to convert html element into pdf. Everything is working fine , but it doesn't render the aws image in pdf.
Even though if i add a local path to the img src attribute then it render's that image in pdf.
const invoiceSection = $("#customer_invoice_bill");
let invoiceName = invoiceSection.data("invoiceName");
$("#btnDownloadInvoice").on("click", function () {
var pdfConf = {
pagesplit: true,
background: "#fff",
image: { type: "webp", quality: 0.98 }, // as per req
html2canvas: { dpi: 300, letterRendering: true, useCORS: true },
};
var pdf = new jsPDF("p", "pt", [
invoiceSection.height() + 100,
invoiceSection.width(),
]);
pdf.addHTML(invoiceSection, pdfConf, function () {
pdf.save(`${invoiceName}.pdf`);
});
});
this is the html element
https://i.stack.imgur.com/gEua9.png
this is how pdf is rendered without image. but it rendered the last image which is below(signature) as i have assign a local path to the src=""
https://i.stack.imgur.com/M3qrT.png
I have a problem that when i choose from Select, it will show option with formatSelection that i have configed BUT when i set selected value for Select that didn't get data object variable formatRepoSelectionLanguage from data_selection
function setSelect2Data(id, data_id = null, data_text = null, data_image = null, data_description = null, data_path = null, data_select = ""){
/*
id: selection class or ID of component has use Select2
data_id: id
data_text: text
data_image: image
data_path: path
data_description: description
data_select: String HTML Selection
*/
var data_selection = {
id : data_id||null,
text : data_text||null,
image : data_image||null,
path : data_path||null,
description: data_description||null
}
$(id)
.empty()
.append(data_select);
//$(id).select2('data' ,data_selection);
$(id).append(data_selection).trigger('change');
$(id).trigger({
type: 'select2:select',
params: {
object: data_selection,
formatSelection: formatRepoSelectionLanguage(data_selection),
formatResult: formatRepoLanguage(data_selection)
}
});
}
This is formatRepoLanguage:
function formatRepoLanguage (repo) {
if (repo.loading) {
return repo.text;
}
var $container = $(
"<div class='select2-result-language clearfix'>" +
"<div class='select2-result-language__icon'><img src='" + base_url_icon + repo.image + "' /></div>" +
"<div class='select2-result-language__meta'>" +
"<div class='select2-result-language__title'></div>" +
"<div class='select2-result-language__description'></div>" +
"</div>" +
"</div>"
);
$container.find(".select2-result-language__title").text(repo.text);
$container.find(".select2-result-language__description").text(repo.path)
return $container;
}
This is formatRepoSelectionLanguage:
function formatRepoSelectionLanguage (state) {
if (!state.id) {
return state.text;
}
var $state = $(
'<span id = "language_'+ state.id +'"><img class="img-flag" /> <span></span></span>'
);
// Use .text() instead of HTML string concatenation to avoid script injection issues
$state.find("span").text(state.text);
$state.find("img").attr("src", base_url_icon + state.image);
return $state;
}
I have try to set data like a string to option element and it works! Actually i think it's a bug of Select2 and i'm using version 4.0.13 and now i recognize that i don't need to use select2 function coz it takes data from option element which i have append into select element! That's my answer for my question if anyone have good idea please tell me! Thanks for your time!
I am working on WebGrid of MVC with jquery,
Here in my grid, there is comment column which has more text in it which is creating a scroll.
I want to give a show more or show less link in this grid.
How Can I do it.
Here is my grid
I wrote a jquery function --
$('.more').each(function () {
var content = $(this).html();
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
and to change Label text --
$(".morelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
and finally, I added .more class in WebGrid.
grid.Column("outBoundMoveOrder.Comment", header: "Comment", style: "more"),
Happy Learning !!
$("#ddl").change(function () {
var strSelected = "";
$("#ddl option:selected").each(function () {
strSelected += $(this)[0].value;
});
if (strSelected.length != 0) {
var url = "/Reseller/MailPartial/?resellerId=" + strSelected;
$("#mail").empty();
$("#mail").load(url);
}
this is code I use to load partial in my View (partial is only 1 label and 1 editorfor,the one that should load tinymce). I have [UIHint("tinymce_jquery_full"), AllowHtml] in my model and tinymce editor loads perfectly normal in other views. But when I use partial views it comes back as plain text area. How to fix this?
thanks
EDIT:
I figured it out,ijaz was almost correct ;)
I needed to reinit tinymce like ijaz said but even when I called INitTinyMCE like ijaz said it wouldn't have mattered because the element hasn't loaded yet to html and I have no idea why. Solution was to call initTinyMce after the element has loaded to the page.
I tried to use
$("#mail").load(url, InitTinyMCE());
but it didn't work.
Any ideas how to call InitTinyMCE() after the element has loaded? It's working now but it's relying on pressing another button to trigger InitTinyMCE()
EDIT again
I changed code to pure ajax,no more .load()
sorry for being so messy :)
In the above code,it seems that [UIHint] is not applied properly. so get things work, kindly initialize the TinyMCE manualy, i mean change you code as ,
$("#ddl").change(function () {
var strSelected = "";
$("#ddl option:selected").each(function () {
strSelected += $(this)[0].value;
});
if (strSelected.length != 0) {
var url = "/Reseller/MailPartial/?resellerId=" + strSelected;
$("#mail").empty();
$("#mail").load(url);
**Re-Init TinyMCE**
InitTinyMCE();
}
function InitTinyMCE()
{
$('##ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({
// Location of TinyMCE script
script_url: '#Url.Content("~/Scripts/tinymce/tiny_mce.js")',
theme: "advanced",
height: "170",
width: "240",
verify_html : false,
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,autosave",
// Theme options
theme_advanced_buttons1: "undo, redo,pasteword,|, bold, italic, underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,image, emotions" ,
theme_advanced_buttons2: "charmap, bullist, numlist,|,formatselect,fontselect,fontsizeselectcode, |,tiny_mce_wiris_formulaEditor, fullscreen",
theme_advanced_buttons3: "",
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 : "#Url.Content("~/Scripts/tinymce/css/content.css")",
convert_urls : false,
// 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"
});
}
I am having a lot of issues trying to upload files to the server in Titanium appcelerator. All seems to work fine, but in the server it shows that an error has occurred. Here's my Titanium code:
var win = Ti.UI.createWindow({
backgroundColor : "#FFF"
});
var ind = Titanium.UI.createProgressBar({
width : 200,
height : 50,
min : 0,
max : 1,
value : 0,
style : Titanium.UI.iPhone.ProgressBarStyle.PLAIN,
top : 10,
message : 'Uploading Image',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#888'
});
win.add(ind);
ind.show();
win.open();
Titanium.Media.openPhotoGallery({
success : function(event) {
alert("success! event: " + JSON.stringify(event));
var image = event.media;
var xhr = Titanium.Network.createHTTPClient();
xhr.onerror = function(e) {
Ti.API.info('IN ERROR ' + e.error);
};
xhr.onload = function() {
Ti.API.info('IN ONLOAD ' + this.status + ' readyState ' + this.readyState);
};
xhr.onsendstream = function(e) {
ind.value = e.progress;
//Ti.API.info('ONSENDSTREAM - PROGRESS: ' + e.progress + ' ' + this.status + ' ' + this.readyState);
};
// open the client
xhr.open('POST', 'http://mypathtotheserver/myphpuploaderfile.php');
xhr.setRequestHeader("Connection", "close");
// send the data
xhr.send({
media : image
});
},
cancel : function() {
},
error : function(error) {
},
allowImageEditing : true
});
and the php code in the server:
$target_path = "uploads/";
$target_path = $target_path . $_FILES['media']['name'];
if(move_uploaded_file($_FILES['media']['tmp_name'],$target_path)) {
echo "The file ". basename( $_FILES['media']['name']).
" has been uploaded";
}
else
{
echo "There was an error uploading the file, please try again!";
}
What am I doing wrong? Any help is highly appreciated.
Thank you in advance!
onsendstream must be set before the open.
Well after spending a long time trying to get this to work, I finally found the correct answer. I will share here for anyone out there running into issues to take a look and fix the photo upload problem. I haven't tested using Android yet, but it should all work the same.
Here's the titanium 'app.js' code:
var win = Ti.UI.createWindow({
backgroundColor : "#FFF"
});
var ind = Titanium.UI.createProgressBar({
width : 200,
height : 50,
min : 0,
max : 1,
value : 0,
style : Titanium.UI.iPhone.ProgressBarStyle.PLAIN,
top : 10,
message : 'Uploading Image',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#888'
});
win.add(ind);
ind.show();
win.open();
//Not a necessary function, but just in case you want to randomly create names
// for each photo to be uploaded
function randomString(length, current) {
current = current ? current : '';
return length ? randomString(--length, "abcdefghiklmnopqrstuvwxyz".charAt(Math.floor(Math.random() * 60)) + current) : current;
}
Titanium.Media.openPhotoGallery({
success : function(event) {
var image = event.media;
var xhr = Titanium.Network.createHTTPClient();
xhr.open('POST', 'http://yoursite.com/scriptsfolder/upload.php');
xhr.onerror = function(e) {
Ti.API.info('IN ERROR ' + e.error);
};
xhr.onload = function(response) {
if ( this.responseText !=0){
var imageURL = this.responseText;
alert('Your image was uploaded to ' +imageURL);
}else {
alert("The upload did not work! Check your PHP server settings.");
}
};
xhr.onsendstream = function(e) {
ind.value = e.progress;
};
// send the data
var r = randomString(5) + '.jpg';
xhr.send({
'media': image,
'randomFilename' : r
});
},
cancel : function() {
},
error : function(error) {
},
allowImageEditing : true
});
And here is the PHP server-side script. You will need to upload this PHP file to your webserver:
<?php
$target = getcwd();
$target = $target .'/'. $_POST['randomFilename'];
if (move_uploaded_file($_FILES['media']['tmp_name'], $target)) {
$filename = $target;
//Get dimensions of the original image
list($current_width, $current_height) = getimagesize($filename);
// The x and y coordinates on the original image where we will begin cropping the image
$left = 0;
$top = 0;
//This will be the final size of the image (e.g how many pixesl left and down we will be doing)
$crop_width = $current_width;
$crop_height = $current_height;
//Resample the image
$canvas = imagecreatetruecolor($crop_width, $crop_height);
$current_image = imagecreatefromjpeg($filename);
imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
imagejpeg($canvas, $filename, 100);
echo 'http://yoursite.com/scriptsfolder/'.$_POST['randomFilename'];
}else {
echo "0";
}
?>
And there you have it. I have to say that I found the answer to this problem from boydlee's appcelerator cookbook.
I hope this helps someone who is struggling to get photo upload to their own webserver in Titanium.
Thanks!
use image.toBlob() it help you.
Thanks