打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
vue加载百度Ueditor编辑器

下载代码:http://ueditor.baidu.com/website/download.html

在HTML文件的head引入以下文件:

  1. <!-- 编辑器依赖 begin -->
  2. <script src="./ueditor/ueditor.config.js"></script>
  3. <script src="./ueditor/ueditor.all.min.js"></script>
  4. <script src="./ueditor/lang/zh-cn/zh-cn.js"></script>
  5. <link rel="stylesheet" href="./ueditor/themes/default/css/ueditor.css'">
  6. <!-- 编辑器依赖 end -->

注意:引入路径根据文件的实际存放路径来写就好

接下来在组件里就可以用了,组件完整代码:

  1. <template>
  2. <div>
  3. <div id="container" style="width:50vw; height:300px;"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'index',
  9. data() {
  10. return {
  11. editor: null,
  12. value: ''
  13. }
  14. },
  15. mounted() {
  16. this.editor = window.UE.getEditor('container')
  17. this.editor.addListener('ready', () => {
  18. this.editor.setContent(this.value)
  19. })
  20. }
  21. }
  22. </script>
  23. <style>
  24. </style>

这样就可以了,菜单可以根据需要,自己在ueditor.config.js文件中配置。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
HTML编辑器UEditor的简单使用
百度UEditor编辑器使用教程与使用方法
从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
百度编辑器-Ueditor
UEditor(Java版本)安装与部署
如何解决关于ueditor编辑器过滤script/style标签的问题
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服