vue集成ckeditor富文本框,怎么获取CKEditor实例?
CKEDITOR 版本5 ,vue集成形式
vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明

官方在builds--》Getting and saving data 栏中有进行说明,
既然我们使用了vue,那就只能通过CKEditor的ready事件来获取 实例对象 了。
官方使用的例子,去这里看index.html文件即可:https://github.com/ckeditor/ckeditor5-vue/tree/master/sample
这是关于ready事件的说明,网址:https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-balloon_ballooneditor-BalloonEditor.html#static-function-create

翻译的,看个大概就行 /(ㄒoㄒ)/~~
它的参数就是 实例的CKEditor富文本框的对象 ,当然,这个对象你可以自己保存起来为js代码使用;;;这个 ckeditor 自定义标签,是 ckeditor5-vue 插件声明的。不过你需要照这个文档熟悉完后就明白了:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onEditorReady"></ckeditor>
这里说明一下,我们使用的vue数据对象中的 editor属性 并不是这个ckeditor的实例对象,
通过 @ready 的事件方法的形参就是CKEDITOR的实例对象,自己进行保存起来就行了(@(缩写形式)===(等同于) v-on);如果是个别方法使用需要这个富文本框实例的话,则参考 Function.bind 使用的方法就行,直接绑定当前上下文对象
vue集成ckeditor富文本框,怎么获取CKEditor实例?的更多相关文章
- vue集成百度富文本编辑器
1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...
- Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)
tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...
- vue 集成百度富文本编辑器
<template> <div> <textarea style="display:none" id="editor_content&quo ...
- vue 集成 NEditor 富文本
下载NEditor 放在 vue 项目下面 public 文件中. 安装 vue-neditor-wrap 执行命令 npm install vue-neditor-wrap 代码使用 ...
- vue集成CKEditor构建框架的使用,遇到富文本框不出现工具栏等操作
官方关于Vue集成CKEditor富文本框的文档:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/framew ...
- 项目页面集成ckeditor富文本编辑器
步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例
http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...
- 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框
第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...
- 使用kindeditor获取不到富文本框中的值
获取不到富文本框中的值,网上一搜一堆,但最终没有几个能解决问题的,折腾一番最终解决.注意就是红色代码,加上之后就可以解决问题了. KindEditor.ready(function (K) { var ...
随机推荐
- 『无为则无心』Python面向对象 — 56、Python多态
目录 1.Python中的多态 (1)多态的定义 (2)多态的好处 (3)多态实现步骤 2.体验多态 1.Python中的多态 (1)多态的定义 多态是一种使用对象的方式,子类重写父类方法,不同的子类 ...
- vue--vue-router 组件映射到路由
前言 地址栏路由的发展经历了后端路由配置阶段.前后端分离阶段.直至单页面富应用阶段.本文来总结一下 vue-router 的相关知识点和用法. 正文 1.什么是 vue-router 路由 路由就是S ...
- CobaltStrike逆向学习系列(2):Stageless Beacon 生成流程分析
这是[信安成长计划]的第 2 篇文章 关注微信公众号 [信安成长计划] 0x00 目录 0x01 Patch Beacon 0x02 Patch Loader 0x03 文件对比 0x04 流程图 C ...
- 古典密码之凯撒密码and换位密码
凯撒密码: 密文:wuhdwb lpsrvvleoh 算法:Ci=E(pi)=(pi+3)mod 26 明文:TREATY IMPOSSIBLE 例如ABCD这四个字母要进行加密,如果我们设置它的偏移 ...
- Custom数据如何导入RENIX软件——网络测试仪实操
在我们日常工作中,有的时候会需要把特定的数据内容从抓包软件中导入到RENIX软件中,然后以大速率发送出去,本文描述如何进行这样的操作. 一.整理需要抓取的数据部分 1.例如有一个数据包,里面包含特定的 ...
- Clickhouse - MergeTree原理
Clickhouse - MergeTree原理 MergeTree引擎以及隶属于MergeTree引擎族的所有引擎是Clickhouse表引擎中最重要, 最强大的引擎. MergeTree引擎族中的 ...
- (三)目标检测算法之SPPNet
今天准备再更新一篇博客,加油呀~~~ 系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-C ...
- python如何data格式和时间戳的转换
Python 获取几天前的时间 计算几天前并转换为指定格式. import time import datetime # 先获得时间数组格式的日期 threeDayAgo = (datetime.da ...
- JZ-013-调整数组顺序使奇数位于偶数前面
调整数组顺序使奇数位于偶数前面 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对 ...
- pandas常用操作详解——pandas的去重操作df.duplicated()与df.drop_duplicates()
df.duplicated() 参数详解: subset:检测重复的数据范围.默认为数据集的所有列,可指定特定数据列: keep: 标记哪个重复数据,默认为'first'.1.'first':标记重复 ...