html editor

[MikeR]

I would like to start sending emails using html instead of free text.
I notice its very simple using nettalk.
I currently allow users to define a body template if you like for the emails.
I would have to incorporate an html editor into my nettalk app.
I see that nettalk allows for redactor and tinymice , but the main editor feature I need is to insert a picture onto the page doesnt seem to be supported by either of these two editors.
Can someone give me a idea, solution or method how I can progress.
 

[osquiabro]

what is the problem?? i have a email template implemented with NT and all images are supported , the only problem is that images need hosting in a public server for retrieve.

Look images..

[bshields]

Hi Mike,

I use TinyMCE within NetTalk for email construction.

Using TinyMCE if you know the hosted location of the image you can just paste in its URL.

You can also extend TinyMCE to give a dropdown list of known images (I've added a screen capture of this). This allows you to use NetTalk to upload images, save them somewhere sensible then let TinyMCE know where they are, so it can offer them to the user when creating an email.

Regards
Bill

[MikeR]

These options look great.
where do I read how to extent tinymice with dropdown images

[bshields]

Hi Mike,

The method NetWekServerBase._TinyMCEInit (NetWeb.CLW) is responsible to creating the TinyMCE editor. You'll need to extend this method.

 If you add a line like:

    'image_list: "/ResourceList.json",'&|

within (i've modified my NetWeb.CLW, but you could inherit the NetWebWorkerBase class and extend the method):

    'tinyMCE.init({{'&|
    'entity_encoding : "raw",' &|
    'mode : "exact",elements : "'&self.nocolon(p_FieldId)&'",' &|
    'plugins : "link code image media textcolor",' &|
    'toolbar: "cut copy paste | undo redo | styleselect bold italic underline strikethrough fontselect fontsizeselect forecolor backcolor | link unlink image media | alignleft aligncenter alignright | bullist numlist outdent indent | blockquote code",'&|
    'browser_spellcheck: "true",'&|
    'contextmenu: "false",'&|
    'theme_modern_toolbar_location: "top",'&|
    'image_list: "/ResourceList.json",'&|
    'link_list: "/LinkList.json",'&|
    'relative_urls : true,'&|
    'remove_script_host : false,'&|
    'resize: "both",'&|
    'theme_modern_toolbar_align: "left",')


Then create a NetWebPage called ResourceList (change its pagename to ResourceList.json- or anything else you want) that generates json in the following format.

[
  {title: "ImageName1", value: "//someurl.com/ImageName1.jpg"}
  {title: "ImageName2", value: "//someurl.com/ImageName2.jpg"}
]
 


Regards
Bill

[MikeR]

Thanks Bill very helpful.
I noticed that the tinymce.init method takes a manual parameter as well.
I have got the insert image option working but my ResourceList is not showing on the insert image popup
I just created a static file in the webfolder called resourcelist.json to see if that would work , still no cigar
how can I debug what ive done wrong ?
this is what my file looks like
[
  {title: "logo", value: "//assess.jmr.co.za/images/logo.png"}
  {title: "logo1", value: "//assess.jmr.co.za/images/logo1.png"}
]

[bshields]

Oops, my fault try:

[
  {title: "logo", value: "//assess.jmr.co.za/images/logo.png"},
  {title: "logo1", value: "//assess.jmr.co.za/images/logo1.png"}
]

[MikeR]

no cigar
i must be doing something else wrong ?

[bshields]

Hi Mike,

Using Chrome, press F12 and turn on developer tools. go into your page with TinyMCE. Click on Network in developer tools, then clear history so its clean. Then go back into your Nettalk program and press the image icon on the tool bar. You should see "ResourceList.json", if you click on it you'll see what was sent via NetTalk to the browser.

Make sure its what you expect, it should be valid json (use https://jsonformatter.curiousconcept.com/ to check).

Regards
Bill