Custom-CKEditor Emoticons

It programmer development Essentials-all kinds of resources download list, history of the most IT resources, personal collection summary.

Steps:

1. Put the picture source into the/ckeditor directory, this is the /ckeditor/plugins/smiley/images file

2. Write on page

<textarea id= "Editor1" name= "Editor1" ><p>initial value.</p></textarea> <script type= "Te Xt/javascript "> Ckeditor.replace (' editor1 ', {//Remove the body and P tags in the lower left corner removeplugins: ' Ele Mentspath ',//Skin skins: ' v2 ',//Add Chinese font_names: ' Arial/arial; black body/blackbody; imitation/Imitation _gb231
            2; italics/italics _gb2312; official script/script; young round/Young circle; Microsoft Jache/Microsoft black; ' + CKEDITOR.config.font_names,//Set the font in the editor font drop-down list//Set the tool bar inside the main toolbar: [[' F Ont ', ' Bold ', ' Italic ', ' underline ', ' FontSize ', ' numberedlist ', ' BulletedList ', ' outdent ', ' Indent ', ' justifyleft ', ' Justifycenter ', ' justifyright ', ' Link ', ' Unlink ', ' textcolor ', ' BGColor ', ' Image ', ' Smiley ', ' Table ', ' Removeformat ', ' Syntaxhighlight '],//emoticons showing the number of lines, default to 8 smiley_columns:8,//Emoticons image source, Ckeditor.basepath Refers to Http://localhost:8080/FCKeditor/ckeditor smiley_path:ckeditor.basepath+ 'plugins/smiley/images/wangwang/', smiley_images: [' 1.gif ', ' 2.gif ', ' 3.gif ', ' 4.gif ', ' 5.gif ', ' 6.gif ', ' 7.gi ' F ', ' 8.gif ', ' 9.gif ', ' 10.gif ', ' 11.gif ', ' 12.gif ', ' 13.gif ', ' 14.gif ', ' 15.gif ', ' 16.gif ', ' 17.gif ', ' 18.gif ', ' 19.gif ', ' 20.gif ', ' 21.gif ', ' 22.gif ', ' 23.gif ', ' 24.gif ', ' 25.gif ', ' 26.gif ', ' 27.gif ', ' 28.gif ', ' 29.gif ', ' 30.gif ', ' 31.gif ', ' 32.gif ', ' 33.gif ', ' 34.gif ', ' 35.gif ', ' 36.gif ', ' 37.gif ', ' 38.gif ', ' 39.gif ', ' 40.gif ', ' 41.gif ', ' 42.gif ', ' 43.gif ', ' 44.gif ', ' 45.gif ', ' 46.gif ', ' 47.gif ', ' 48.gif ', ' 49.gif ', ' 50.gif ', ' 51.gif ', ' 52.gif ', ' 53.gif ', ' 54.gif ', ' 55.gif ', ' 56.gif ', ' 57.gif ', ' 58.gif ', ' 59.gif ', ' 60.gif ',  //mouse pointing up after displaying the prompt with the config.smiley_descriptions attribute specified,  smiley_d Escription: [' 1.gif ', ' 2.gif ', ' 3.gif ', ' 4.gif ', ' 5.gif ', ' 6.gif ', ' 7.gif ', ' 8.gif ', ' 9.gif ', ' 10.gif ', ' 11.gif ', ' 12. GIF ', ' 13.gif ', ' 14.gif ', ' 15.gif ', ' 16.gif ', ' 17.gif ', ' 18.gif ', ' 19.gif ', ' 20.gif ', ' 21.gif ', ' 22.gif ', ' 23.gif ', ' 24. GIF ', ' 25.gif ', ' 26.gif ', ' 27.gif ', ' 28.gif ', ' 29.gif ', '30.gif ', ' 31.gif ', ' 32.gif ', ' 33.gif ', ' 34.gif ', ' 35.gif ', ' 36.gif ', ' 37.gif ', ' 38.gif ', ' 39.gif ', ' 40.gif ', ' 41.gif ', ' 42.gif ', ' 43.gif ', ' 44.gif ', ' 45.gif ', ' 46.gif ', ' 47.gif ', ' 48.gif ', ' 49.gif ', ' 50.gif ', ' 51.gif ', ' 52.gif ', ' 53.gif ', '
               54.gif ', ' 55.gif ', ' 56.gif ', ' 57.gif ', ' 58.gif ', ' 59.gif ', ' 60.gif '});

or write it to the JS file mysmiley.js

		    Ckeditor.editorconfig = function (config) {config.smiley_columns = 8;
	          Config.smiley_path = ckeditor.basepath+ ' plugins/smiley/images/wangwang/';
	             Config.smiley_images = [' 1.gif ', ' 2.gif ', ' 3.gif ', ' 4.gif ', ' 5.gif ', ' 6.gif ', ' 7.gif ', ' 8.gif ', ' 9.gif ', ' 10.gif ', ' 11.gif ', ' 12.gif ', ' 13.gif ', ' 14.gif ', ' 15.gif ', ' 16.gif ', ' 17.gif ', ' 18.gif ', ' 19.gif ', ' 20.gif ', ' 21 . gif ', ' 22.gif ', ' 23.gif ', ' 24.gif ', ' 25.gif ', ' 26.gif ', ' 27.gif ', ' 28.gif ', ' 29.gif ', ' 30.gif ', ' 31.gif ', ' 32.gif ', ' 3 3.gif ', ' 34.gif ', ' 35.gif ', ' 36.gif ', ' 37.gif ', ' 38.gif ', ' 39.gif ', ' 40.gif ', ' 41.gif ', ' 42.gif ', ' 43.gif ', ' 44.gif ', ' 45.gif ', ' 46.gif ', ' 47.gif ', ' 48.gif ', ' 49.gif ', ' 50.gif ', ' 51.gif ', ' 52.gif ', ' 53.gif ', ' 54.gif ', ' 55.gif ', ' 56.gif ',
	          ' 57.gif ', ' 58.gif ', ' 59.gif ', ' 60.gif ']; Config.
	             Smiley_description = [' 1.gif ', ' 2.gif ', ' 3.gif ', ' 4.gif ', ' 5.gif ', ' 6.gif ', ' 7.gif ', ' 8.gif ', ' 9.gif ', ' 10.gif ', ' 11.gif', ' 12.gif ', ' 13.gif ', ' 14.gif ', ' 15.gif ', ' 16.gif ', ' 17.gif ', ' 18.gif ', ' 19.gif ', ' 20.gif ', ' 21.gif ', ' 22.gif ', ' 23.gi ' F ', ' 24.gif ', ' 25.gif ', ' 26.gif ', ' 27.gif ', ' 28.gif ', ' 29.gif ', ' 30.gif ', ' 31.gif ', ' 32.gif ', ' 33.gif ', ' 34.gif ', ' 35.G ' If ', ' 36.gif ', ' 37.gif ', ' 38.gif ', ' 39.gif ', ' 40.gif ', ' 41.gif ', ' 42.gif ', ' 43.gif ', ' 44.gif ', ' 45.gif ', ' 46.gif ', ' 47. GIF ', ' 48.gif ', ' 49.gif ', ' 50.gif ', ' 51.gif ', ' 52.gif ', ' 53.gif ', ' 54.gif ', ' 55.gif ', ' 56.gif ', ' 57.gif ', ' 58.gif ', ' 59
		    . gif ', ' 60.gif ']; };

And then in smile.html

<script type= "Text/javascript" >  
          ckeditor.replace (' Editor1 ', {
           //Remove the body and P tags in the lower left corner  
           removeplugins: ' Elementspath ',
           //Skin skins  
           : ' v2 ',
           //Add Chinese  
           font_names: ' Arial/arial; blackbody/blackbody; imitation/imitation _gb2312; italics/italics _gb2312; Official script/official script; Young round/Young round; Microsoft Jache/Microsoft black; '
            + CKEDITOR.config.font_names,               //Set the font in the Editor font dropdown list  
           //Set the tool bar inside the main  
           toolbar:  [[' Font ', ' Bold ', ' Italic ', ' underline ', ' FontSize ', ' numberedlist ', ' BulletedList ', ' outdent ', ' Indent ', ' justifyleft ',  
               ' Justifycenter ', ' justifyright ', ' Link ', ' Unlink ', ' textcolor ', ' BGColor ', ' Image ', ' Smiley ', ' Table ',  
               ' Removeformat ', ' syntaxhighlight '],

           customconfig: '. /ckeditor/custom/mysmiley.js '
          });
              
             Ckeditor.replace (' editor1 ');
           </script>  

3. If the expression is too much, the default is no scroll bar, in the FCKeditor can find the popup page, and then make changes, CKEditor is to show a layer, the default is hidden, each skin corresponds to a different style, if I now use V2 skin, it is necessary to go to ckeditor/skins/v2/Directory, find Dialog.css, which is compressed after the CSS file, found in the inside is very inconvenient, you can go to the directory under the source code, ckeditor/_source/skins/v2/, open dialog.css, through the view can be found in Cke_dialog _body style is what we need to modify, and then through the search in the compressed file to find the appropriate style, add:

. cke_skin_v2. cke_dialog_body{
        Margin-left:16px;margin-right:16px;margin-top:2px;margin-bottom:20px;z-index : 1;_position:static;
        overflow:auto;max-height:300px;
}

4. The effect is as follows:

Example program:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >