0.8、VUE-VUE 富文本插件 tinymce_tinymce的批注-程序员宅基地
安装
安装是项目纬度的，安装完之后可以在 node_module 文件夹看到
vue -V 查看 Vue 版本
如果你是2.x的话
npm install [email protected] -S
npm install @tinymce/[email protected] -S
如果是3.x
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
skins 文件
将 node_modules/tinymce下的skins 文件夹copy到public
如果你的项目没有 public 则
node_modules/tinymce下的skins 文件夹copy到 static/tinymce
中文语言包
https://www.tiny.cloud/get-tiny/language-packages/
放到 static/tinymce
生成 单文本文件
俩问题
-
‘tinymce/themes/modern/theme’
报错换为
‘tinymce/themes/silver/theme’ -
skin_url: ‘./static/tinymce/skins/lightgray’
报错换为
skin_url: ‘./static/tinymce/skins/ui/oxide’
模板
<template>
<div class="tinymce">
<editor id="tinymce" v-model="tinymceHtml" :init="init" />
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/print'
import 'tinymce/plugins/autoresize'
export default {
name: 'Tinymce',
components: {
Editor },
props: {
value: {
type: String,
default: ''
}},
data() {
return {
tinymceHtml: this.value,
init: {
language_url: './static/tinymce/zh_CN.js', // 引入语言包路径 重要！！
language: 'zh_CN',
skin_url: './static/tinymce/skins/ui/oxide', // 引入皮肤路径 重要！！
height: 435, // 设置高度 其实可以设置成props传值的，我这边只需要用到一次，所以给了固定高度
autoresize_bottom_margin: 10,
autoresize_max_height: 435, // 编辑区域的最大高
autoresize_min_height: 435, // 编辑区域的最小高度
//autoresize_on_init: true,
autoresize_overflow_padding: 10,
end_container_on_empty_block: true,
// 插件列表可自定义
plugins: 'print link lists image code table wordcount',
// 工具栏列表
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent blockquote | undo redo | code removeformat print',
branding: false // 隐藏水印
}
}
},
watch: {
value(newValue) {
this.tinymceHtml = newValue
},
myValue(newValue) {
this.$emit('input', newValue)
}
},
mounted() {
tinymce.init({
})
}
}
</script>
效果
参考
[1]、https://blog.csdn.net/jwj1111111/article/details/119185929
[2]、https://blog.csdn.net/wei_wenlong/article/details/102973286
[3]、http://tinymce.ax-z.cn/
智能推荐
rtc-sfu_rtc sfu-程序员宅基地
文章浏览阅读581次。SFU 的全称是：Selective Forwarding Unit，是一种通过服务器来路由和转发 WebRTC 客户端音视频数据流的方法。如图所示，SFU 服务器最核心的特点是把自己 “伪装” 成了一个 WebRTC 的 Peer 客户端，WebRTC 的其他客户端其实并不知道自己通过 P2P 连接过去的是一台真实的客户端还是一台服务器，我们通常把这种连接称之为 P2S，即：Peer to Server。_rtc sfu
粒子群算法matlab代码（注释很详细哦，图像也美美哒，任意维度）_多种群并行粒子群算法matlab-程序员宅基地
文章浏览阅读4w次，点赞564次，收藏1.1k次。整个程序分为5个脚本pso1_mian.m：主程序，在此脚本内设置参数。pso1_im.m：画出函数图像（仅1维和2维）pso1_in.m:初始化pso1_in2.m:迭代寻优并输出结果另外还有一个目标函数，单独为一个脚本。推荐的测试函数—>这里先上运行结果图下面是源码1.pso1_mian.m这里的目标函数用函数句柄的形式调用（第15行）%% 粒子群算法%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% pso1_im_多种群并行粒子群算法matlab
使用 Python 的铅笔素描图像-程序员宅基地
文章浏览阅读1k次。图片在 Python 中表示为一组数字。所以我们可以进行各种矩阵操作来得到令人兴奋的结果。在本教程中，将向你展示如何只用几行代码创建“铅笔”草图图像。这个过程非常简单：灰度图像反转颜色模糊倒置图像将减淡混合应用于模糊和灰度图像我们可以为此选择任何我们想要的图像。将演示如何创建可以应用于任何图像、视频或实时流的对象。导入库OpenCV 和 Numpy 是项目所需的唯一库。我们使用以下两行代码导入它们..._mac怎样用python画素描版本的图
php laravel实战项目,Laravel框架应用：7个实战项目-程序员宅基地
文章浏览阅读1.4k次。很多PHP开发者在进行项目开发的时候，第一时间就会想到Laravel，如果你也正想学习这个优雅简洁的Laravel框架，不妨可以从以下8个教程入手，从基础到实战项目都包含了。Laravel框架简介：Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来，帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。..._laravel项目实例
consider using the '--user' option or check the permissions错误_consider using the `--user` option or check the pe-程序员宅基地
文章浏览阅读4.9w次，点赞23次，收藏37次。 win7下使用pip install numpy出现错误consider using the '--user' option or check the permissions纠正方法：pip install --user numpy参考链接：https://github.com/googlesamples/assistant-sdk-python/issues/244 ..._consider using the `--user` option or check the permissions.
就读体验丨香港科技大学工学院科技领导及创业（TLE）理学硕士学位课程（上）_technology leadership and entrepreneurship-程序员宅基地
文章浏览阅读3.3k次，点赞2次，收藏2次。本文转载自公众号：HKUSTGSAA项目概览香港科技大学工学院的Technology Leadership and Entrepreneurship（TLE）MSc program项目时长Full-time1.5年，Part-time 3年，学生必须修满至少30学分的课程才能毕业。其中包括9学分的核心课程，6学分的工程学院提供的技术类选修课，6学分的工商管理学院、工学院、理学院或公共政策学院提供的选修课，以及9个学分的 Project。TLE项目希望同学在项目期间初步完成自己的创业产品雏形，所以非.._technology leadership and entrepreneurship
随便推点
敏感目录收集工具_cracer安全工具包密码-程序员宅基地
文章浏览阅读759次。敏感目录收集mysql管理接口后台目录上传目录phpinforobots.txt---->列出防爬行目录安装包安装页面---->index.php爬行Cracer渗透工具包6.0下载链接：https://pan.baidu.com/s/1ac-t-EMrl89aGJMm3pYS5w 密码：a8f11.御剑后台目录扫描 御剑是一款好用的网站后台扫描工具，图..._cracer安全工具包密码
2021-05-21 仓库温控系统(Winform) 05 获取类属性静态方法PropertyHelper_properties = properties.where(p => listcols.contai-程序员宅基地
文章浏览阅读7.1w次。public class PropertyHelper{ /// <summary> /// 返回指定类型的指定列名的属性数组 /// </summary> /// <typeparam name="T"></typeparam> /// <param name="cols"></param> /// <returns></returns> public _properties = properties.where(p => listcols.contains(p.getcolname().tolower(
移动开发技术：APP门户页面设计与开发_移动门户系统设计-程序员宅基地
文章浏览阅读145次。Fragment：Fragment是一种可以嵌入在Activity当中的UI片段，用来组建Activity界面的局部模块, 也可以说一个Actiivty界面可以由多个Fragment组成，其行为与Activity很相似,，有自己对应的布局(包含具体的View),，它有自己的生命周期，接收自己的输入事件，并且可以从运行中的activity中添加或移除。用imageview设计导入图片的格式，其中用 android:src="@drawable/bottom_4"导入需要用到的图片。_移动门户系统设计
Integer.MAX_VALUE_int max = integer.max_value;-程序员宅基地
文章浏览阅读252次。Integer.MAX_VALUE表示int的最大值int max=Integer.MAX_VALUE;//2147483647Integer.MIN_VALUE表示int的最小值int min=Integer.MIN_VALUE;//-2147483648_int max = integer.max_value;
JavaWeb项目：航班信息管理系统（tomcat+jsp）_javaweb航空管理系统-程序员宅基地
文章浏览阅读975次，点赞15次，收藏23次。该项目着重学生的实际应用场景来设计，模拟 机场中的航班系统的业务实现以及扩展，能够实现航班信息管理的的所有功能，包括航班信息，航 班目的地查询等功能的实现；用户输入用户名，真实姓名，密码进行注册，注册验证通过后，将用户存储到数据库中，如果数据库中已有相同用户名，则需要重新注册。：对管理员输入的用户名，密码进行验证，验证通过后，管理员可以使用航班信息管 理系统中所有权限的功能，否则重新登录该系统。：管理员登录成功，可以删除航班信息，删除完毕以后跳转到主页面显示所 以航班信息。_javaweb航空管理系统
Hutool基本用法介绍-程序员宅基地
文章浏览阅读1.5k次。在使用过程中，可以查阅 Hutool 的官方文档或者源码，以便更好地了解每个工具的具体用法和参数。它提供了丰富的工具类和方法，涵盖了字符串处理、日期时间操作、网络请求、文件操作、加解密、数据校验、反射操作等领域。你可以根据自己的项目需求选择适合的工具，来简化你的 Java 开发过程。发起 HTTP 请求（GET、POST、PUT、DELETE 等），支持设置请求头、请求参数、响应处理等。提供文件复制、移动、删除、读取、写入等操作，还支持递归遍历文件夹。支持 XML 数据的解析、生成和操作。_hutool