基于vue2整合tinymce富文本编辑器

news2024/11/25 7:06:58

文章目录

    • 1.导入依赖
    • 2.全部代码
    • 3.实际效果

1.导入依赖

npm install tinymce -S

npm install @tinymce/tinymce-vue -S

2.全部代码

<template>
        <editor
                :key="tinymceFlag"
                ref="editor"
                v-model="content"
                :init="tinymceInit"
        ></editor>

</template>

<script>
    import Editor from '@tinymce/tinymce-vue'
    export default {
        name: "index",
        data() {
            return {
                tinymceFlag: '',
                content: '',

            }
        },
        methods: {
        //配置参数,不全,可以自己上网上补全
            tinymceInit() {
                this.tinymceInit = {
                    //language_url: "../../public/static/tinymce/langs/zh-Hans.js",
                    language: 'zh-CN',
                    skin_url: "/static/tinymce/skin/ui/oxide" ,
                    height: 400,
                    theme: 'silver',
                    browser_spellcheck: true,
                    branding: true,
                    statusbar: true,
                    font_size_formats: '12px 13px 14px 15px 16px 20px 30px',
                    plugin: 'print preview searchreplace autolink directionality visualblocks',
                    toolbar: 'formatselect | bold italic forecolor backcolor fontsizeselect | link',
                    paste_webkit_styles:true,
                    paste_data_images: false,
                    images_upload_url: '/api/file/tinymce/uploads',
                    contextmenu: `inserttable | cell row column deletetable`,
                    relative_urls: false,
                    remove_script_host:false

                }
                this.tinymceFlag++
            }
        },
        components: {
            Editor
        }
    }



</script>

<style scoped>

</style>

3.实际效果

在这里插入图片描述

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

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

相关文章

国内使用ChatGPT的方式汇总

最近ChatGPT大火呀&#xff0c;小伙伴们是不是在网上看到各种和ChatGPT有趣聊天的截图&#xff0c;奈何自己实力不够&#xff0c;被网络拒之门外&#xff0c;只能眼馋别人的东西。看别人玩&#xff0c;肯定不如自己玩一把舒服的啊。今天小卷就给大家汇总了国内能使用ChatGPT的方…

【C/C++ 数据结构】-就这一篇博客让你玩爆二叉树的各种遍历问题!!!

作者&#xff1a;学Java的冬瓜 冬瓜的主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【C/C 数据结构与算法】 分享&#xff1a;被苦难淬炼过的人&#xff0c;内心真诚。——都靓评宋濂 主要内容&#xff1a;二叉树的递归前序遍历、中序遍历、后序遍历、层序遍历。…

你还会想起这道题吗(another version)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 众所周知&#xff0c;原神是由米哈游自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想世界&#xff0c;在这里&#xff0c;被神选中的人将被授予「神之眼…

“价格+产品+服务”:京东手机开启“复合竞赛”

市场唯一不变的就是变化&#xff0c;那些最终生存下来的企业往往是最能适应变化的。 11月份&#xff0c;京东再次强调“低价”策略的重要性&#xff0c;背后无疑是其对消费环境变化做出的及时反应。“消费者对价格更为敏感&#xff0c;对高性价比商品的需求依旧是主流”&#…

YOLO-V5 算法和代码解析系列 —— 学习路线规划综述

目录标题为什么学习 YOLO-V5 &#xff1f;博客文章列表面向对象开源项目学习方法预备知识项目目录结构为什么学习 YOLO-V5 &#xff1f; 算法性能&#xff1a;与YOLO系列&#xff08;V1&#xff0c;V2&#xff0c;V3&#xff0c;V4&#xff09;相比&#xff0c;YOLO-V5效果最好…

【花雕动手做】有趣好玩的音乐可视化系列项目(33)---核酸托盘灯

偶然心血来潮&#xff0c;想要做一个音乐可视化的系列专题。这个专题的难度有点高&#xff0c;涉及面也比较广泛&#xff0c;相关的FFT和FHT等算法也相当复杂&#xff0c;不过还是打算从最简单的开始&#xff0c;实际动手做做试验&#xff0c;耐心尝试一下各种方案&#xff0c;…

RosonQt140——Qt Charts模块介绍和Qt绘制图表

Qt图表概述 Qt Charts能够创建时尚、互动、以数据为中心的用户界面。Qt Charts使用图形视图框架&#xff0c;便于集成。图表组件可以作为QWidget或QGraphicsWidget对象或QML类型使用。 QChart类管理不同类型的系列和其他图表相关对象的图形表示&#xff0c;如图例和坐标轴。QC…

33-Vue之ECharts高级-设置主题

ECharts高级-设置主题前言内置主题自定义主题前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart echarts.init(dom, light) var chart echarts.init(dom, dark)<!DOCTYPE html> <html lang"en&quo…

前缀树介绍,定义,图文详解分析——Java/Kotlin双版本代码

