vue2.x项目引入CKEditor4的两种方式

news2024/12/26 13:37:47

百度用了不行的看过来,本文专治各种流程不通的

一.直接npm下载型

  1. 下载ckeditor到vue项目
npm install ckeditor4-vue

2.在main.js里导入

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';

Vue.use( CKEditor );

3.在需要使用的组件里这样使用

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

不用做什么配置,傻瓜式安装。
另附官网文档:

vue2.x项目里引入cleditor4

二、下载文件引入型

1.先去官网下载你所需要的包
2.将下载好的包放在 public文件里面,如下图
在这里插入图片描述
3.在public/index.html里引入文件,路径一定要正确
在这里插入图片描述
4.在需要的组件使用即可
在这里插入图片描述

<template>
  <div style="text-align: center; margin: 20px">
    <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    CKEDITOR.replace("editor1")
  },

  methods: {},
}
</script>

然后运行项目即可看到效果。
出现找不到CKEDITOR,检查一下index.html里的引入路径,一般都是路径不正确导致的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/656466.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day54_spring整合mybatis

SpringMybatis整合【重点】 Spring学完了,主要学习Spring两个内容:IOCAOP 利用这两个知识来完成spring和mybatis的整合 IOC: 控制反转,用来创建对象 XxxService通过数据源创建数据库连接创建SqlSessionFactory创建SqlSession获得XxxMapper代理对象 AOP: 面向切面 控制事务 具体…

基于spring的前后端一体化积分商城系统

系统介绍 积分商城系统是一个基于Spring、MySQL和Redis等技术栈构建的全功能商城解决方案。该系统旨在为用户提供一个便捷的购物体验&#xff0c;并以积分作为支付和奖励的核心机制。 系统的核心功能包括商品浏览、购买下单、积分管理和订单处理。用户可以通过客户端访问系统…

一业余无线电爱好者因违规被罚2.4万美元,是否合理?

据一份名为《关于处罚款项的通知》&#xff0c;美国联邦通信委员会经过调查&#xff0c;对加利福尼亚州的一名业余无线电持有人菲利普J博代特&#xff08;业余电台呼号&#xff1a;N6PJB&#xff09;&#xff0c;处以巨额罚款&#xff0c;罚款金额为2.4万美元&#xff0c;折合人…

颠覆2D对象检测模型,MediaPipe 3D对象检测还原真实的对象特征

关于对象检测,我们以前分享的文章都是介绍的2D的对象检测,但是我们很多使用场景下,希望检测到的对象能够以3D的影像呈现出来,本期介绍的MediaPipe Objectron便是是用于日常对象的移动实时3D对象检测解决方案。它检测2D图像中的对象,并通过在Objectron数据集上训练的机器学…

6.17黄金反弹是否到顶,下周开盘如何布局

近期有哪些消息面影响黄金走势&#xff1f;下周黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;黄金周五(6月16日)小幅收高&#xff0c;但在触及5月以来最低盘中水准后本周以下跌收官。美市尾盘&#xff0c;现货黄金收报1957.68美元/盎司&#xff0c;下跌0.19美…

干货|来自新加坡管理大学、KAUST的大模型最新进展:推荐系统、未来AI社会研究……...

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; ChatGPT的横空出世刷新了我们对这个世界的认知和想象&#xff0c;而大型语言模型也逐渐成为学术界的研究热点。在自然语言处理、智能推荐、知识获取、智能对话等领域&#xff0c;大模型发挥着越来越重要的作用。…

自然语言处理从入门到应用——词向量的评价方法

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 对于不同的学习方法得到的词向量&#xff0c;通常可以根据其对词义相关性或者类比推理性的表达能力进行评价&#xff0c;这种方式属于内部任务评价方法&#xff08;Intrinsic Evaluation&#xff09;。在实际任务中&am…

Linux学习[15]bash学习深入1---bash的功能---变量详解

文章目录 前言&#xff1a;1. bash功能2. 变量2.1 变量赋值2.2 unset取消变量2.3 环境变量 总结 前言&#xff1a; 之前在学树莓派相关内容的时候&#xff0c;对bash脚本的简单上手做了一个总结&#xff0c;并且归纳到下面三个博客。 当时参考的书为《从树莓派开始玩转linux》…

Gitlab CI/CD入门(一)Python项目的CI演示

