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>

Hej  @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  d. 10.02.2016 kl. 22:17

Jeg bruger c# / MVC

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);

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

Takker for hjælpen.

@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;

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.

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.

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;
            }
        }

 #8  Hej  @jesperpetersen   

Jeg tror at du misforstår min kollega @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   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  d. 11.02.2016 kl. 18:54

 #9   @db   &  @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.

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  d. 11.02.2016 kl. 23:25

 #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  d. 11.02.2016 kl. 23:34

 #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.

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

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

 #13  Dejligt  @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!

 #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. 

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  d. 12.02.2016 kl. 19:18

Efter at havde kig på  @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  d. 12.02.2016 kl. 21:14

Hej  @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  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  d. 13.02.2016 kl. 14:25

 #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,

 #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  d. 14.02.2016 kl. 18:06

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

Jeg har ikke flere spørgsmål :D

God dag og tak for support!

Hvad skal der til få at jeg kan få et billede ved siden af min tekst  @db    @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'}
  ]
});

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.