I try to input messages like:

<p>An Online learning platform to connect student in South East Asia to learn Chinese Mandarin with Professional Native teacher LIVE from university in China, combined with flexible scheduling, multimedia learning materials, and certification</p>

<p><img src="file:///C:UsersToshibaAppDataLocalTempmsohtmlclip1�1clip_image002.jpg" style="height:235px; width:346px" /></p>

Unfortunately the all pictures is undetected only appears as a white box with no picture in it. Please help. What should I do?

If you select a file from your computer it's not automatically uploaded. So either choose an image on the server, or upload it first. There is information about this in the documentation.

I copy and paste it from word document to my ckeditor. That does not work?

So I have to upload it to my server and copy the link address? (this is more difficult since the pictures are in the same word document.

In Firefox web browser one can copy a raw image into the CKEditor. You will have to copy and past the images individually after you have copied the text. Make sure you use the paste from word icon to remove formatting which may "hurt" the content.

I can see the image appears in the ckeditor after copy paste them individually, yet I cannot save the images and see them appears in the frontend correctly.

Any content editable field will drag an drop an image into the editor but you need to STORE it somewhere. Like file upload save to server, c'mon this is obvious?

The op has noted that what they are doing, does not work particularly well;
if they attempted it they may note that what is being suggested, does work;

one is left with the thought, why does the OP not make the attempt to try what is suggested.
Perhaps a charitable answer, may come to mind.

ckeditor has a particularly good f_ing manual
Wise men say many times: RTFM