Ueditor编辑器实战 HTML / vue+v-model

最新推荐文章于 2022-05-15 21:44:45 发布
最新推荐文章于 2022-05-15 21:44:45 发布
阅读量761 收藏 1
点赞数
分类专栏： 前端知识库 文章标签： ueditor 富文本 vue v-model
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiawwYear/article/details/100728939
版权

Ueditor 编辑器实战 HTML / vue+v-model

简介

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。市面上流行的编辑器有很多，大致如下：

名称优势不足
wangEditor轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮没有强大的后台支持
kindeditor文档齐全 中文文档便于阅读理解 界面类似百度存在图片上传问题，如果上传历史过多，会全部加载，导致浏览器卡，反应慢
bootstrap-wysiwyg外观简洁大方，使用方便，支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性没有表情包 , 没有开发文档不便于阅读使用
Jquery-notebook简单，干净，优雅.用鼠标选中文字可看到效果由于bootstrap兼容问题 需要运行在现代浏览器上 , 没有开发文档不便于阅读
summernote界面简介，舒服，强大的API文档，开发方便，组件内元素易于控制（重要）移动或WEB端回显完美支持功能单一
ueditor插件多，基本满足各种需求重量级插件（个人观点哈），加载过慢，界面陈旧，官方早期插件已停止迭代优化，问题较多，组件内元素不易控制

本章节就 ueditor 进行开发阐述，至于开发过程中遇到的一些问题，后续我会在博客中一一向大家阐述，同时欢迎留言质问。

功能介绍

Ueditor 有着丰富且强大的功能，如图所示
在这里插入图片描述
我们分为两大类：1、基本功能 2、增值功能(在下自定义)
基本功能：加粗、字体、字号、下划线、表格…一些不需要后台支持的功能；
增值功能：所有均需要后端代码支持。
例如：图片视频文件上传插件一般都有配置，富文本也不例外，配置一定是针对功能的，既然功能有区别，配置也有，ueditor的配置文件有两种，一种是基本配置，有个专属的配置js文件供大家使用，并且里面有详细的使用说明；

HTML 开发

  1. 引入js/css 文件
    在这里插入图片描述
    ueditor.config.js ：配置文件 ueditor基本配置都存放于此。详细介绍请看官方文档介绍，此处不一一列举。
    ueditor.all.js： 核心源码
    zh-cn.js： 中文包

  2. 初始化插件

    在这里插入图片描述

<script type="text/javascript" charset="utf-8" src="${base}/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${base}/lib/ueditor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="${base}/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
<div>
    <script id="container" type="text/plain" style="width:100%;height:500px;"></script>
</div>

<script type="text/javascript">

    var ucontent = ${content};

    var ue = UE.getEditor('container',{initialFrameHeight:400,scaleEnabled:true});
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo' || action == 'uploadfile') {
                return '${filebase}/editor/upload'; //在这里返回我们实际的上传图片地址
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
    };

    ue.ready(function() {
        ue.setContent(ucontent);
    });
 </script>
  1. 后端接口支持
    上传文件接口：

后端提供文件上传接口，这里的文件上传包括图片视频音频等，都调用同一个接口，需要注意的是接口返回的数据严格按照此种json格式来，否则编辑时识别不了将不会回显图片，至于上传功能，您可以自由发挥，但必须确保返回的路径可以访问哦！
在这里插入图片描述

 /**
     * 上传文件 到fastdfs文件服务器
     *
     * @param file 需要上传的文件
     * @return 保存后的文件地址，文件组名
     * @author Jung
     * @since 2018年06月16日12:17:42
     */
    @PostMapping("upload")
    public String  upload(@RequestParam(required = false) MultipartFile file) {
        //fastdfs 文件服务器地址
        if (file == null || file.isEmpty()) {
            return "error";
        }
        try {
            FastdfsFileDTO fileDTO = fileService.fileUpload(file, false);
            String config = "{\"state\": \"SUCCESS\"," +
                    "\"url\": \"" + fileDTO.getFileUrl() + "\"," +
                    "\"title\": \"" + fileDTO.getFileName() + "\"," +
                    "\"original\": \"" + fileDTO.getFileName() + "\"}";
            return config;
        } catch (UnityRuntimeException e) {
            return "error";
        }
    }

