Tinymce编辑器背景色的修改 vue

最新推荐文章于 2023-11-22 17:21:13 发布
最新推荐文章于 2023-11-22 17:21:13 发布
阅读量2.1k 收藏 4
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45339338/article/details/116940985
版权

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

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

而我们引入的tinymce编辑器是这样子的：
在这里插入图片描述
所以需要对编辑区域的背景色进行修改，但是呢，因为我们的项目引入tinymce是直接把文件夹复制到components里面去，F12找到了可以修改到背景色的地方，是在这里的：
在这里插入图片描述
找了之后才知道css样式是通过cdn引入，于是想到了深入样式 >>>、/deep/、!important，在组件index.vue，在使

最低0.47元/天 解锁文章
weixin_45339338
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tinymce源码-颜色选择器样式、交互改造
weixin_43402720的博客
03-07 1093
tinymce颜色选择器源码修改
tinymce外部按钮进行工具栏更换背景颜色设置
weixin_51263829的博客
09-12 462
【代码】tinymce外部按钮进行工具栏更换背景颜色设置。
tinyMCE编辑器加入字体大小、背景颜色的简单方法
vipaiou的专栏
04-21 2607
在joomla\drupal下，最好用的编辑器是tinyMCE编辑器，但是默认按钮里没有font-size这个项目，很令新手头疼，不知怎么添加，今天意外发现了一个在joomla下的简单方法。 在plugins/editers/tinymec.php里，有这么一小段： [code="java"]theme_advanced_buttons1_add : \"fontselect\",[/code...
Tinymce富文本修改工具栏、编辑区域背景
m0_61449795的博客
11-22 560
编辑器背景颜色可以通过：content_style 修改。
vue中使用tinymce富文本编辑器，插入图片
陌桑楚客
09-29 2526
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;}"
vue-tinymce-editor Vue2的Tinymce编辑器组件。-Vue.js开发
05-27
可以在此页面中查看演示和示例：演示和示例安装$ npm install vue-tinymce-editor如何使用从'vue'导入import Vue从'vue-tinymce-editor'导入tinymce Vue.component（'tinymce'， tinymce）您可以在标记中使用该组件 ...
在vue3项目中使用tinymce编辑器
01-22
在Vue3项目中集成TinyMCE编辑器是一个常见的需求，特别是在构建富文本编辑功能时。TinyMCE是一款功能强大的开源富文本编辑器，它提供了丰富的API和插件，可以定制化满足各种复杂的编辑需求。本篇文章将详细讲解如何...
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue项目中使用tinymce编辑器的步骤详解
01-19
Tinymce富文本也是一款很流行编辑器  把文件放在static下，然后在index.html文件中引入这个文件 [removed][removed] <tinymce height=200 ref=editor v-model=editForm.fdcNote></tinymce>  在其他子文件中引入...
html编辑器《TinyMCE 在线编辑器》
02-16
一款非常好用的TinyMCE 在线编辑器
tinymce asp.net 配置demo
10-19
详情：http://blog.csdn.net/spritenet/article/details/8085378 这个编辑器是我中午翻资料偶然看见的，既然有些人对他评价还可以，因此我就拿来试了试 网上的一些资料基本上都停留在2011年，而且是这个抄这个，这个抄那个，真正有用的并不多，在此我参考了以下几位同学的博客，再次谢谢各位 http://blog.csdn.net/chenloveyue/article/details/7039913 http://blog.csdn.net/salc3k/article/details/5341593 http://hi.baidu.com/honfei/item/267e3dd128d934866dce3fbe http://www.hnonl.com/jonllen/article/66.aspx?display=2 我用的版本是tinymce_3_0_8 官网上有最近版本的，但是木有汉化，而且也没找到相应的说明文档 总体说来这个Tinymce和KindEditor 配置使用起来都比较简单，而且Tinymce还提供两种定义好的模式，一个是专业版,就是所有功能都有的，一种是精简版，只有6.7个功能，当然Tinymce最大的优势在于可以很方便的调整控件，通过plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",就可以很轻松的控制要显示的功能 说说目前发现的缺点： 1.没有图片上传功能 2.没有图文混排 3.css的定义太多 4.最要命的是我居然发现没有设置字体颜色和背景颜色的控件，这让我很纳闷 图片如下： 详情：http://blog.csdn.net/spritenet/article/details/8085378
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
vue 实现自定义主题切换+日夜切换
qq_43223007的博客
10-27 4382
自定义主题切换、日夜切换、一键换肤（无需加载多套css）案例+思路+代码
【vue】 vue2 中使用 Tinymce 富文本编辑器
热门推荐
amoureux555的博客
04-12 1万+
【vue】 vue2 中使用 Tinymce 富文本编辑器
CSDN默认编辑器（markdown）——文字颜色、大小、字体与背景色的设置
weixin_39568041的博客
10-13 1628
CSDN默认编辑器（markdown）——文字颜色、大小、字体与背景色的设置  CSDN的markdown编辑器是其衍生版本，扩展了Markdown的功能（如表格、脚注、内嵌HTML等等）就是内嵌HTML，接下来要讲的功能就需要使用内嵌HTML的方法来实现。 一、颜色 在markdown中采用如下方式能够控制...
vue中TinyMCE编辑器的使用
Amanda_wmy的博客
03-14 8376
vue中TinyMCE编辑器的使用 TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器。富文本编辑器 UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲 bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery… 所以项目中用到的是TinyMCE，可前后端分离。 可购买 tiny...
tinyMCE 5富文本编辑器学习使用（Vue-cli3中使用）
charming的博客
03-15 1063
背景 最近公司有一个需求，在一个div里面输入文字，而且还要支持富文本，大概就是要实现下面这个样子 （图片从QuickBi截的，类似的需求） 这一看我没头绪，不过发现策划跟我讲是抄QuickBi的，ok，那就去看看QuickBi。 审查元素，然后看到类名是有明显特征的： 百度一下这个类名，基本上就知道这个是用了TinyMCE这个富文本库了。 ok，开始研究这个编辑器 最简demo 搜索tiny...
Vue 设置背景图片样式
乐之终曲
04-07 5859
Vue 设置背景图片样式CSS效果图 CSS <style> body{ background-image: url('./bg.jpg'); background-size: cover; background-position: center; font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',s...
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编辑器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值