本文将介绍CI/CD的基本概念&#xff0c;以及如何使用Gitlab来实现CI/CD。   本文介绍的CI/CD项目为个人Gitlab项目&#xff1a;gitlab_ci_test&#xff0c;访问网址为&#xff1a;https://gitlab.com/jclian91/gitlab_ci_test。 CI/CD的含义 在现代软件工程中&#xff0c;CI…

【主跑例子】 Framework01、02;QFramework00(我跟着视频的旧版本,但推荐用最新的)、01(无)、02(无)、03(无)

总体介绍 做的是 00,10,13&#xff0c;考虑做10。 11,12没下载&#xff0c;当时把这两个误认为 00,10 用到了UniRx Framework有2个 00 Unity 游戏框架搭建 2019 第一季 C# 核心知识与简易 Manager Of Managers 框架搭建 120课数 01 Unity 游戏框架搭建 2019 第二季 模块/系统…

前端Vue仿滴滴打车百度地图定位查找附近出租车或门店信息(更新版)

前端vue仿滴滴打车百度地图定位查找附近出租车或门店信息, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id12982 效果图如下: # #### 使用方法 使用方法 <!-- 官方文档&#xff1a; https://dafrok.github.io/vue-baidu-map/#/zh/start/b…

五子棋:起源、原理与游戏规则、vue实现五子棋案例游戏

目录&#xff1a; 引言五子棋的历史背景五子棋的原理五子棋的游戏规则五子棋游戏的实现 5.1 创建 Vue 组件 5.2 初始化棋盘 5.3 下棋与判断胜负 5.4 渲染棋盘与棋子总结 更多知识 学习&#xff1a;https://www.processon.com/view/60504b5ff346fb348a93b4fa#map 引言 五子棋…

解密大型语言模型:从相关性中发现因果关系?

深度学习自然语言处理 原创作者&#xff1a;wkk 因果推理是人类智力的标志之一。因果关系NLP领域近年来引起了人们的极大兴趣&#xff0c;但其主要依赖于从常识知识中发现因果关系。本研究提出了一个基准数据集(CORR2CAUSE)来测试大语言模型(LLM)的纯因果推理能力。其中CORR2CA…

I/O体系结构和设备驱动程序(一)

I/O体系结构 让信息在CPU、RAM和I/O设备之间流动的数据通路称之为总线&#xff0c;即计算机内的主通信通道。所有计算机都有一条系统总线&#xff08;一种典型的系统总线是PCI总线&#xff09;&#xff0c;连接内部大部分的硬件设备。计算机内不同的总线可以通过“桥”进行连接…

lua语言的闭包设计和LClosure解读

什么是闭包 闭包是一种特殊的函数&#xff0c;它可以访问其创建时所处的环境中的变量&#xff0c;即使在函数创建后&#xff0c;环境已经不再存在&#xff0c;这些变量仍然可以被访问。 为了更好地理解闭包&#xff0c;我们可以看一个例子&#xff1a; function counter()lo…

Appium知多少

Appium我想大家都不陌生&#xff0c;这是主流的移动自动化工具&#xff0c;但你对它真的了解么&#xff1f;为什么很多同学搭建环境时碰到各种问题也而不知该如何解决。 appium为什么英语词典查不到中文含义&#xff1f; appium是一个合成词&#xff0c;分别取自“applicatio…

OpenAI官方提示词课(七)制作一个聊天机器人

大型语言模型的一个令人兴奋的方面是&#xff0c;你可以利用它来构建一个定制的聊天机器人&#xff0c;并且只需付出少量的努力。ChatGPT 的网页界面可以让你与一个大型语言模型进行对话。但其中一个很酷的功能是&#xff0c;你也可以利用大型语言模型构建你自己的定制聊天机器…

案例 | 标杆引领!人大金仓智绘数字金融

随着中央数字经济政策推进金融业数字化建设&#xff0c;数字金融已初见成效&#xff0c;但尚存在信息安全缺乏保障、转型覆盖不全面等问题。 为实现金融行业全面数字化转型升级&#xff0c;作为数据库领域国家队&#xff0c;人大金仓紧跟国家战略&#xff0c;自主研发的系列数据…

msvcp110.dll丢失原因——msvcp110.dll丢失怎么修复(最新可修复)

昨天卸载了一个垃圾软件以后&#xff0c;我的其他软件就无法打开运行&#xff0c;提示msvcp110.dll丢失&#xff0c;无法继续执行此代码。今天早上找了很多方法&#xff0c;终于把msvcp110.dll丢失的原因以及修复的方法都弄明白了。msvcp110.dll是一个非常重要的文件&#xff0…