获取功能项配置接口
编辑器此项有没有增值功能，全部依赖此接口返回，若你不想配置某项功能可以在接口中删掉对应的属性，前端则无此功能，这些配置里包含着上传路径，上传action名称，表单名称，限制文件大小等等，皆有详细注释。此接口地址在前段需要配置在config.js 中，如图所示

在这里插入图片描述
在这里插入图片描述

@RequestMapping(value = "/config")
    @ResponseBody
    public String config(HttpServletRequest request, HttpServletResponse response) {

        String config = "{\n" +
                "    /* 上传图片配置项 */\n" +
                "    \"imageActionName\": \"uploadimage\", /* 执行上传图片的action名称 */\n" +
                "    \"imageFieldName\": \"file\", /* 提交的图片表单名称 */\n" +
                "    \"imageMaxSize\": 2048000, /* 上传大小限制，单位B */\n" +
                "    \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 上传图片格式显示 */\n" +
                "    \"imageCompressEnable\": true, /* 是否压缩图片,默认是true */\n" +
                "    \"imageCompressBorder\": 1600, /* 图片压缩最长边限制 */\n" +
                "    \"imageInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +
                "    \"imageUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
                "    \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
                "                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */\n" +
                "                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */\n" +
                "                                /* {time} 会替换成时间戳 */\n" +
                "                                /* {yyyy} 会替换成四位年份 */\n" +
                "                                /* {yy} 会替换成两位年份 */\n" +
                "                                /* {mm} 会替换成两位月份 */\n" +
                "                                /* {dd} 会替换成两位日期 */\n" +
                "                                /* {hh} 会替换成两位小时 */\n" +
                "                                /* {ii} 会替换成两位分钟 */\n" +
                "                                /* {ss} 会替换成两位秒 */\n" +
                "                                /* 非法字符 \\ : * ? \" < > | */\n" +
                "                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */\n" +
                "\n" +
                "    /* 涂鸦图片上传配置项 */\n" +
                "    \"scrawlActionName\": \"uploadscrawl\", /* 执行上传涂鸦的action名称 */\n" +
                "    \"scrawlFieldName\": \"file\", /* 提交的图片表单名称 */\n" +
                "    \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
                "    \"scrawlMaxSize\": 2048000, /* 上传大小限制，单位B */\n" +
                "    \"scrawlUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
                "    \"scrawlInsertAlign\": \"none\",\n" +
                "\n" +
                "    /* 截图工具上传 */\n" +
                "    \"snapscreenActionName\": \"uploadimage\", /* 执行上传截图的action名称 */\n" +
                "    \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
                "    \"snapscreenUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
                "    \"snapscreenInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +
                "\n" +
                "    /* 抓取远程图片配置 */\n" +
                "    \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
                "    \"catcherActionName\": \"catchimage\", /* 执行抓取远程图片的action名称 */\n" +
                "    \"catcherFieldName\": \"source\", /* 提交的图片列表表单名称 */\n" +
                "    \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
                "    \"catcherUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
                "    \"catcherMaxSize\": 2048000, /* 上传大小限制，单位B */\n" +
                "    \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 抓取图片格式显示 */\n" +
                "\n" +
                "    /* 上传视频配置 */\n" +
                "    \"videoActionName\": \"uploadvideo\", /* 执行上传视频的action名称 */\n" +
                "    \"videoFieldName\": \"file\", /* 提交的视频表单名称 */\n" +
                "    \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
                "    \"videoUrlPrefix\": \"\", /* 视频访问路径前缀 */\n" +
                "    \"videoMaxSize\": 52428800, /* 上传大小限制，单位B，50MB */\n" +
                "    \"videoAllowFiles\": [\n" +
                "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"], /* 上传视频格式显示 */\n" +
                "\n" +
                "    /* 上传文件配置 */\n" +
                "    \"fileActionName\": \"uploadfile\", /* controller里,执行上传视频的action名称 */\n" +
                "    \"fileFieldName\": \"file\", /* 提交的文件表单名称 */\n" +
                "    \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上传保存路径,可以自定义保存路径和文件名格式 */\n" +
                "    \"fileUrlPrefix\": \"\", /* 文件访问路径前缀 */\n" +
                "    \"fileMaxSize\": 52428800, /* 上传大小限制，单位B，默认50MB */\n" +
                "    \"fileAllowFiles\": [\n" +
                "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
                "    ], /* 上传文件格式显示 */\n" +
                "\n" +
                "    /* 列出指定目录下的图片 */\n" +
                "    \"imageManagerActionName\": \"listimage\", /* 执行图片管理的action名称 */\n" +
                "    \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\", /* 指定要列出图片的目录 */\n" +
                "    \"imageManagerListSize\": 20, /* 每次列出文件数量 */\n" +
                "    \"imageManagerUrlPrefix\": \"\", /* 图片访问路径前缀 */\n" +
                "    \"imageManagerInsertAlign\": \"none\", /* 插入的图片浮动方式 */\n" +
                "    \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 列出的文件类型 */\n" +
                "\n" +
                "    /* 列出指定目录下的文件 */\n" +
                "    \"fileManagerActionName\": \"listfile\", /* 执行文件管理的action名称 */\n" +
                "    \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\", /* 指定要列出文件的目录 */\n" +
                "    \"fileManagerUrlPrefix\": \"\", /* 文件访问路径前缀 */\n" +
                "    \"fileManagerListSize\": 20, /* 每次列出文件数量 */\n" +
                "    \"fileManagerAllowFiles\": [\n" +
                "        \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                "        \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "        \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                "        \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                "        \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
                "    ] /* 列出的文件类型 */\n" +
                "\n" +
                "}";
        return config;

    }

