vue3整合UEditor编辑器
vue 2023-04-10 13:51:21

下载地址：https://github.com/fex-team/ueditor

可以选择release最近的一个版本，1.4.3

文档：http://fex.baidu.com/ueditor/#start-toolbar 

 

推荐：https://hc199421.gitee.io/vue-ueditor-wrap/#/home

 

1、main.js全局注册，单个组件内注册不生效，原因未知：

JavaScript Code复制内容到剪贴板
  1. import VueUeditorWrap from 'vue-ueditor-wrap'  
  2.   
  3. const app = createApp(App);  
  4.   
  5. //...  
  6.   
  7. app.use(VueUeditorWrap);  

 

2、将下载好的文件放入public目录下，命名为UEditor

这里我有一些调整，比如隐藏了查看在线图片，修改了css，由于和vue3的UI框架有样式冲突，调整了一下

UEditor.zip
文件类型: .zip debedf5c7e723e41e262edd9af43f379.zip (2.81 MB)

由于一些沟通问题，config我写死在JS里面，可以恢复原来的ueditor.all.min.js

 

 

3、页面引入

JavaScript Code复制内容到剪贴板
  1. <ueditor v-model="form.content" placeholder="文章内容不能为空" :height="400"></ueditor>  

 

 

组件内容：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="sceditor">  
  3.         <vue-ueditor-wrap v-model="contentValue" :config="editorConfig" editor-id="editor-01"></vue-ueditor-wrap>  
  4.     </div>  
  5. </template>  
  6.   
  7. <script>  
  8.     import API from "@/api";  
  9.     import config from '@/config'  
  10.     export default {  
  11.         props: {  
  12.             modelValue: {  
  13.                 type: String,  
  14.                 default: ""  
  15.             },  
  16.             placeholder: {  
  17.                 type: String,  
  18.                 default: ""  
  19.             }  
  20.         },  
  21.         data() {  
  22.             return {  
  23.                 editorConfig: {  
  24.                     UEDITOR_HOME_URL: `UEditor/`, // 访问 UEditor 静态资源的根路径  
  25.                     themePath: "/UEditor/themes/",  
  26.                     theme: 'default',  
  27.                     serverUrl:  API.common.ueditor.url, // 接口请求地址  
  28.                     autoHeight: true,                   // 高度自动撑高  
  29.                     initialFrameWidth: 1200,                // 初始化编辑器宽度,默认1000  
  30.                     initialFrameHeight: 400,            // 初始化编辑器高度,默认320  
  31.                     toolbars: [  
  32.                         [  
  33.                             'source', '|', 'undo', 'redo', '|',  
  34.                             'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'pasteplain', 'autotypeset',  'blockquote', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight',  
  35.   
  36.                             'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', 'touppercase', 'tolowercase', 'link', 'unlink', 'anchor',  
  37.   
  38.                             // 'simpleupload',  
  39.                             'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',  
  40.                             'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'template', 'background', '|',  
  41.                             'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage',  
  42.   
  43.                             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'drafts', 'help'  
  44.                         ],  
  45.                     ]  
  46.                     // toolbars: [  
  47.                     //  [  
  48.                     //      'anchor', //锚点  
  49.                     //      'undo', //撤销  
  50.                     //      'redo', //重做  
  51.                     //      'bold', //加粗  
  52.                     //      'indent', //首行缩进  
  53.                     //      'snapscreen', //截图  
  54.                     //      'italic', //斜体  
  55.                     //      'underline', //下划线  
  56.                     //      'strikethrough', //删除线  
  57.                     //      'subscript', //下标  
  58.                     //      'fontborder', //字符边框  
  59.                     //      'superscript', //上标  
  60.                     //      'formatmatch', //格式刷  
  61.                     //      'source', //源代码  
  62.                     //      'blockquote', //引用  
  63.                     //      'pasteplain', //纯文本粘贴模式  
  64.                     //      'selectall', //全选  
  65.                     //      'print', //打印  
  66.                     //      'preview', //预览  
  67.                     //      'horizontal', //分隔线  
  68.                     //      'removeformat', //清除格式  
  69.                     //      'time', //时间  
  70.                     //      'date', //日期  
  71.                     //      'unlink', //取消链接  
  72.                     //      'insertrow', //前插入行  
  73.                     //      'insertcol', //前插入列  
  74.                     //      'mergeright', //右合并单元格  
  75.                     //      'mergedown', //下合并单元格  
  76.                     //      'deleterow', //删除行  
  77.                     //      'deletecol', //删除列  
  78.                     //      'splittorows', //拆分成行  
  79.                     //      'splittocols', //拆分成列  
  80.                     //      'splittocells', //完全拆分单元格  
  81.                     //      'deletecaption', //删除表格标题  
  82.                     //      'inserttitle', //插入标题  
  83.                     //      'mergecells', //合并多个单元格  
  84.                     //      'deletetable', //删除表格  
  85.                     //      'cleardoc', //清空文档  
  86.                     //      'insertparagraphbeforetable', //"表格前插入行"  
  87.                     //      'insertcode', //代码语言  
  88.                     //      'fontfamily', //字体  
  89.                     //      'fontsize', //字号  
  90.                     //      'paragraph', //段落格式  
  91.                     //      'simpleupload', //单图上传  
  92.                     //      'insertimage', //多图上传  
  93.                     //      'edittable', //表格属性  
  94.                     //      'edittd', //单元格属性  
  95.                     //      'link', //超链接  
  96.                     //      'emotion', //表情  
  97.                     //      'spechars', //特殊字符  
  98.                     //      'searchreplace', //查询替换  
  99.                     //      'map', //Baidu地图  
  100.                     //      'gmap', //Google地图  
  101.                     //      'insertvideo', //视频  
  102.                     //      'help', //帮助  
  103.                     //      'justifyleft', //居左对齐  
  104.                     //      'justifyright', //居右对齐  
  105.                     //      'justifycenter', //居中对齐  
  106.                     //      'justifyjustify', //两端对齐  
  107.                     //      'forecolor', //字体颜色  
  108.                     //      'backcolor', //背景色  
  109.                     //      'insertorderedlist', //有序列表  
  110.                     //      'insertunorderedlist', //无序列表  
  111.                     //      'fullscreen', //全屏  
  112.                     //      'directionalityltr', //从左向右输入  
  113.                     //      'directionalityrtl', //从右向左输入  
  114.                     //      'rowspacingtop', //段前距  
  115.                     //      'rowspacingbottom', //段后距  
  116.                     //      'pagebreak', //分页  
  117.                     //      'insertframe', //插入Iframe  
  118.                     //      'imagenone', //默认  
  119.                     //      'imageleft', //左浮动  
  120.                     //      'imageright', //右浮动  
  121.                     //      'attachment', //附件  
  122.                     //      'imagecenter', //居中  
  123.                     //      'wordimage', //图片转存  
  124.                     //      'lineheight', //行间距  
  125.                     //      'edittip ', //编辑提示  
  126.                     //      'customstyle', //自定义标题  
  127.                     //      'autotypeset', //自动排版  
  128.                     //      'webapp', //百度应用  
  129.                     //      'touppercase', //字母大写  
  130.                     //      'tolowercase', //字母小写  
  131.                     //      'background', //背景  
  132.                     //      'template', //模板  
  133.                     //      'scrawl', //涂鸦  
  134.                     //      'music', //音乐  
  135.                     //      'inserttable', //插入表格  
  136.                     //      'drafts', // 从草稿箱加载  
  137.                     //      'charts', // 图表  
  138.                     //  ]  
  139.                     // ]  
  140.                 },  
  141.                 contentValue: this.modelValue  
  142.             }  
  143.         },  
  144.         watch: {  
  145.             modelValue(val) {  
  146.                 this.contentValue = val  
  147.             },  
  148.             contentValue(val){  
  149.                 this.$emit('update:modelValue', val);  
  150.             }  
  151.         },  
  152.         mounted() {  
  153.             // console.log(path.join(__dirname, 'public'))  
  154.             if(process.env.NODE_ENV === 'development') {  
  155.                 this.editorConfig.editorConfig = 'UEditor/'  
  156.                 this.editorConfig.themePath = '/admin/UEditor/themes/' // 如果根目录则是/UEditor/themes  
  157.             }else{  
  158.                 this.editorConfig.editorConfig = config.SITE_URL + 'admin/UEditor/'  
  159.                 this.editorConfig.themePath = config.SITE_URL + 'admin/UEditor/themes/'  
  160.             }  
  161.               
  162.         },  
  163.         methods: {  
  164.    
  165.         }  
  166.     }  
  167. </script>  
  168.   
  169. <style>  
  170. </style>  

 

效果图预览：

 

 

 

本文来自于：https://hc199421.gitee.io/vue-ueditor-wrap/#/home

上一篇 微信小程序预览PDF文件
下一篇 vite项目require语法兼容问题解决 require is not defined
相关的文章
Powered by yoyo苏ICP备15045725号