Ueditor百度編輯器插件的安裝

目錄

• [TOC]

插件下載地址:

百度ueditor(海馬網盤)：https://pan.baidu.com/s/1yik8haZNH46SkIEZNcSIvQ 密碼：appt
百度ueditor含使用方法(童攀網盤)：鏈接: https://pan.baidu.com/s/1jI88b90 密碼: c9in

1. 引入

ueditor.config.js
ueditor.all.min.js
lang/zh-cn/zh-cn.js

<script src="__plus__/ueditor/ueditor.config.js"></script>
<script src="__plus__/ueditor/ueditor.all.min.js"></script>
<script src="__plus__/ueditor/lang/zh-cn/zh-cn.js"></script>

2. 編輯器顯示處 id="content"

<textarea id="content" name="content"></textarea>

3.底部

<script type="text/javascript">
    //實例化編輯器
    //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
    UE.getEditor('content',{initialFrameWidth:1500,initialFrameHeight:400,});  
</script>

效果:

4.ueditor編輯器按鈕配置方法

定制工具欄圖標

UEditor 工具欄上的按鈕列表可以自定義配置,只需要通過修改配置項就可以實現需求

配置項修改說明

修改配置項的方法：

1. 方法一：修改 ueditor.config.js 里面的 toolbars
   js方法

<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor(‘editor’)就能拿到相關的實例
UE.getEditor(‘content’,{initialFrameWidth:700,initialFrameHeight:400, toolbars: [[‘bold’, ‘italic’, ‘underline’, ‘fontborder’, ‘strikethrough’, ‘superscript’, ‘subscript’,
‘removeformat’, ‘formatmatch’, ‘autotypeset’, ‘blockquote’, ‘pasteplain’, ‘|’, ‘forecolor’, ‘backcolor’, ‘insertorderedlist’, ‘insertunorderedlist’,
‘selectall’, ‘cleardoc’]]});
</script>
>```    
2. 方法二：實例化編輯器的時候傳入 toolbars 參數(寫在script代碼塊里)

>`var ue = UE.getEditor(‘container’);`

簡單列表-注意toolbars數組里面只有一個數組時，編輯器上只有會有一行按鈕，沒有換行

toolbars: [[‘fullscreen’, ‘source’, ‘undo’, ‘redo’, ‘bold’]]
若想有多行列表-toolbars數組里面要有多個數組，每個數組占一行

例子:
把下面的代碼放入高度后面:

```html
toolbars: [['fullscreen', 'source', 'undo', 'redo','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc']]

<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
UE.getEditor('content',{initialFrameWidth:800,initialFrameHeight:400,toolbars: [['fullscreen', 'source', 'undo', 'redo','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','selectall', 'cleardoc']]});
</script>

效果:

更多配置參考
https://www.cnblogs.com/52lnamp/p/9232919.html

---

按鈕說明：

工具欄按鈕分割線

配置項里用豎線 ‘|’ 代表分割線

完整的按鈕列表

toolbars: [[‘anchor’, //錨點’undo’, //撤銷’redo’, //重做’bold’, //加粗’indent’, //首行縮進’snapscreen’, //截圖’italic’, //斜體’underline’, //下划線’strikethrough’,

//刪除線’subscript’, //下標’fontborder’, //字符邊框’superscript’, //上標’formatmatch’, //格式刷’source’, //源代碼’blockquote’, //引用’pasteplain’, //純文本粘貼模式’selectall’,

//全選’print’, //打印’preview’, //預覽’horizontal’, //分隔線’removeformat’, //清除格式’time’, //時間’date’, //日期’unlink’, //取消鏈接’insertrow’, //前插入行’insertcol’,

//前插入列’mergeright’, //右合並單元格’mergedown’, //下合並單元格’deleterow’, //刪除行’deletecol’, //刪除列’splittorows’, //拆分成行’splittocols’, //拆分成列’splittocells’,

//完全拆分單元格’deletecaption’, //刪除表格標題’inserttitle’, //插入標題’mergecells’, //合並多個單元格’deletetable’, //刪除表格’cleardoc’, //清空文檔’insertparagraphbeforetable’,

//”表格前插入行”‘insertcode’, //代碼語言’fontfamily’, //字體’fontsize’, //字號’paragraph’, //段落格式’simpleupload’, //單圖上傳’insertimage’, //多圖上傳’edittable’, //表格屬性’edittd’,

//單元格屬性’link’, //超鏈接’emotion’, //表情’spechars’, //特殊字符’searchreplace’, //查詢替換’map’, //Baidu地圖’gmap’, //Google地圖’insertvideo’, //視頻’help’, //幫助’justifyleft’,

//居左對齊’justifyright’, //居右對齊’justifycenter’, //居中對齊’justifyjustify’, //兩端對齊’forecolor’, //字體顏色’backcolor’, //背景色’insertorderedlist’, //有序列表’insertunorderedlist’,

//無序列表’fullscreen’, //全屏’directionalityltr’, //從左向右輸入’directionalityrtl’, //從右向左輸入’rowspacingtop’, //段前距’rowspacingbottom’, //段后距’pagebreak’, //分頁’insertframe’,

//插入Iframe’imagenone’, //默認’imageleft’, //左浮動’imageright’, //右浮動’attachment’, //附件’imagecenter’, //居中’wordimage’, //圖片轉存’lineheight’, //行間距’edittip ‘, //編輯提示’customstyle’,

//自定義標題’autotypeset’, //自動排版’webapp’, //百度應用’touppercase’, //字母大寫’tolowercase’, //字母小寫’background’, //背景’template’, //模板’scrawl’, //塗鴉’music’, //音樂’inserttable’,

//插入表格’drafts’, // 從草稿箱加載’charts’, // 圖表]]

---

百度編輯器ueditor上傳圖片順序亂掉修改方法
https://blog.csdn.net/love545242884/article/details/76121303

public/rap/admin/lib/ueditor/1.4.3/dialogs/attachment/attachment.js里

_this.fileList.push(json);

改為

_this.fileList[$file.index()] = json;

public/rap/admin/lib/ueditor/1.4.3/dialogs/image/image.js里

_this.imageList.push(json);

改為

_this.imageList[$file.index()] = json;

---

百度ueditor使圖片在編輯器中自適應大小

https://blog.csdn.net/sunny327/article/details/86580097

public/rap/admin/lib/ueditor/1.4.3/themes/iframe.css里添加代碼

img {
    max-width:100%;/*圖片自適應寬度*/
}
body {
    overflow-y:scroll !important;
}
.view {
    word-break: break-all;
}
.vote_area {
    display: block;
}
.vote_iframe {
    background-color: transparent;
    border: 0 none;
    height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除點擊圖片后出現的拉伸邊框*/