至此纯HTML 方式集成编辑器就完成了。

vue + ueditor + v-model 开发

1、引入VueUeditorWrap组件
在这里插入图片描述
2、绑定数据
在这里插入图片描述
3、配置组件

在这里插入图片描述

其中 serverUrl 是指 从后端获取 【功能项配置】和【上传图片视频文件】的地址，与纯HTML方式不同的是后端接口，纯HTML 需要后端支持两个接口，则vue集成后 会将两个接口合二为一，将文件上传接口和获取功能项配置接口合并，ueditor会通过 传不同的表单参数来上传文件或者获取数据，如图所示：

在这里插入图片描述

   @RequestMapping("config")
    public void ueditorConfig(HttpServletRequest request, HttpServletResponse response, MultipartFile file) {
        try {
            String exec = "";
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/plain");
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            String actionType = request.getParameter("action");
            String callback = request.getParameter("callback");
            System.out.println(callback);
            // 获取配置
            if ("config".equals(actionType)) {
                exec = StringUtils.isNotEmpty(callback) ? callback + "(" + getConfig() + ")" : getConfig();
            } else {
                if (file == null || file.isEmpty()) {
                    exec =  "error";
                }else {
                    FastdfsFileDTO fileDTO = fileService.fileUpload(file, false);
                    exec = resultMap(fileDTO);
                }
            }
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();

        } catch (Exception e) {
            logger.info("上传错误");
        }
    }

至此，vue 集成编辑器就此完成。

