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实例?的更多相关文章

  1. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  2. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  3. vue 集成百度富文本编辑器

    <template> <div> <textarea style="display:none" id="editor_content&quo ...

  4. vue 集成 NEditor 富文本

    下载NEditor 放在  vue 项目下面 public  文件中. 安装    vue-neditor-wrap  执行命令 npm  install  vue-neditor-wrap 代码使用 ...

  5. vue集成CKEditor构建框架的使用,遇到富文本框不出现工具栏等操作

    官方关于Vue集成CKEditor富文本框的文档:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/framew ...

  6. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

  7. 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例

    http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...

  8. 第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框

    第三百九十五节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框 首先安装DjangoUeditor3模块 Ueditor HTML编辑器是百度开源的HTML编辑器 下载 ...

  9. 使用kindeditor获取不到富文本框中的值

    获取不到富文本框中的值,网上一搜一堆,但最终没有几个能解决问题的,折腾一番最终解决.注意就是红色代码,加上之后就可以解决问题了. KindEditor.ready(function (K) { var ...

随机推荐

  1. const 和指针之间的姻缘

    const和指针到底有何姻缘呢? char const *p = NULL; //char const 和 const char 是一样的,p 是一个指向常整型的指针变量 ,指针变量的值不能改变 ch ...

  2. java 人机猜拳 游戏

    人机猜拳-游戏 掌握类和对象的使用,掌握方法的定义和返回值,掌握封装的运用 定义一个电脑类:Computer.java 点击查看[Computer.java]代码 /** * @Title: 电脑类 ...

  3. 教程1--安装Git软件

    在https://git-scm.com/下载git for windows,双击安装即可. (1)单击Next (2)选择安装目录 (3)勾选创建桌面快捷方式.Git Bash.Git GUi.已经 ...

  4. parquet列存储本身自带压缩 配合snappy或者lzo等可以进行二次压缩

    上传txt文件到hdfs,txt文件大小是74左右. 这里提醒一下,是不是说parquet加lzo可以把数据压缩到这个地步,因为我的测试数据存在大量重复.所以下面使用parquet和lzo的压缩效果特 ...

  5. 5.string字符串

    string(字符串)是 Redis 中最简单的数据类型.我们知道,Redis 所有数据类型都是以 key 作为键,通过检索这个 key 就可以获取相应的 value 值.Redis 存在多种数据类型 ...

  6. Pandas:将DataFrame中的一列转化为List

    #假设data是一个DataFrame对象,如果要把它的第二列转换为List print(data.iloc[:,1].to_list())

  7. Qt:QList、QStringList

    QList 0.说明 QList<T> 一个QList是存储相同类型一组数据的列表. QStringList是从QList<String>继承而来,并添加了一些好用的方法,如j ...

  8. 获取HTML中所有图片的 URL

    /// <summary> /// 获取HTML中所有图片的 URL /// </summary> /// <param name="strHtml" ...

  9. 发现Spring事务的一个实锤bug,官方还拒不承认?你来评评理...

    你好呀,我是歪歪. 事情是这样的,上周我正在全神贯注的摸鱼,然后有个小伙伴给我发来微信消息,提出了自己关于事务的一个疑问,并配上两段代码: 先说结论:我认为这是 Spring 事务的一个 bug.但是 ...

  10. GPG入门尝试

    GPG入门尝试 参考:阮一峰的网络日志 在所附链接中,对大多数信息的解释说明已经较为详细,在此只补充实际操作中的一些问题和解决方法 gpg --decrypt demo.en.txt --output ...