v5.dk logo
Kom ind og besøg vores Discord Chat-community
Bliv medlem her eller læs mere om Discord her
Kærlighed kan godt købes for penge
- vi elsker nemlig vores kunder :-)

Mere info Køb nu

Premium på v5.dk
v5.dk logo  v5.dk e-learning
Log på med Facebook
  • Log ind på v5.dk
  • Opret bruger
  • Log ind
  • v5.dk Premium
  • v5.dk Premium
  • Hvad siger vores kunder?
  • E-læring for begyndere
  • icon for WordPress 4 e-learning WordPress 4
  • icon for Office 365 e-learning Office 365
  • icon for Microsoft Word e-learning Microsoft Word
  • Bloggen for alle
  • E-læring for nørder
  • icon for PHP-programmering e-learning PHP-programmering
  • icon for iOS Programmering e-learning iOS Programmering
  • icon for Linux Server e-learning Linux Server
  • Bloggen for nørder
  • Arkiverede videoer
  • Fællesskab
  • Forum
  • Idéer og ønsker
  • Markedspladsen
  • v5.dk Premium
  • Gratis webhotel
  • Cloud-servere
  • Om v5.dk
  • Søg på v5.dk
  • Om v5.dk ApS
    • Om virksomheden
    • RSS-feeds og tjenester
    • Driftsmeddelelser
    • Presse-kit
    • Ledige jobs
    • Social Netværk
      • Facebook
      • Twitter
      • Instagram
    • Alt det andet
      • Forretningsbetingelser
      • Ophavsret og Copyright
  • Kontakt kundeservice
  • FAQ og Hjælp
    • Premium og abb.
    • Videoer og Afspiller
    • Forum og Points
    • Cloud-servers
  • Partner/Virksomhed
  • Partner-kanal
v5.dk logo mobile
  • Menu
  • Opret bruger

Tilføj billede når der billeder udsendt mail

  • v5.dk
  • Forum
  • Offtopic / Andet
  • Tilføj billede når der billeder udsendt mail
  • Sidevisninger: 6146 har set dette indlæg
Besvar #0Spørgsmål oprettet af @jesperpetersen | 550 points
Ingen points i dette indlæg 23 indlæg 7 år siden
avatar
 

Hej

 

Sidder med et lille problem som gøre at jeg fremover godt kunne tænke mig at tilføj billeder til min mail når jeg sender ud til kunder for at gøre e-mailene mere lækker end de er nu.

Jeg bruger ckeditor til siden.

(Hvis der findes en letter løsning, er jeg også åben for den)

jeg bruger CDN: 

<script src="//cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
avatar
 
Besvar#1 @dhh Admin kommenterede for 7 år siden

Hej  jesperpetersen @jesperpetersen   

Hvad bruger du til at sende med? Bruger du PHP i din backend? Det har lidt at sige, for hvis du bruger PHP, så kunne du bare inkludere en standard "include" function inden at du sender din mail afsted, i stedet for at skulle skrive en masse og lave Javascript...

Redigeret af db @db  d. 10.02.2016 kl. 22:17

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#2 @jesperpetersen kommenterede for 7 år siden

Jeg bruger c# / MVC

avatar
 
Besvar#3 @db Admin kommenterede for 7 år siden

Hvis du vil sende en e-mail C# skal du blot addere din HTML-signatur til din body, her er et et simpelt eksempel:

MailMessage objeto_mail = new MailMessage();
SmtpClient client = new SmtpClient();

client.Port = 25;
client.Host = "smtp.internal.mycompany.com";
client.Timeout = 10000;
client.DeliveryMethod = SmtpDeliveryMethod.Network;
client.UseDefaultCredentials = false;
client.Credentials = new System.Net.NetworkCredential("user", "Password");

objeto_mail.IsBodyHtml = true;
objeto_mail.From = new MailAddress("[email protected]");
objeto_mail.To.Add(new MailAddress("[email protected]"));
objeto_mail.Subject = "Emne på e-mail";

// Laver en string med min signatur, kunne evt. indeholde img-tag til billede:
string signatur = "<b>Dette er min HTML-signatur</b>";

// Merger min string ind i min Body:
objeto_mail.Body = "Dette er en min e-mail til en kunde" + signatur + " :-) ";

client.Send(objeto_mail);

Med venlige hilsner

Daniel Bahls Signatur   Daniel Bahl (@db)
   CEO – v5.dk ApS