Ai默vv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue结合Ueditor绑定数据后拿不到值解决方法
weixin_34357962的博客
11-14 1393
为什么80%的码农都做不了架构师？>>> ...
百度UEditor HTML编辑器,
05-13
UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的
HTML编辑器UEditor的简单使用
热门推荐
Fanteathy的程序人生
09-13 2万+
参考自：http://ueditor.baidu.com/website/document.html 关于HTML编辑器，试过FCKeditor，升级版的CKeditor，还有TinyMCE，最近在尝试使用百度的UEditor。对比一下还是觉得UEditor的配置较简单，上手快并且文档和例子也很齐全。那么这里以UEditor1.2.3.0PHP版本UTF-8版为例梳理一下UEditor的
百度富文本编辑器ueditor插入html代码
weixin_58860430的博客
03-30 2368
记录工作中遇到的问题 需求: 文本编辑器左侧展示模板，点击左侧模板将模板展示到富文本编辑器内。 代码： // 点击模板时添加到编辑器内 $(".templates-con ul li").click(function () { // 获取到了所需的html结构 // console.log($(this).html()) // 在当前光标位置插入html内容 UE.getEditor('editor').execCommand('insertHtml', $(this).ht.
html ueditor使用教程,ueditor编辑器配置及使用介绍
weixin_31796803的博客
06-08 1145
<1>:ueditor编辑器配置 2：解压后，只需要保留utf8-php这个文件夹里面的内容就可以了3：根据自己项目的需要配置到根目录的相应文件夹下，我是配置到根目录的public目录下，如下图 4：在html页面配置加载UEditor编辑器，加入三个js文件以及在页面初始化UEditor编辑器 这里的id="editor"就是初始化需要获取的id上下需要保持一下，5：配置完后，在...
ueditor 进行html预览,使用ueditor进行页面预览和打印
weixin_39732825的博客
07-11 1294
UEditor文档官网下载 UEditor打印的方式有很多，这里其实注重于训练如何使用ueditor。把编辑器的状态栏和工具栏全部隐藏，仅仅让其作为一个现实的工具，然后调用其打印方法进行打印。下载压缩包ueditor-dev-1.5.0.zip，解压后_examples就是示例页面，在该文件夹下新建一个html名为printDemo.html代码如下：HTMLPUBLIC"-//W3C//DT...
vue-ueditor-wrap：:person_biking:Vue+:high-speed_train:UEditor+ v-模型双向绑定:rocket:https：haochuan9421.github.iovue-ueditor-wrap-demo
02-06
UEditor仍然是内部使用频率较高的富文本编辑器，而Vue又具有广泛的使用，将结合，是很多Vue开发者的切实需求。自己在写公司项目时封装了这个组件，它省去了初始化UEditor，手动调用getContent ， setContent等繁琐的...
vue-ueditor-wrap::person_biking:Vue + :high-speed_train:UEditor + v-model双向绑定:rocket:
05-10
一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。 :fire: :rainbow:   :compass: Installation # vue-ueditor-wrap v3 仅支持 ...
vue-ueditor-wrap UEditor资源包
03-14
Vue-UEditor-Wrap组件还支持许多自定义配置，例如设置初始编辑器内容、工具栏按钮、语言等，你可以通过`props`传递给组件。例如，如果你想禁用某些功能或更改编辑器语言，可以这样配置： ```vue <UEditor :server...
UEditor富文本编辑器的静态资源部分
10-25
- **数据绑定**：利用Vue的v-model指令，实现编辑器内容与Vue数据的双向绑定。 - **事件处理**：注册监听事件，如内容改变、图片上传完成等，以便进行相应的业务逻辑处理。 **3. UEditor配置与自定义** UEditor提供...
UeditorModel-SSH-方案2.rar
07-24
SSH框架中整合了百度编译器，打开可以直接使用， 这个使用的是方案2，访问百度编译器的端口直接经过Struts2，重写controller.jsp实现 Struts2的默认拦截器可以起作用， 想了解更多访问https://blog.csdn.net/qq_39905143 使用方案2来解决百度编译器的端口进行过滤 这个方案是非常完美的方案，但由于配置复杂，所以上传了模板包 config.json报错不用管，正常，如果其他报错，请将鼠标放到项目上， 右键-》构建路径-》配置构建路径-》将Apache和Jre换成你自己的环境 我截了图，可以参考项目中的图片
Vue2xUEditorvmodel双向绑定
08-12
Vue2xUEditorvmodel双向绑定
Ueditor 富文本编辑器及图片转换.zip
08-07
本项目重点涉及Ueditor与Vue框架的结合使用，以及如何处理编辑器中的图片，特别是将图片从base64编码转换为网址格式并上传至服务器。 首先，Ueditor是一款功能强大的JavaScript富文本编辑器，支持多种插件和定制...
ueditor编辑html问题总结
weixin_33845477的博客
02-20 631
table和td都会被ueditor加上间距，使原本的html样式变乱 注释掉给table、td、th等添加样式的代码 ueditor默认会把很多标签过滤替换掉，改变原本的html结构 注释掉所有xss过滤白名单代码 table嵌套table，的样式会乱掉 在ueditor destroy后，并没有注销window.onscroll事件(ueditor为了实现操作栏...
vue中v-model详解
weixin_66375317的博客
05-15 1683
vue中v-model详解
html编辑器讲解,一款好用的HTML编辑器（UEditor）使用教程
weixin_28765561的博客
06-19 1024
关于HTML编辑器，试过FCKeditor，升级版的CKeditor，还有TinyMCE，最近在尝试使用百度的UEditor。对比一下还是觉得UEditor的配置较简单，上手快并且文档和例子也很齐全。那么这里以UEditor1.2.3.0PHP版本UTF-8版为例梳理一下UEditor的使用流程。1.首先是UEditor的文档结构_examples：编辑器各种版本的示例页面_src：JS文件dia...
Html引入百度富文本编辑器ueditor及自定义工具栏
qq_25285531的博客
10-08 1100
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo， 然后创建ueditor.html文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可,代码如下： <!DOCTYPE html> <html> <head> <title>百度编辑器&l...
百度富文本编辑器使用方法 html,vue2.0项目中使用百度Ueditor富文本编辑器
weixin_36361396的博客
06-15 291
1.首先下中比需抖接朋功要朋插载静态文件2.然后，进遇新是直朋能到分览行配置首先把官网下载的Ueditor资源，放入静态资源src/static中。修改ued地开级还思层似未屏别。域一插式近址发应是itor.config.js中的window.UEDITOR_HOME_URL配置，如分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后，护据一求相下图：3.在m...
vue html 编辑,vue-html-editor：实现HTML编辑器的Vue.js组件
weixin_36400512的博客
06-24 1691
vue-html-editor A Vue.js component implementing the HTML editor with the jQuery summernote plugin.DemoThe demo page is HERE. RequirementsInstllationnpm$ npm install vue-html-editorbower$ bower ins...
vue3+vite+ts 使用富文本编辑器vue-ueditor-wrap
最新发布
11-15
以下是使用vue-ueditor-wrap富文本编辑器的步骤： 1.安装vue-ueditor-wrap ```shell npm install vue-ueditor-wrap --save ``` 2.在Vue组件中引入vue-ueditor-wrap ```vue <template> <div> <vue-ueditor-wrap v-model="content" :config="myConfig" editor-id="editor-demo-01" @ready="ready"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap' export default { components: { VueUeditorWrap }, data() { return { content: '', myConfig: { // 配置项 }, editorInstance: null } }, methods: { ready(editorInstance) { this.editorInstance = editorInstance } } } </script> ``` 3.在Vue组件中定义myConfig配置项 ```vue <script> export default { data() { return { myConfig: { // 配置项 UEDITOR_HOME_URL: '/static/UEditor/', // UEditor资源文件的根目录 serverUrl: '/api/ueditor/' // UEditor服务端接口地址 } } } } </script> ``` 4.在Vue组件中使用editorInstance获取编辑器实例 ```vue <script> export default { methods: { ready(editorInstance) { this.editorInstance = editorInstance }, getContent() { console.log(this.editorInstance.getContent()) // 获取编辑器内容 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值