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. 日常问题记录 E138: Can't write viminfo file /root/.viminfo!

    问题是因为磁盘不足导致 看磁盘占用情况 排查:du --max-depth=1 -h   这个命令可以查看当前目录下哪个目录占用最大,然后再进一步看

  2. C语言qsort()函数的使用

    C语言qsort()函数的使用 qsort()函数是 C 库中实现的快速排序算法,包含在 stdlib.h 头文件中,其时间复杂度为 O(nlogn).函数原型如下: void qsort(void ...

  3. C# 题目

    题目 http://blog.zhaojie.me/2011/03/my-interview-questions-for-dotnet-programmers.html 1.考察对常量和自读字段 初始 ...

  4. 关于linux下,ls vi等命令失效的解决方法(配置下环境变量出现问题)

    转至:https://www.cnblogs.com/afeiiii/p/13824530.html 配置完环境变量source之后,linux的ls vi命令均失效,报错如下: 解决方法 1.输入  ...

  5. Zabbix使用python批量添加主机及主机资产信息-从零到无

    - - 时间:2020年11月10日 - - 作者:飞翔的小胖猪 前言: 使用zabbix作为基础环境的监控系统时,面对现网在用的2000+台把这些主机添加到zabbix监控中是一个问题,当然zabb ...

  6. LeetCode-017-电话号码的字母组合

    电话号码的字母组合 题目描述:给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合.答案可以按 任意顺序 返回. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示 ...

  7. ELK日志收集(SpringBoot)

    目录 环境&准备 ES安装 Kibana安装 Logstash安装 Logstash配置 SpringBoot中logback-spring.xml配置 测试 启动 ES\Kibana\Log ...

  8. 二级py--day5 软件工程基础

    二级py--day5软件工程基础 软件工程基础 1.软件工程三要素:方法.工具和过程 2.软件生命周期可以分为:项目可行性研究与规划.软件需求分析.软件设计.软件实现.软件测试.软件运行与维护等阶段 ...

  9. java IO流体系--通识篇

    1.I/O流是什么 Java的I/O流是实现编程语言的输入/输出的基础能力,操作的对象有外部设备.存储设备.网络连接等等,是所有服务器端的编程语言都应该具备的基础能力. I = Input(输入),输 ...

  10. Redis常用命令代码实例集合

    //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $redis->auth('12345 ...