avatar
 
Besvar#4 @jesperpetersen kommenterede for 7 år siden

 #3  ÅÅhh på den måde vil du opbygge det.

Takker for hjælpen.

avatar
 
Besvar#5 @db Admin kommenterede for 7 år siden

jesperpetersen @jesperpetersen   Jeg håber det svarede på dit spørgsmål og du kom lidt videre? :-)

Jeg glemte lige at nævne at linje 11 i ovenstående kode er vigtig at have med, da denne åbner op for at e-mailen kan indeholde HTML istedet for ren plain/text.

mailObject.IsBodyHtml = true;

Med venlige hilsner

Daniel Bahls Signatur   Daniel Bahl (@db)
   CEO – v5.dk ApS

avatar
 
Besvar#6 @jesperpetersen kommenterede for 7 år siden

Tja, altså jeg tænker f.eks ligesom når du tilføjer billeder her,  så den bliver tilføjet i email når den bliver sendt til kunden.

avatar
 
Besvar#7 @db Admin kommenterede for 7 år siden

Yep! Det er præcist som i eksemplet jer gør det. Jeg har en string med min HTML-kode der udgør vores signatur med billede mv. og den concatenater jeg sammen med min e-mail indhold.


Med venlige hilsner

Daniel Bahls Signatur   Daniel Bahl (@db)
   CEO – v5.dk ApS

avatar
 
Besvar#8 @jesperpetersen kommenterede for 7 år siden

Så jeg skal upload billedet samt med jeg skriver min email eller hvad?. jeg kan ikke helt se ideen bag i det du fortæller.

 

Jeg har bygget min op sådan her:

 

public static void newsletter(string overskift, string mail, string name, string text)
        {
            MailDefinition oMailDefinition = new MailDefinition();
            oMailDefinition.BodyFileName = "~/img/emailskabelon/Newsletter.html";
            oMailDefinition.From = OrdklarMail;

            Dictionary<string, string> oReplacements = new Dictionary<string, string>();
            oReplacements.Add("<<navn>>", name);
            oReplacements.Add("<<text>>", text);
            oReplacements.Add("<<overskift>>", overskift);

            System.Net.Mail.MailMessage oMailMessage = oMailDefinition.CreateMailMessage(mail, oReplacements, new LiteralControl());
            oMailMessage.Subject = overskift + " - " + NewsletterTitle;
            oMailMessage.IsBodyHtml = true;

            SmtpClient smtp = new SmtpClient(AzureApi);
            System.Net.NetworkCredential netcred = new System.Net.NetworkCredential(AzureName, AzurePassword);
            smtp.UseDefaultCredentials = false;
            smtp.EnableSsl = true;

            smtp.Credentials = netcred;
            smtp.Port = Convert.ToInt32("25");
            smtp.DeliveryMethod = SmtpDeliveryMethod.Network;
            try
            {
                smtp.Send(oMailMessage);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
avatar
 
Besvar#9 @dhh Admin kommenterede for 7 år siden

 #8  Hej  jesperpetersen @jesperpetersen   

Jeg tror at du misforstår min kollega db @db 's forklaring. Så lad mig forsøge at uddybe hans svar.

HTML skal bruges for at kunne vise billeder i bl.a. emails, de fine emails du bl.a. for fra firmaer er alle sammen opsat i HTML. (Hypertext Markup Language.)

Billedet kan du have på din hjemmeside, eller et andet sted på nettet. (Det kunne eksempelvis være dit firma logo.)
Hvorefter at du i din HTML har noget lignende i bunden, som du så tilføjer til din mail dynamisk inden at du sender den afsted:

(I billedet ovenover er det min e-mail signatur, inden at jeg sender min email afsted bliver min signatur tilføjet.)

Det som  db @db   gør i hans eksempel kode, er at han tilføjer en signatur til e-mailen inden at den sendes.

// Laver en string med min signatur, kunne evt. indeholde img-tag til billede:
string signatur = "<b>Dette er min HTML-signatur med billeder og meget mere.</b>";

Han tager så sin "string signatur" og tilføjer det til sidst i ens email "body" dynamisk. (Det som du har skrevet via din online editor.)

// Merger min signatur string ind i min Body:
objeto_mail.Body = "Dette er en min e-mail til en kunde skrevet via min editor" + signatur + " :-) ";

Jeg håber at det gav mening. 

 

Redigeret af dhh @dhh  d. 11.02.2016 kl. 18:54

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#10 @jesperpetersen kommenterede for 7 år siden

 #9   db @db   &  dhh @dhh   Jeg forstår godt hvad i mener og tænker.

Når jeg udsender nyhedsbrev bruger jeg som sagt ckeditor til at skrive indholdet.

 

f.eks. når jeg skal tilføj billedet til mit billede til siden så skal jeg evt upload det første og så tilføj url'en efter.

Det er bare om der findes en måde hvor jeg f.eks kan tilføj billedet når det passer.

Billede uploadet af jesperpetersen

En anden måde i stedet for at gøre det sådan her.

 

Kan se i bruger "tinymce" og kan være jeg lige får skifte over til det. da jeg kan se de har gjort meget ud af det end sidste jeg brugt det.

Redigeret af jesperpetersen @jesperpetersen  d. 11.02.2016 kl. 23:25
avatar
 
Besvar#11 @dhh Admin kommenterede for 7 år siden

 #10  Ud af boksen findes der vidst ikke nogen hurtig og let måde. Jeg vil sige at du har to muligheder:

Første mulighed:

Gå i gang med et længere projekt hvori, at du kan uploade dit billede til din hjemmeside og få det smækket ind i din editor på siden.

Anden mulighed:

Brug evt. noget lignende Google Drev hvor at du først kan smide dit billede op i - og så bruge linket direkte der fra.

Editors er jo ikke andet end editors, så for at kunne automatisere dene process. Ligesom med vores egen "Upload billede" knap her i forummet og TinyMCE. Funktion med "Upload billeder" er kodet af Daniel Bahl fra bunden af. Bliver du nød til at programmere et system til netop denne opgave, eller finde et plugin eller kode til netop sådan en opgave der dækker dine behov.

Hvis indholdet er statisk, men skal smides dynamisk ind i hver e-mail du sender. Som eksempelvis en e-mail signatur, så kan du jo bare FTP et billede op på din hjemmeside eller ud på nettet, for derefter lave det en del af din skabelon.

Skal du kunne uploade og indsætte billeder i en editor. (I dit tilfælde CKEditor.) Så kræver det nok at du selv koder et system som kan det som en tilføjelse, eller at du går den manuelle vej som jeg beskrev tidligere.

Redigeret af dhh @dhh  d. 11.02.2016 kl. 23:34

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#12 @jesperpetersen kommenterede for 7 år siden

 #11  Jeg tror det bliver den først løsning som du skriver. fordi så bliver det lettes for mig i fremtiden mv.

Så må jeg få serven til at giv mig den fuld url til billedet, så jeg kan kopier det og smide det ind i email'en.

avatar
 
Besvar#13 @jesperpetersen kommenterede for 7 år siden

Jeg har fået det til at virker nu! Som du kan se her  db @db   &  dhh @dhh   

Dermed er det kun en lille test, jeg det er KUN mig som har fået den :p

avatar
 
Besvar#14 @dhh Admin kommenterede for 7 år siden

 #13  Dejligt  jesperpetersen @jesperpetersen  !

Det vi selv gør i korte træk er:

  1. Uploader billedet til vores servere.
  2. Tager URL'en fra billedet og smider det ind i vores TinyMCE omgivet af en img tag.

Selvfølgelig har vi også nogen "sanity" tjek så folk ikke bare kan smide alt op, men i dit tilfælde er det nok lidt ligegyldigt om det bliver gjort. Da du er den eneste som bruger CKEditor'en.

Det er dejligt at se at det endelig blev fikset for dig.  Happy coding!


Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#15 @jesperpetersen kommenterede for 7 år siden

 #14  Problemet er bare hos mig at jeg skal ind på billedet, hvor det er gemt og kopier billedet url'en og så der efter sæt det ind. 

avatar
 
Besvar#16 @jesperpetersen kommenterede for 7 år siden

har et lille problem nu:

F.eks hvis jeg tilføj et billede til nyheden, så skal jeg have tilføjet css class som 

 

img-responsive img-rounded mb-lg

Min kode ser sådan her ud:

tinymce.init({
    selector: "textarea",  // change this value according to your HTML
    toolbar: "image, fullpage, link, lists, visualblocks, bold, italic, strikethrough, underline",
    plugins: "image imagetools, fullpage, link, importcss",
    menubar: false,
    elementpath: false,
});

Problemet er ikke nok bare med css-class, hvordan kan jeg evt lave sådan teksten er i midten af alt sammen?

 

Ret: har fundet af den også tilføj span, og <!DOCTYPE html> og meget mere. 

Redigeret af jesperpetersen @jesperpetersen  d. 12.02.2016 kl. 19:18
avatar
 
Besvar#17 @jesperpetersen kommenterede for 7 år siden

Efter at havde kig på  db @db  's kode, så kiggede jeg på jeres og mix det samme med det her

tinymce.init({
    selector: "textarea",  // change this value according to your HTML
    height: 250,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    image_advtab: true,
    menubar: false,
    elementpath: false,
});

 

Mangler lige kun at tilføj css-class til de områder jeg skal ha

Redigeret af jesperpetersen @jesperpetersen  d. 12.02.2016 kl. 21:14
avatar
 
Besvar#18 @dhh Admin kommenterede for 7 år siden

Hej  jesperpetersen @jesperpetersen   

Undskylder først det lidt sene svar, men jeg måtte lige kigge lidt rundt - da jeg ikke selv er bekendt med TinyMCE. (Det er jo db @db  som har lavet koden, inden at jeg blev en del af v5.dk.)

Jeg har lavet et .zip arkiv af den kode jeg har lavet lige her. Som du kan downloade og lege med. Efter hvad jeg kan forstå, så vil du gerne kunne styre formateringen fuldt. (Custom.) Når du skriver noget i editoren. Ligesom her på v5.dk, hvor at du for det samme "output" når du skriver i editoren.

Til det formål skal vi have fat i vores tinymce.init function og have lavet en css fil. I mit eksempel laver jeg kun om på h2 tags i editoren for at gøre det så simpelt som muligt at følge med. Du kan altid tilføje mere:

Min css/tinymce.css fil:

h2 {
  color: green;
}

Min js/tinymce.js fil:

tinymce.init({
  selector: 'textarea',
  theme: 'modern',
  width: 800,
  height: 600,
  plugins: [
    'advlist autolink image lists charmap anchor pagebreak spellchecker',
    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
    'save table contextmenu directionality emoticons paste textcolor'
  ],
  content_css: 'css/tinymce.css' // Den vigtige linje er her
});

Som du kan se, så er det bare et spørgsmål om at "linke" en CSS fil og så "overskrive" de ting du nu engang vil overskrive. Jeg håber at det hele gav mening og at mit hjælpe kode er overskueligt. Ikke mindst .zip filen som du kan downloade. Med alt koden jeg har lavet for dette eksempel. (Jeg har skrevet lidt ekstra info inde i "editoren/textarea" i mit eksempel kode.)

Redigeret af dhh @dhh  d. 13.02.2016 kl. 14:25

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#19 @jesperpetersen kommenterede for 7 år siden

 #18  Jeg kan se på det hele at jeg mangler kun lige det sidste stykke for at jeg er i mål, det sidst stykke er at css til billedet kommer på.

Jeg har gjort som du har vist i kode - Min egen ser sådan her ud:

navn: Adminjquery.js

tinymce.init({
    selector: "textarea",  // change this value according to your HTML
    height: 250,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    image_advtab: true,
    menubar: false,
    elementpath: false,
    content_css: 'css/tinymce-style.css' // Den vigtige linje er her
});

Jeg har samtidig prøvet at kig på stackoverflow.

Grunden at jeg lige mangler det er, f.eks hvis jeg går på mobil og går ind på nyhed på hjemmesiden, så viser den det i "fuld" billede form.

Sådan her ligger min js og css,

 

 

avatar
 
Besvar#20 @dhh Admin kommenterede for 7 år siden

 #19  Den klart nemmeste måde at tilføje classes til ens billeder, er at bruge image_class_list. (Docs: https://www.tinymce.com/docs/plugins/image/#image_class_list)

Du gør simpelthen bare noget lignende min tinymce.js fil:

tinymce.init({
  selector: 'textarea',
  theme: 'modern',
  width: 800,
  height: 600,
  plugins: [
    'advlist autolink image lists charmap anchor pagebreak spellchecker',
    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
    'save table contextmenu directionality emoticons paste textcolor'
  ],
  // Bruger Boostrap CDN
  content_css: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'
  ],
  // Tilføjer classes til listen du kan bruge
  image_class_list: [
    {title: 'Alle classes', value: 'img-responsive img-rounded mb-lg'},
    {title: 'Kun img-responsive', value: 'img-responsive'},
    {title: 'Kun img-rounded', value: 'img-rounded'},
    {title: 'Kun mb-lg', value: 'mb-lg'}
  ]
});

Når du indsætter et billede med editoren, vil du så få en ekstra mulighed i bunden kaldet classes:

P.S: Husk altid, at bruge billeder som har samme bredde som højde. (Eksempelvis: 240x240.) Det giver nemlig altid de bedste resultater når det gælder om at lave billeder "rounded".

Redigeret af dhh @dhh  d. 14.02.2016 kl. 18:06

Med venlige hilsner

Daniel H. Hemmingsen (@dhh)

avatar
 
Besvar#21 @jesperpetersen kommenterede for 7 år siden

 #20  Jubbbii. det virer nu!! :) tak for hjælpen!! :) 

Jeg har ikke flere spørgsmål :D

God dag og tak for support!

avatar
 
Besvar#22 @jesperpetersen kommenterede for 6 år siden

Hvad skal der til få at jeg kan få et billede ved siden af min tekst  db @db    dhh @dhh   

Jeg bruger denne her kode:

tinymce.init({
  selector: 'textarea',
  theme: 'modern',
  height: 200,
  plugins: [
    'advlist autolink image link lists charmap anchor pagebreak spellchecker',
    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
    'save table contextmenu directionality emoticons paste textcolor'
  ],
  // Bruger Boostrap CDN
  content_css: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css'
  ],
  // Tilføjer classes til listen du kan bruge
  image_class_list: [
    {title: 'Alle classes', value: 'img-responsive img-rounded mb-lg'},
    {title: 'Kun img-responsive', value: 'img-responsive'},
    {title: 'Kun img-rounded', value: 'img-rounded'},
    {title: 'Kun mb-lg', value: 'mb-lg'}
  ]
});
avatar
 
