Very complete Phpcms V9 Integration Baidu Editor Ueditor steps

All the fun of writing the article will be a crappy CKEditor, PC forum repeatedly call the official replace the default editor for Ueditor, but so far no later, Baidu a large number of integrated version of 1.2, based on the use of the new version of the programmer, or feel himself engaged in a mess.

The specific records are as follows and are not updated regularly.

Prior to this tutorial may not be applicable to the latest version of the Baidu editor, he has several upgrades many places have changed, including some of the main JS filename, all of the target.

1, download the latest version of the official, I use here is the Ueditor 1.4.2 PHP version, download the local decompression, create a new directory Uediter (PS: Must be this name, preferably after this is not to change what configuration), Copy all the files in the home directory of the extracted files to the directory uediter.

2, the directory uediter the entire upload to the site/statics/js/directory, as shown:

3, modify the configuration ueditor.config.js editor height, remove the high width before the note.

Change to:
, initialframewidth:655//Init editor width, default 1000
, initialframeheight:400//init editor height, default 320

Here's a note that the tutorials on the web need to be modified

Window. Ueditor_home_url = "/statics/js/ueditor/";

var URL = window. Ueditor_home_url | | Getuebasepath ();

But from my current practice, the new version does not seem to need to be set, the reason behind the Getuebasepath (), the function can automatically get the editor's root directory path.

4, modify the/statics/js/ueditor/php/config.json as follows:

The code is as follows

Copy Code

