עיצוב תוכן של מייל

[jeet87]

ברצוני לבנות דף לשליחת מייל, חשבתי על משהו שדומה לדף באתר זה(שיהיה ניתן לשנות את הגופן/גודל/צבע ולראות את השינוי במקביל)

ניסיון שלא ממש צלח:

קוד הדף של שליחת מייל (הקוד של תוכן המייל)

<article>
 <section id="editable" contenteditable="true" onkeyup="changeCurrentPos()"></section>
 </article>

הקוד JS

var contentElements = new Array();


var elementIndex=0;
function Element(element){
	this.element = element;
	this.attributes = new Array();
	this.numAttributes=0;
	this.values = new Array();
	this.numValues=0;
	this.content="";
	this.start = 0;
	this.end=0;
}	


Element.prototype.contentEnd =function(end){
	this.end = end;
}


Element.prototype.contentStart = function(start){
	this.start = start;
}


Element.prototype.addAttribute = function(attribute){
	this.attributes[this.numAttributes++] = attribute;
}


Element.prototype.addValue = function(value){
	this.values[this.numValues++] = value;
}


Element.prototype.addContent = function(content){
	this.content += content;
}


Element.prototype.addTagToContent = function(){
	var str = "<"+this.element+" ";
	for(i=0;i<this.numValues;i++)
		str+=this.attributes[i]+"='"+this.values[i]+"' ";
	str+=">"+this.content+"</"+this.element+">";
	return(str);
}


function addFont()
{
	contentElements[elementIndex] = new Element("font");
	contentElements[elementIndex].addAttribute("color");

	contentElements[elementIndex].addValue($("#currColor").val());
	//contentElements[elementIndex].addAttribute("size");
	//contentElements[elementIndex].addValue("+2");


}


function changeCurrentPos()
{
	var pos=0;
	var d=$("#editable").text();
  contentElements[elementIndex].addContent(d.charAt(d.length-1));	
	$("#editable").html(contentElements[0].addTagToContent());

}

כעקרון המחשבה שהייתה לי להגדיר אובייקט של עיצוב עבור חלק מסויים שהמשתמש רוצה(תכלס כל אובייקט כזה הוא תגית עם תכונות וערכים עבור

אותה תגית(כמובן שאני שומר גם את התוכן של התגית - הטקסט של המשתמש)

יהיה לי מערך של אובייקטים כאלה ואז אני ירוץ עליהם ובאופן כזה אני יציג את "העיצוב" של המשתמש בדף, בכל מקרה הבעיה שלי שאני לא מצליח לעדכן את התוכן של המשתמש הוא תמיד כותב את התו הראשון(בלי קשר למה שלחצתי)

אני לא יודע אם זו הגישה הנכונה ואם כן יש יותר מדי מקרי קצה(מחיקה/הוספה של תווים באמצע התוכן)

תודה על העזרה

[etal]

אם המטרה היא לבנות דף שימושי בזמן סביר אז ההמלצה שלי היא להשתמש מן המוכן, יש ברשת מלא עורכי html מבוססי javascript חינמיים שניתן להוסיף אותם לדף שלך, שני הפופולריים הם tinymce ו-ckeditor.

[jeet87]

נראה מעולה, כזה בדיוק רציתי בכל מקרה מספר שאלות

1) אפשר למשל ליוצר סרגלי כלים מסויימים(נגיד שינוי הגופן גודל וצבע) או שזה כבר קבוע ולא ניתן לשינוי?

2) כעקרון אני אמור לשמור את המידע במסד נתונים, צריך לשמור את הטקסט בצורה מיוחדת או שזה פשוט מחרוזת לכל דבר, ובאותו עניין

אני גם צריך להראות את התוכן של המייל ללא שום סרגל כלים(נניח בTEXTAREA או בתגית דומה)?

3)אתה אולי מכיר עוד כאלה אדיטורים שעובדים עם JSP?

[etal]

נראה מעולה, כזה בדיוק רציתי בכל מקרה מספר שאלות

1) אפשר למשל ליוצר סרגלי כלים מסויימים(נגיד שינוי הגופן גודל וצבע) או שזה כבר קבוע ולא ניתן לשינוי?

כשאתה מאתחל את העורך אתה מעביר לו את הקונפיגורציה הרצויה לך, יש המון אפשרויות.

2) כעקרון אני אמור לשמור את המידע במסד נתונים, צריך לשמור את הטקסט בצורה מיוחדת או שזה פשוט מחרוזת לכל דבר, ובאותו עניין

אני גם צריך להראות את התוכן של המייל ללא שום סרגל כלים(נניח בTEXTAREA או בתגית דומה)?

html הוא מחרוזת רגילה מבחינת המידע במסד הנתונים. לפני השמירה מומלץ בצד שרת להריץ עליו איזה בדיקה שתנקה אותו ולא תאפשר למשתמש לשתול בתוכו טאגים מסוכנים וסקריפטים.

אחרי שהמידע נמצא אצלך בשרת אתה יכול להציג אותו איך שתרצה, ברור לך שאם תציג אותו בתוך textarea אז המשתמש יראה את תגיות ה-html ולא יראה את המייל המעוצב?

3)אתה אולי מכיר עוד כאלה אדיטורים שעובדים עם JSP?

העורכים האלה כתובים ב-javascript ורצים אצל הלקוח בדפדפן, לא מעניין אותם באיזה טכנולוגיית צד שרת אתה עובד. במילים אחרות הם יעבדו מצויין עם שרת מבוסס jsp.

[jeet87]

כעקרון הסתדרתי עם הקטע של סרגלי הכלים, עכשיו יש לי בעיה קצת הזויה שמתי כפתור ובJS רציתי להדפיס לALERT את התוכן של הטקסט שהמשתמש כתב אבל הוא לא מציג לי כלום(כביכול אין תוכן), הלכתי עם tinymce

אם אתה יכול להסתכל בקוד או לפחות להסביר לי איך להתייחס לתוכן של המייל

תודה רבה

[attachment deleted by admin]

[etal]

אני לא מומחה ב-tinymce אבל חיפוש קצר העלה את האפשרויות הבאות:

alert(tinyMCE.getInstanceById("elm1").getContent());

או

tinyMCE.getInstanceById("elm1").save();
alert(document.getElementById("elm1").value);

[jeet87]

מעולה זה עובד!

יש לי עוד שאלה, אני רוצה לבנות autocomplete בדומה למה שיש לgmail/walla כששולחים מייל למשהו, בשדה של הנמענים

ניתן לבחור יותר מנמען אחד ועדיין הautocomplete יעבוד

function autoContacts()
{
  var search=$("#send").val();

$.ajax({
  type: 'post',
    url: '../ComposeMail',
    data: "searchContact=" + search,
    success: function(data){
      //alert(data);
      $("#send").autocomplete({

       source: data.split("\n"),
       select: function(event, ui) {
         if(ui.item){
           var newContact = ui.item.value.substr(0,ui.item.value.length-1);
           $('#send').val($('#send').val()+newContact+";");
         }
         return false;
       }


      });
    }
  });  
}

קוד HTML

<tr><td>To</td><td><input type="text" id="send" style="width:350%" onkeyup="autoContacts()" onclick="autoContacts()"/>

אפשר לבחור משהו אחד, הבעיה שנראה שקוראת היא שהוא מחפש את כל המחרוזת שנמצאת בתיבה של autocomplete יש איזשהי

דרך לבחור תת מחרוזת מתוך התיבה הנ"ל ורק עליה לחפש התאמות אפשריות?

תודה

עריכה:

הסתדרתי כבר תודה