Tinymce编辑器背景色的修改 vue

最新推荐文章于 2024-04-27 03:30:30 发布
最新推荐文章于 2024-04-27 03:30:30 发布
阅读量2.2k 收藏 4
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45339338/article/details/116940985
版权
本文记录了在Vue项目中如何修改Tinymce编辑器的背景色。在尝试了修改组件样式、使用/deep/、!important等方法无效后，最终通过在tinymce.init配置中添加content_style参数并指定自定义CSS文件实现了背景色的更改。这是一个经过不懈努力和查找资料后解决的问题，分享出来希望对遇到同样问题的开发者有所帮助。
摘要由CSDN通过智能技术生成

第一次写记录，但这个我觉得必须记录一下，说不定也有小伙伴会需要
应设计师的要求，需要我们对引用的编辑器的编辑区背景色进行修改

设计师要求的修改：
在这里插入图片描述

而我们引入的tinymce编辑器是这样子的：
在这里插入图片描述
所以需要对编辑区域的背景色进行修改，但是呢，因为我们的项目引入tinymce是直接把文件夹复制到components里面去，F12找到了可以修改到背景色的地方，是在这里的：
在这里插入图片描述
找了之后才知道css样式是通过cdn引入，于是想到了深入样式 >>>、/deep/、!important，在组件index.vue，在使用到该组件的页面统统试过，无一有效，完全没有反应，于是上网搜索，找了一个在tinymce的index.vue文件里面的配置tinymce.init里面加content_css:‘content.css’,可以是自定义的css文件，但是！系统找不到这个自定义的文件，使用不了样式。后来又在查看了好几种方法，函数什么的也试过，但就是没！有࿰