前缀树 前缀树&#xff0c;又称作字典树&#xff0c;用一个树状的数据结构储存字典中的所有单词。 列&#xff0c;一个包含can、cat、come、do、i、in、inn的前缀树如下图所示&#xff1a; 前缀树是一个多叉树&#xff0c;一个节点可能存在多个节点。除根节点外&#xff0c;每…

Spring5框架总结学习(从入门到进阶)

文章目录Spring51、如何创建一个Spring项目&#xff08;idea版&#xff09;2、 IOC容器1、XML解析工厂模式反射2、bean管理1、总述2、基于XML创建对象3、基于XML注入属性4、基于XML注入属性&#xff0c;属性值为空或特殊符号5、基于XML注入属性&#xff0c;外部bean6、基于XML注…

【第十二章 MVCC(多版本并发控制),隐藏字段,undolog(版本链),readview,原理分析(RC,RR)】

第十二章 MVCC&#xff08;多版本并发控制&#xff09;&#xff0c;隐藏字段&#xff0c;undolog&#xff08;版本链&#xff09;&#xff0c;readview&#xff0c;原理分析&#xff08;RC&#xff0c;RR&#xff09; 1.基本概念: &#xff08;1&#xff09; 当前读&#xff1…

hevc 基于均值的RDO模式删减

1 在获得粗略模式候选列表L4之后&#xff0c;对尺寸为4x4和8x8的PU保留8种预测模式&#xff0c; 对尺寸16x16&#xff0c;32x32, 64x64的PU保留3种预测模式&#xff0c;如果可以跳过部分模式的RDO计算&#xff0c;则可以进一步减少编码时间。 2 由于HCost计算是RDO计算的一种较…

springBoot+Cache(自定义有效时间配置)

一、背景 sprinbBoot的cache是不是支持动态设置缓存注解的&#xff0c;因此本次自己实现一个可以动态设置缓存时间的配置。 源码&#xff1a;示例地址 二、步骤 1、pom.xml添加依赖配置 <dependency><groupId>org.springframework.boot</groupId><arti…

Linux系统编程(续)

静态库制作及使用步骤&#xff1a; 1.将.c生成.o文件 gcc -c add.c -o add.o 2.使用ar工具制作静态库 ar rcs lib自定义库名.a 后面需要的.c文件 3.编译静态库到可执行文件中 gcc test.c 自制的库.a -o test 注意:如果程序中没有函数声明&#xff0c;编译器会自动给个隐式声明…

Java+MySQL基于SSM的在线投票系统

随着社会的发展,人们在处理一些问题的时候不同意见越来越多,这源于人们对思想的解放和对社会的认识。所以在处理同一问题上,为了征求不同人的意见在线投票系统诞生了。 基于SSM的在线投票系统以钦州学院为背景,运用在校所学习的软件开发原理,采用Spring&#xff1a;SpringMVC&a…

如何在网页画一个旋转的粉色圣诞树(含源代码)

0 效果 做法&#xff1a; 创建三个文件tree.html、tree.js、tree.css&#xff0c;放在同一个目录下按1、2、3小节填充这三个文件浏览器打开tree.html文件 1 .HTML-基本布局 搞一个.html文件&#xff0c;内容如下 <!DOCTYPE html> <html lang"en"><…

【OpenCV-Python】教程:7-1 理解 kNN (k-Nearest Neighbour)

OpenCV Python 理解kNN &#xff08;k-Nearest Neighbour&#xff09; 【目标】 理解 kNN 算法的基本概念 【理论】 kNN是监督学习中最简单的分类算法之一。其思想是在特征空间中搜索与测试数据最接近的匹配。我们将用下图来研究它。 在图像中&#xff0c;有两个"家族…

一文看懂 InnoDB 的内存淘汰逻辑(LRU)

InnoDB淘汰的逻辑是怎样的呢&#xff1f; InnoDB 内存管理用的是最近最少使用 (Least Recently Used, LRU) 算法&#xff0c;这个算法的核心就是淘汰最久未使用的数据。 下图是一个 LRU 算法的基本模型。 InnoDB 管理 Buffer Pool 的 LRU 算法&#xff0c;是用链表来实现的。…

Go项目实战:02-微服务micro services

1、微服务&#xff08;micro services&#xff09; 单体式架构服务 过往大家熟悉的服务器。 特性&#xff1a; 1、复杂性随着开发越来越高&#xff0c;遇到问题解决困难。2、技术债务逐渐上升。3、耦合度高&#xff0c;维护成本大。 - 1、出现bug&#xff0c;不容易排查 - 2…

[ 数据结构 -- 手撕排序算法第六篇 ] 快速排序

文章目录前言一、常见的排序算法二、快速排序的基本思想三、快速排序的不同实现1.hoare版本2. 挖坑法3. 前后指针法4.三种版本单趟排序结果5.快速排序三数取中优化6.小区间优化四、快速排序的特性总结前言 手撕排序算法第六篇&#xff1a;快速排序&#xff01; 从本篇文章开始…