/* Front and back end communication related configuration, note only allowed to use multiple lines * * { /* Upload Picture configuration Item * * "Imageactionname": "Uploadimage",/* Execute the action name of the uploaded image/* "Imagefieldname": "Upfile", * * submitted picture form name * * * "Imagemaxsize": 2048000,/* Upload size limit, Unit b * * "Imageallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* Upload picture format display * * ' Imagecompressenable ': true,///compression of the picture, default is True/* "Imagecompressborder": 1600,/* picture compression maximum edge limit * * "Imageinsertalign": "None", * * Insert the picture floating mode * * "Imageurlprefix": "",/* Image access Path prefix * * "Imagepathformat": "/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}",/* Upload save path, you can customize the save path and file name format * * /* {filename} will be replaced by the original filename, configure this need to pay attention to the Chinese garbled problem * * /* {RAND:6} will replace the random number, followed by the number of random number of digits * * /* {time} will be replaced with a timestamp * * /* {YYYY} will be replaced by four-bit year * * /* {YY} will be replaced by two-bit year * * /* {mm} will be replaced by two-digit month * * /* {DD} will be replaced with two-digit date. * * {HH} will be replaced by two-hour/ /* {II} will be replaced by two-bit minutes */ /* {SS} will be replaced by two-bit seconds * * /* Illegal characters \: *? "< > | */ * * Please look at the online document: fex.baidu.com/ueditor/#use-format_upload_filename * * * * Graffiti Picture Upload configuration Item * * "Scrawlactionname": "Uploadscrawl", * * Execute the name of the action to upload graffiti * * "Scrawlfieldname": "Upfile", * * submitted picture form name * * * "Scrawlpathformat": "/uploadfile/{yyyy}/{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Scrawlmaxsize": 2048000,/* Upload size limit, Unit b * * "Scrawlurlprefix": "",/* Image access Path prefix * * "Scrawlinsertalign": "None", /* screenshot tool upload/* "Snapscreenactionname": "Uploadimage", * * Execute upload screenshot of the action name * * "Snapscreenpathformat": "/uploadfile/{yyyy}/{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Snapscreenurlprefix": "",/* Image access Path prefix * * "Snapscreeninsertalign": "None", * * Insert the picture floating mode * * /* Crawl Remote picture configuration * * "Catcherlocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"], "Catcheractionname": "Catchimage",/* Execute the action name of the crawl remote picture * * "Catcherfieldname": "Source", * * submitted picture List Form name * * "Catcherpathformat": "/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Catcherurlprefix": "",/* Image access Path prefix * * "Catchermaxsize": 2048000,/* Upload size limit, Unit b * * "Catcherallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* Grab picture format Display * * /* Upload Video Configuration * * "Videoactionname": "Uploadvideo",/* Execute the action name of the upload video * * "Videofieldname": "Upfile", * * submitted video form name * * * "Videopathformat": "/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Videourlprefix": "",/* Video access Path prefix * * "Videomaxsize": 102400000,/* Upload size limit, Unit B, default 100MB * * "Videoallowfiles": [ ". flv", ". SwF", ". mkv", ". avi", ". Rm", ". rmvb", ". Mpeg", ". mpg", ". Ogg", ". Ogv", ". mov", ". wmv", ". mp4", ". WebM", ". mp3", ". wav", ". Mid"],/* Upload video format display * * /* Upload file Configuration * * "Fileactionname": "UploadFile",/* Controller, execute the action name of the upload video * * "Filefieldname": "Upfile", * * submitted document form name * * "Filepathformat": "/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}",/* Upload save path, you can customize the save path and file name format * * "Fileurlprefix": "",/* File access Path prefix * * "Filemaxsize": 51200000,/* Upload size limit, Unit B, default 50MB * * "Fileallowfiles": [ ". png", ". jpg", ". jpeg", ". gif", ". bmp", ". flv", ". SwF", ". mkv", ". avi", ". Rm", ". rmvb", ". Mpeg", ". mpg", ". Ogg", ". Ogv", ". mov", ". wmv", ". mp4", ". WebM", ". mp3", ". wav", ". Mid", ". rar", ". zip", ". Tar", ". Gz", ". 7z", ". bz2", ". Cab", ". ISO", ". Doc", ". docx", ". xls", ". xlsx", ". ppt", ". pptx", ". pdf", ". txt", ". MD", ". xml" ],/* Upload file format display * * /* List the pictures under the specified directory * * "Imagemanageractionname": "ListImage",/* Execute Picture Management action name * * "Imagemanagerlistpath": "/uploadfile/",/* Specify the directory to which you want to list the pictures * * "Imagemanagerlistsize": 20,/* The number of documents per list * * "Imagemanagerurlprefix": "",/* Image access Path prefix * * "Imagemanagerinsertalign": "None", * * Insert the picture floating mode * * "Imagemanagerallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* listed file Types * * /* List files in the specified directory/* "Filemanageractionname": "ListFile",/* Execute File Management action name * * "Filemanagerlistpath": "/uploadfile/",/* Specifies the directory to which you want to list files * * "Filemanagerurlprefix": "",/* File access Path prefix * * "Filemanagerlistsize": 20,/* The number of documents per list * * "Filemanagerallowfiles": [ ". png", ". jpg", ". jpeg", ". gif", ". bmp", ". flv", ". SwF", ". mkv", ". avi", ". Rm", ". rmvb", ". Mpeg", ". mpg", ". Ogg", ". Ogv", ". mov", ". wmv", ". mp4", ". WebM", ". mp3", ". wav", ". Mid", ". rar", ". zip", ". Tar", ". Gz", ". 7z", ". bz2", ". Cab", ". ISO", ". Doc", ". docx", ". xls", ". xlsx", ". ppt", ". pptx", ". pdf", ". txt", ". MD", ". xml" ]/* The file types listed * * }

The main modification of the uploaded path conforms to the PHPCMS path rules, and the revised rules are as follows:

/uploadfile/{yyyy}/{mm}{dd}/{yyyy}{mm}{dd}{rand:6}

Remember to modify the original {time} to {YYYY}{MM}{DD} otherwise the upload filename is the timestamp form, not the exact number time.

5, modify the/phpcms/libs/classes under the form.class.php

Modify the original

The code is as follows

Copy Code

