一、下載ueditor
下載地址：http://ueditor.baidu.com/website/download.html
下載之後，將插件解壓放在static目錄下
二、修改ueditor.config.js 配置目錄 ：
三、新建組件\\src\\components\\\\ueditor\\\\ueditor.vue
組件全部代碼1
組件全部代碼2
四、在組件中引用
config配置:
<code>config: {
//可以在此處定義工具欄的內容 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', // 圖表 ]
],/<code>下面來看看效果：
分享到:
閱讀更多 IT小小金 的文章
