How to install Baidu editing UEditor in ECSHOP

Everyone who has used the editor that comes with the ECSHOP system knows that it is difficult to use, and it cannot upload pictures in batches. Many friends like Baidu Editor because Baidu Editor is powerful, easy to use, and does not generate too much redundant code.

There are many tutorials on ECSHOP integrating Baidu Editor, but most of them have some problems.

Recommended: "ecshop Development Tutorial"

Look at the renderings first:

The tutorial begins ：

Step one:

Go to Baidu editor website to download the latest version, rename the folder to "ueditor", and upload it to the /includes/ directory

（ You can also download the prepared ueditor version 1.4.3 at the bottom of this tutorial)

Step 2:

Open these two files, one is for product editing and the other is for article editing

/admin/templates/goods_info.htm
/admin/templates/article_info.htm

Search:

{$FCKeditor}

Modify to:

<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="../includes/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
.clear {
clear: both;
}
</style>
<textarea id="goods_desc" name="goods_desc" style="width:100%;height:500px;"> {$goods.goods_desc}</textarea>
<script type="text/javascript">
delete(Object.prototype.toJSONString);
UE.getEditor(&#39;goods_desc&#39;)
</script>

Modify both files in this way.

Pay attention to this line of code:

<textarea id="goods_desc" name="goods_desc" style="width:100%;height:500px;"> {$goods.goods_desc}</textarea>

width and height respectively refer to the size of the editor, but the browser with IE core may not support writing px, so the size of the editor may be a little Not perfect, this is related to CSS, this can be solved by yourself.

At this time, in fact, the ECSHOP background editor can be used normally. Just enter the product list, category, etc., and an error will be reported, indicating that Ajax is missing:

The solution will be provided below

Step 3: Resolve the background js conflict

Open /admin/templates/pageheader.htm

Find in the header:

{insert_scripts files="../js/transport.js,common.js,../js/utils.js"}

Modify it to:

<script type="text/javascript" src="../includes/ueditor/fix_jquery/jquery.min.js" rel="stylesheet" /></script>
<script type="text/javascript" src="../includes/ueditor/fix_jquery/jquery.json-1.3.js" rel="stylesheet" /></script>
<script type="text/javascript" src="js/common.js" rel="stylesheet" /></script>
<script type="text/javascript" src="../includes/ueditor/fix_jquery/transport_json.js" rel="stylesheet" /></script>
{insert_scripts files="../js/utils.js"}

That’s it.

Note, don’t forget to reference the JQ file. .

The above is the detailed content of How to install Baidu editing UEditor in ECSHOP. For more information, please follow other related articles on the PHP Chinese website!