Besvar#23 @jesperpetersen kommenterede for 6 år siden

Updatering; jeg har fået den til at billedet kan gå til f.eks venstre men der mangler dog bare noget luft i mellem billedet og teksten.

avatar
 

Du er ikke logget ind

Du skal være logget ind på v5.dk før du kan benytte vores forum. Det er ganske gratis at oprette en bruger.

Opret en ny gratis bruger Log ind

Følger med i denne tråd

jesperpetersen dhh

Forum kategorier

  • Generelt
  • Guides & Howto85
  • Offtopic / Andet160
  • Microsoft Office
  • Microsoft Word13
  • Microsoft Excel4
  • Microsoft PowerPoint0
  • Web og hjemmesider
  • Wordpress17
  • Operativsystemer
  • Apple Mac OS X14
  • Apple iOS28
  • Microsoft Windows4
  • Linux16
  • Teknologier
  • Netværk og WiFi3
  • Internet-tjenester9
  • Programmering
  • PHP-programmering125
  • iPhone-/Xcode-programmering9

Aktive forum-tråde lige nu

pentobarbital kaufen ohne rezept
gras kaufen online - grasthc.com
online marketing
Køb juridiske dokumenter såsom kørekort, pas, visum, opholdstilladelse og andre dokumenter
Køb juridiske dokumenter såsom kørekort, pas, visum, opholdstilladelse og andre dokumenter
Weed online kaufen
Er det værd at have en "portfolio"-hjemmeside!?
Fejlkode i form af bip-lyde ved opstart af gammel stationær PC
Bygget med af v5.dk
© Copyright 2006-2023 • Forretningsbetingelser • Copyright • Persondata- og Cookiepolitik
v5.dk ApS - Åbogade 15 - 8200 Aarhus N - CVR: 36902833
v5.dk logo
Hej, vi hedder v5.dk og vi laver e-learning på dansk

v5.dk er sat i verden for at gøre teknologi tilgængeligt og anvendeligt for både professionelle og almindelige brugere på alle niveauer.

93 200 555
  Skriv til os
v5.dk bruger cookies til at huske dine indstillinger, livechat samt til statistik
 

Alle vores priser er inkl. moms Sikker SSL-beskyttet forbindelse

Dankort og Visa-Dankort  Visa  Mastercard og Mastercard Junior  Maestro

  • Produkter
  • v5.dk Premium
  • Cloud-servers
  • v5.dk
  • Om v5.dk
  • Kunderne siger
  • Kontakt os
  • Presse
  • Stay updated
  • RSS & tjenester
  • Søg på v5.dk
  • Sitemap