【谷粒学院项目开发38】添加课程基本信息（前端）_富文本编辑器

最新推荐文章于 2024-05-31 15:59:46 发布
最新推荐文章于 2024-05-31 15:59:46 发布
阅读量320 收藏
点赞数
分类专栏： 谷粒学院项目开发学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taroriceball/article/details/111220637
版权
本文档详细介绍了如何在谷粒学院项目中集成和使用富文本编辑器，包括将编辑器组件复制到项目、配置HTML变量、引入JS脚本、在页面上应用编辑器、添加样式以及进行测试的步骤。
摘要由CSDN通过智能技术生成

1.把文本编辑器组件复制到项目里面

在这里插入图片描述
在这里插入图片描述

2.配置html变量

在这里插入图片描述

3.引入js脚本

在这里插入图片描述

4.页面使用文本编辑器组件

在这里插入图片描述
在这里插入图片描述
可以使用文本编辑器标签啦
在这里插入图片描述

5.添加样式

最低0.47元/天 解锁文章
taroriceball
关注
专栏目录
Taro React组件开发（2） —— RuiEditor 富文本编辑器【兼容H5和微信小程序】
止于至善
12-27 1702
在react中是关键字，不能使用，只能用替代；添加允许子节点修改或复制；contenteditable 获得焦点后的边框设置 {outline: 0px solid transparent;}；此处只是实现了一个简单的富文本编辑器，其他功能可以根据此基础添加，比如字号，颜色，背景色等。
【谷粒学院项目开发34】添加课程基本信息（前端）_基本的页面跳转
taroriceball的博客
12-15 403
1.添加课程管理路由 2.创建与课程相关的vue页面，修改路由 3.添加隐藏路由，做页面跳转 4.粗略编写info.vue 效果： 5.粗略编写chapter.vue 效果： 6.粗略编写publish.vue 效果： 7.详细编写info.vue <template> <div class="app-container"> <h2 style="text-align: center;">发布新课程</h2>
【谷粒学院项目开发33】添加课程基本信息（后端）
taroriceball的博客
12-14 221
表的关系： 把老师的图搬运过来???? 1.使用代码生成器生成与课程相关的代码 执行代码生成器，生成了代码。 把下图标红的文件删除： 2.创建vo类封装表单提交的数据 3.controller 4.service 5.测试 课程简介表里有了 课程表也有了 有个问题：课程和描述是一对一的，添加新数据后，id值应该是一样的 解决：设置获取的描述id和课程相同 修改实体类id生成策略 最终效果： id值一致了 (●’◡’●) ...
Day207&208.富文本编辑器、课程大纲列表、课程修改、课程章节添加修改、课程小节CRUD、课程最终发布 -谷粒学院
阿昌爱Java
03-01 6770
谷粒学院 富文本编辑器Tinymce 一、Tinymce可视化编辑器 参考：https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤 1、复制脚本库 将脚本库复制到项目的static目录下（在vue-element-admin-master的static路径下） 2、配置html变量 在 guli-admin/build/
Taro（React）使用富文本编辑器Editor
最新发布
宝子的博客
05-31 607
在写项目的过程中很容易涉及到让使用者，输入一些介绍或者文本等相关功能， 前端在拿到这些文本时是需要直接渲染的，如果不使用富文本编辑器，这个时候得到的文章是没有格式的，这对于使用者来说体验非常的不好，这个时候就需要使用富文本编辑器，获取到带有标签的文本。我在使用Taro写小程序的时候，有让用户编辑自我介绍的功能，这个时候就需要使用到富文本获取到带有标签的文本。还有更多的功能，大家可以自行查看。
【谷粒学院项目开发36】添加课程基本信息（前端）_显示课程的两级分类
taroriceball的博客
12-15 238
先显示出所有一级分类课程 后端方法之前已经编写过啦！ 1.api 之前已经编写过了 2.在info.vue中引入api 3.调用方法 4.查看效果 再显示出二级分类课程 查看效果：
谷粒学院 2020版本 课程版本 后台管理前端页面
02-07
【标题】"谷粒学院 2020版本 课程版本 后台管理前端页面" 涉及的知识点主要集中在Vue.js框架的2.0版本以及后台管理系统的前端实现。Vue.js是目前非常流行的一款渐进式JavaScript框架，特别适合构建用户界面，尤其在...
谷粒学院项目的数据库文件
10-31
【标题】"谷粒学院项目的数据库文件"涵盖了与谷粒学院相关的数据库设计和管理方面的知识。谷粒学院可能是一个在线教育平台，其数据库是存储用户信息、课程资料、学习进度等核心数据的关键部分。数据库文件通常包含...
Taro转微信小程序展示富文本
weixin_44570977的博客
04-28 854
微信小程序虽然说已经支持展示富文本，但是还是有其自身的局限性，比如说不能够展示音频视频，不能够点击图片实现图片浏览，等等,所以说小程序自身富文本并不完美。 目前通过第三方插件wxParser可以更好的实现富文本展示，但是wxParser依旧有其自身的局限性，比 如插件编译后还是稍大，对于微信小程序单包限制在2M来说实在要命，要是自身小程序体积过大，再加个wxParser，毫无疑问提示包过大，不允...
taro-form:Taro可视化表单编辑器
05-07
Taro表单编辑器 基于Taro3和react-dnd组件开发的表单编辑器，将支持多个平台（小程序、h5、app）目前仍在开发中，因接口限制，编辑模式仅支持在h5端。 预览版 当前版本任处于开发阶段，可能存在api改版或者bug修复导致的不兼容问题，请谨慎用于项目中。 在线预览 表单预览： 编辑模式： 截图 TaroForm交流群 qq群：816711392 使用 h5端： 将代码克隆到本地，执行 yarn 或者 npm install ，安装依赖，然后执行 yarn dev:h5 或者 npm run dev:h5 启动h5版本，跳转到main/edit/index页面即可进入编辑模式 小程序端： 将代码克隆到本地，执行 yarn 或者 npm install ，安装依赖，然后执行 yarn dev:weapp 或者 npm run dev:weapp 启动微信小程序版本，微信小程序仅支
谷粒学院相关项目资料
04-21
包含1 测试视频 2 代码生成器 3 前端相关资源 4 数据库脚本 5 docker脚本五个内容
谷粒学院第五天
m0_52462015的博客
08-24 363
谷粒学院第五天 一、后台系统登录功能改造 把登录的请求接口换成我们自己的接口地址。注意跨域问题。 Contorller 代码： @CrossOrigin @RestController @RequestMapping("/eduService/user") public class EduLoginController { @PostMapping("/login") public Result login() { Map<String, Object>
谷粒学院——第八章、课程管理
ZMMMOO的博客
01-04 446
Tinymce是一个传统 JavaScript 插件，默认不能用于 Vue.js 因此需要做一些特殊的整合步骤。 1、组件初始化 （1）复制脚本库 ● src/components 目录添加：Tinymce ● static 目录添加：tinymce4.7.5
Taro使用 微信小程序 副文本编辑器
fth1002853070的博客
10-27 1870
Taro把一些小程序的原生组件给抽成了插件包括但不限于： editor/page-container，所以直接在代码中写的话是不会被渲染出来的，得经过下面的操作才可以。
谷粒学院项目笔记8——课程管理模块
加贝要加倍努力的博客
12-15 488
尚硅谷谷粒学院项目第八天内容之添加课程基本信息、整合文本编辑器、课程大纲管理（课程大纲列表显示、章节信息增删改、小节信息增删改）、课程信息确认（将课程信息添加到数据库）
谷粒学院使用富文本编辑器出现 Uncaught SyntaxError: Unexpected token ‘＜‘ 错误
qlyyyi的博客
04-13 521
使用富文本编辑器出现 Uncaught SyntaxError: Unexpected token ‘＜‘ 错误
Taro支持富文本（微信小程序）完美解决
前端开发一枚
11-26 2005
需求：先说下需求，就是我们需要做活动页面，活动页面有个规则，规则的内容由B端后台配置海报页。页面如下 实现： 需要用到dangerouslySetInnerHTML属性即可，这个属性相比于其他方案的优势在于：1. 支持修改富文本样式 2. Taro官方属性，比插件靠谱 核心代码：index.tsx // 修改图片行内默认样式 (Taro as any).options.html.transformElement = (el) => { if (el.nodeName ..
谷粒学院在线教育项目
weixin_44348734的博客
07-18 739
前后端分离概念讲师管理模块创建父模块管理依赖版本和放公共依赖findAll返回的json时间格式需要在yml文件设置json格式和时区使用对象存储->管理控制台->创建bucket(相当于包或文件夹)->java代码上传文件到阿里云OSS准备工作创建操作阿里云oss许可证（阿里云颁发id和秘钥）Accesskey->创建Accesskey开发文档->快速入门。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值