if (!defined (' Editor_init ')) { $str = ' <script type= ' text/javascript ' src= '. Js_path. ' Ckeditor/ckeditor.js ' ></script> '; Define (' Editor_init ', 1); } For If (!defined (' Editor_init ')) {         $str. = ' <script type= ' text/ JavaScript "src=". Js_path. ' Ueditor/ueditor.config.js ' ></script> ';         $str. = ' <script type= ' text/javascript ' src= '. Js_path. ' Ueditor/ueditor.all.js ' ></script> ';         $str. = ' <script type= ' text/javascript ' src= '. Js_path. ' Ueditor/ueditor.parse.js ' ></script> ';         $str. = ' <link rel= ' stylesheet ' href= '. Js_path. ' Ueditor/themes/default/css/ueditor.css '/> ';         define (' Editor_init ', 1);}         $str. = "<script type=\" text/javascript\ ">\r\n";         $str. = "var editor = ue.geteditor (' $textareaid ');";         $str. = ' </script> ';

6, into the PHPCMS background update cache, OK, completed, after the test upload pictures, upload more images, attachment upload is normal, other details to be continued.

Bug Modification and functional improvement:
1. Solve the problem that the editor floats above the release button.

Phpcms-ueditor

Modify \statics\css\zh-cn-system.css. Fixed-bottom. fixed-but{} properties, add z-index:2000;

2, repair uploaded pictures and accessories in the PHPCMS Backstage Attachment management Office does not see the records and can not manage the bug

(To be perfected)

3, modify the article Publish page Editor adaptive width. /statics/js/ueditor/themes/default/css/ueditor.css

The code is as follows	Copy Code
/*ui toolbar, edit area, Bottom * * . Edui-default. edui-editor { border:1px solid #d4d4d4; Background-color:white; position:relative; overflow:visible; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; Width:auto!important; Increase this row to force adaptive }

4, the Solution Backstage editor inserts the table, the foreground does not appear the table border question

Add the following code at the bottom of the foreground content page template

The code is as follows	Copy Code
<script type= "Text/javascript" src= "{app_path}statics/js/ueditor/ueditor.parse.js" ></script> <script type= "Text/javascript" > settimeout (function () {uparse (' #content ', { ' Highlightjsurl ': ' {app_path}statics/js/ueditor/third-party/syntaxhighlighter/shcore.js ', ' Highlightcssurl ': ' {app_path}statics/js/ueditor/third-party/syntaxhighlighter/shcoredefault.css '}) }, 300); </script>

When the above code is added, the foreground will also support the display code highlighting.

5, go to the editor below except the subheadings display:

Remove \wwwroot\phpcms\libs\classes\form.class.php

About 75 lines and the following:

The code is as follows

Copy Code

$ext _str = "<div class= ' Editor_bottom ' >"; if (!defined (' Images_init ')) { $ext _str. = ' <script type= ' text/javascript ' src= '. Js_path. ' Swfupload/swf2ckeditor.js ' ></script> '; Define (' Images_init ', 1); } $ext _str. = "<div id= ' Page_title_div ' > <table cellpadding= ' 0 ' cellspacing= ' 1 ' border= ' 0 ' ><tr><td class= ' title ' > '. L (' subtitle '). " <span id= ' Msg_page_title_value ' ></span></td><td> <a class= ' Close ' href= ' javascript:; ' onclick= ' javascript:$ (\ "#page_title_div \"). Hide (); ' ><span>x</span></a></td> <TR><TD colspan= ' 2 ' ><input name= ' page_title_value ' id= ' page_title_value ' class= ' input-text ' ' value= ' Size= ' > <input type= ' button ' class= ' button ' value= '. L (' Submit '). "' Onclick=insert_page_title (\ $textareaid \", 1) ></td></tr> </table></div> "; $ext _str. = "</div>";

6, modify the editor has content is, show not pull over the problem:

Extra blank

The code is as follows	Copy Code
\statics\js\ueditor\themes\default\css\ueditor.css . Edui-default. Edui-editor-iframeholder { position:relative; Below 184 lines, add Width:auto!important;

7, the solution to publish content can not automatically get thumbnails of bugs

The value of the Config.json configuration item Imageurlprefix under the PHP file is: The corresponding domain name of the website

The code is as follows	Copy Code
<span class= "str" style= "color: #ffa0a0;" >http://www.111cn.net</span>