PHPCMS v9.5.6 integrates UEditer1.4.2_PHP tutorial-PHP Tutorial-php.cn

PHPCMS v9.5.6 integrates UEditer1.4.2_PHP tutorial

WBOY

Release： 2016-07-13 10:28:54

Original

1113 people have browsed it

----------------------------------------- -------------------------------------------------- ----

First go to the UEditor official website to download the required corresponding version: http://ueditor.baidu.com/website/download.html

Here is the 1.4.2 PHP version, UTF-8 version as an example=>

---------------------------------@ chenwei integration --- --------------------

1. Unzip the downloaded program package to obtain the program package directory, and rename the package directory to ueditor.

2. Put the ueditor package into PHPCMS_PATH/statics/js/. (PHPCMS_PATH is the path where the entry file of phpcms is located)

3. Modify ueditor/php/config.json to upload the image configuration item path, graffiti image upload configuration item path, screenshot tool upload and save path, grab remote image save path, upload video to save Path, upload file saving path: /ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6} Change to: /phpcms/uploadfile/{yyyy}/ {mm}{dd}/{yyyy}{mm}{dd}{rand:6}, conforms to the path rules of PHPCMS.

Specify the directory to list images and Specify the directory to list files as: /phpcms/uploadfile/

4. Modify the ueditor/ueditor.config.js configuration file,

　1) Custom toolbar content: ,toorbars: [[ ********** ]]

You can refer to the official documentation to modify this toolbar icon and remove unnecessary functions: http://fex.baidu.com/ueditor/#start-toolbar

<span>//</span><span>工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义</span>
   , toolbars:<span> [[
           </span>'fullscreen', 'source', '|', 'undo', 'redo', '|',
           'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
           'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
           'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
           'directionalityltr', 'directionalityrtl', 'indent', '|',
           'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
           'link', 'unlink','|',
           'simpleupload', 'insertimage', 'insertvideo', 'music', 'attachment', 'insertframe','pagebreak', 'template', 'background', '|',
           'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
           'inserttable', 'deletetable','preview', 'searchreplace', 'help', 'drafts'<span>
     ]]</span>

Copy after login

　2) Custom editor width and height: , initialFrameWidth:700 //Initialize editor width, default 1000

　　　, initialFrameHeight:350　//Initialize editor height, default 320

5. Modify the PC_PATH/libs/classes/form.class.php file,

Replace the original:

<span>if</span>(!<span>defined</span>('EDITOR_INIT'<span>)) {
    </span><span>$str</span> = '<script type="text/javascript" src="'.JS_PATH.'ckeditor/ckeditor.js"></script>'<span>;
    </span><span>define</span>('EDITOR_INIT', 1<span>);
}</span>

Copy after login

Changed to:

<span>if</span>(!<span>defined</span>('EDITOR_INIT'<span>)) {
    </span><span>$str</span> .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.config.js"></script>'<span>;
    </span><span>$str</span> .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.all.js"></script>'<span>;
    </span><span>$str</span> .= '<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.parse.js"></script>'<span>;
    </span><span>$str</span> .= '<link rel="stylesheet" href="'.JS_PATH.'ueditor/themes/default/css/ueditor.css"/>'<span>;
    </span><span>define</span>('EDITOR_INIT', 1<span>);}
    </span><span>$str</span> .= "<script type=\"text/javascript\">\r\n"<span>;
    </span><span>$str</span> .= "var editor = UE.getEditor('<span>$textareaid</span>');"<span>;
    </span><span>$str</span> .= '</script>';

Copy after login

6. In ueditor/themes/default/css/ueditor.css,

/*UI toolbar, editing area, bottom style*/ inside

Add a line: width:auto !important; //Note: Add this line to make the editor adaptive

7. Go to the bottom of the editor to remove the subtitle display: remove the following code in phpcms/libs/classes/form.class.php,

<span>$ext_str</span> = "<div class='editor_bottom'>"<span>;
　　</span><span>if</span>(!<span>defined</span>('IMAGES_INIT'<span>)) {
　　</span><span>$ext_str</span> .= '<script type="text/javascript" src="'.JS_PATH.'swfupload/swf2ckeditor.js"></script>'<span>;
　　</span><span>define</span>('IMAGES_INIT', 1<span>);
}
　　</span><span>$ext_str</span> .= "<span><div id='page_title_div'>
　　<table cellpadding='0' cellspacing='1' border='0'><tr><td class='title'></span>".L('subtitle')."<span><span id='msg_page_title_value'></span></td><td>
　　<a class='close' href='javascript:;' onclick='javascript:$(\"#page_title_div\").hide();'><span>&times;</span></a></td>
　　<tr><td colspan='2'><input name='page_title_value' id='page_title_value' class='input-text' value='' size='30'> <input type='button' class='button' value='</span>".L('submit')."' onclick=insert_page_title(\"<span>$textareaid</span><span>\",1)></td></tr>
　　</table></div></span>"<span>;
　　</span><span>$ext_str</span> .= "</div>";

Copy after login

8. Modify the problem that the content in the editor is not displayed sideways:

statics/js/ueditor/themes/default/css/ueditor.css

　.edui-default .edui-editor-iframeholder {
　position: relative;
　width: auto !important; //Add this new line

9. Fix the issue where the editor floats above the publish button:

　Modify the .fixed-bottom .fixed-but{} attribute under statics/css/zh-cn-system.css and add z-index : 2000;

-------------------------------------------------- -------------------------------------------------- --