最低0.47元/天 解锁文章
weixin_45339338
关注
Tinymce源码-颜色选择器样式、交互改造
weixin_43402720的博客
03-07 1195
tinymce颜色选择器源码修改
django使用富文本编辑器 tinymce
kongzhongloucsdn的博客
04-16 1387
django使用富文本编辑器 tinymce
tinymce外部按钮进行工具栏更换背景颜色设置
weixin_51263829的博客
09-12 527
【代码】tinymce外部按钮进行工具栏更换背景颜色设置。
Tinymce富文本修改工具栏、编辑区域背景
m0_61449795的博客
11-22 748
编辑器背景颜色可以通过：content_style 修改。
tinyMCE编辑器加入字体大小、背景颜色的简单方法
vipaiou的专栏
04-21 2653
在joomla\drupal下，最好用的编辑器是tinyMCE编辑器，但是默认按钮里没有font-size这个项目，很令新手头疼，不知怎么添加，今天意外发现了一个在joomla下的简单方法。 在plugins/editers/tinymec.php里，有这么一小段： [code="java"]theme_advanced_buttons1_add : \"fontselect\",[/code...
vue + vue-tinymce 富文本编辑器
护着我的发际线的博客
12-02 795
第一步：npm npm install tinymce -S npm install @tinymce/tinymce-vue -S 第二步：把node_modules中的tinymce复制到static中。 第三步：mian.js // 富文本编辑器 import tinymce from 'tinymce' import VueTinymce from '@packy-tang/vue-tinymce' //样式 import 'tinymce/skins/ui/oxide/ski...
【tinymce使用, 只读模式设置】
weixin_46202069的博客
11-03 3560
tinymce使用, 只读模式设置。
vue中引入TinyMCE实现富文本编辑器
小球的博客
02-28 3554
vue tinymce 富文本编辑器
富文本编辑器TinyMCE | tinymce在Vue中的使用
09-27 2962
一、说明 tinymce 官方为 vue 项目提供了一个组件 tinymce-vue，但是需要购买 tinymce 的服务。所以只能自己配置 二、使用步骤 1、下载组件 npm install tinymce -S 2、提取文件 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 arc/asset...
html编辑器《TinyMCE 在线编辑器》
02-16
一款非常好用的TinyMCE 在线编辑器
vue中使用tinymce，富文本编辑器组件封装。_tinymce-all-in-one@4
最新发布
2401_84446513的博客
04-27 940
,},},},},methods: {init() {// 引用tinymceCDN,并调用初始化Tinymce方法if (err) {this.}̲this.i…{this.tinymceId}`, //容器，可使用css选择器object_resizing: false, // 是否禁用表格图片大小调整。
vue-element-admin 项目 tinymce 相关配置
Irene1991的博客
04-29 1700
vue-element-admin 项目 tinymce 相关配置
vue中使用tinymce富文本编辑器，插入图片
陌桑楚客
09-29 2577
1.安装 # npm install tinymce -S 2.把node_modules\tinymce里面的文件 包括tinymce文件夹 全部复制到static文件夹下面 3.在mian.js中引入tinymce（也可以在组件中引入） import Tinymce from 'tinymce' Vue.prototype.$tinymce = Tinymce; 4.完整代码 <template> <div class="SEditor"> ...
TinyMCE富文本更改默认文字颜色、字号、字体
热门推荐
王红珠的博客
05-09 1万+
TinyMCE富文本更改默认文字颜色、字号、字体 一、content_style（直接为编辑区编写css） 在此选项内编写的css将直接注入到编辑器创建的iframe内部（在head内创建style），其创建的样式不会与内容一起被提交，可以放心使用。 tinymce.init({ selector: '#textarea1', content_style: "div {font-size:24px; color: #843FA1; font-famliy: impact,chicago;}"
Tinymce - 菜单项 / 工具栏配置参考表格
王佳斌
12-13 5335
配置项所属插件描述newdocument核心创建新文档bold核心加粗italic核心斜体underline核心下划线strikethrough核心删除线alignleft核心居左aligncenter核心居中alignright核心居右alignjustify核心两端对齐alignnone核心清除styleselect核心格式选择下拉框(缩进、行高)formatselect核心段落选择下拉框(段落、标题)fontselect核心字体选择下拉框fontsizeselect核心字号选择下拉框cut核心剪切c.
tinymce自动实现斑马纹表格
leo_shire的博客
03-12 996
快速实现方法包括： 1、使用table插件自带配置属性table_row_class_list自定义行属性类型 tinymce.init({ selector: '#tinydemo', plugins: "table", toolbar: "table", table_class_list: [ {title: 'None', value: ''}, {title: '表头', value: 'table_header'},
CSDN默认编辑器（markdown）——文字颜色、大小、字体与背景色的设置
weixin_39568041的博客
10-13 1657
CSDN默认编辑器（markdown）——文字颜色、大小、字体与背景色的设置  CSDN的markdown编辑器是其衍生版本，扩展了Markdown的功能（如表格、脚注、内嵌HTML等等）就是内嵌HTML，接下来要讲的功能就需要使用内嵌HTML的方法来实现。 一、颜色 在markdown中采用如下方式能够控制...
vue中TinyMCE编辑器的使用
Amanda_wmy的博客
03-14 8426
vue中TinyMCE编辑器的使用 TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器。富文本编辑器 UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲 bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery… 所以项目中用到的是TinyMCE，可前后端分离。 可购买 tiny...
vue3使用tinymce编辑器
01-26
以下是在Vue3中使用TinyMCE编辑器的步骤： 1. 首先，安装相关依赖。在终端中运行以下命令： ```shell npm install tinymce -S npm install @tinymce/tinymce-vue -S ``` 2. 下载中文包。你可以在TinyMCE官方网站上获取中文包，下载地址为：https://www.tiny.cloud/get-tiny/language-packages/ 3. 引入皮肤和汉化包。在你的Vue组件中，按照以下方式引入TinyMCE编辑器： ```javascript <template> <div> <tinymce-vue v-model="content" :init="{ language: 'zh_CN', skin: 'oxide-dark', plugins: 'link image code', toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code' }" /> </div> </template> <script> import { Editor } from '@tinymce/tinymce-vue'; export default { components: { 'tinymce-vue': Editor, }, data() { return { content: '', }; }, }; </script> ``` 在上述代码中，我们使用了`tinymce-vue`组件，并将其绑定到`content`属性上。通过`v-model`指令，我们可以实现双向数据绑定。 在`init`属性中，我们可以配置TinyMCE编辑器的各种选项，例如语言、皮肤、插件和工具栏按钮等。 这样，你就可以在Vue3中使用TinyMCE编辑器了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值