vue-cli3结合ueditor里使用秀米总结

傷城~ 2023-06-04 14:58 21阅读 0赞

第一步：安装vue-ueditor-wrap：npm i vue-ueditor-wrap

第二步：从[ueditor官网][ueditor]下载资源放在public/static下，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70][]

第三步：从[秀米官网][Link 1]下载资源放在public/static/UE/dialogs下，如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 1][]

第四步：修改文件

1. ueditor.config.js ：修改

section:['class', 'style'],
    
    img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'style', 'data-latex','data-ratio','data-w','_width'],
    
    
    //编辑器放在弹出框里字体颜色等其他属性弹出框会被遮盖，这里修改层级就行
    zIndex:2001,

2. xiumi-ue-dialog-v5.js ：修改iframeUrl值editor.ui.UEDITOR\_HOME\_URL+ 'dialogs/xiumi-ue-dialog-v5.html'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 2][]

3. xiumi-ue-dialog-v5.html : 修改引入internal.js的位置,并加入editor.fireEvent("catchRemoteImage");这句话，(将秀米图片保存本地用的)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 3][]

第五步：在public/index.html里引入资源：（注意引入顺序）

最后一步：在页面中使用ueditor

将 UEDITOR\_HOME\_URL设置为process.env.BASE\_URL+'static/UE/'，

serverUrl为实际的上传图片接口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 4][]

[ueditor]: http://ueditor.baidu.com/website/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70]: /images/20230601/c362681614fb48108d75424eb77bab0c.png
[Link 1]: http://hgs.xiumi.us/uedit/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 1]: /images/20230601/64e6030d0b20464297c9ce941c76a0de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 2]: /images/20230601/425313a69e58400f8a1a83eb23970730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 3]: /images/20230601/a3d3d225d6ea47bb94cc5fd11edd0337.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 4]: /images/20230601/1b41771840934785b26eff264b2405cf.png