TinyMCE是一个轻量、简洁、功能强大的富文本编辑器
发表于:2022-10-23 22:54:35浏览:1911次
TinyMCE是一个轻量、简洁、功能强大的富文本编辑器。TinyMCE,UI界面友好,而且插件丰富,官网提供了很多实用的插件,如多图上传,首行缩进,字数限制等,还可以自定义插件,方便拓展。
具体的使用方法如下,中文网站也讲得很详细,可以参考:http://tinymce.ax-z.cn/quick-start.php
第1步:引入TinyMCE脚本
首先在官网下载自己需要的版本后,在中插入如下这行代码,将tinymce.min.js源文件引入项目。
第2步:将TinyMCE初始化为页面的一部分
需要使用tinymce.init()来进行初始化。tinymce.init()内的初始化对象包含众多参数,但都是可省略的,唯一必须的参数就是selector(允许通过css选择器指定TinyMCE要绑定的内容容器,传统模式需指定textarea,内联或沉浸模式可指定div或其它块元素,推荐div)
在下面这个例子中,我们创建一个TinyMCE实例初始化,来取代:
<!DOCTYPE html>
<html>
<head>
<script src='tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<h1>TinyMCE快速开始示例</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
图片的复制粘贴,依赖于 paste 插件 文档:插件 \ paste 粘贴插件
简单的配置如下:
tinymce.init({
selector: '#mytextarea',
plugins: 'paste',
toolbar: 'paste',
paste_data_images: true // 默认是false的,记得要改为true才能粘贴
})
推荐文章
- 四行JavaScript代码实现禁止复制网站内容
- 微软Edge浏览器在100版本里程碑之前的最后一个稳定版Edge99发布
- JavaScript将一个包含父子关系的扁平化数组转换成树形菜单
- ThinkPHP6中Mysql查询语句汇总的JOIN操作与标准的SQL JOIN语句
- 82个常规的前端JavaScript方法封装(51~60)
- 82个常规的前端JavaScript方法封装(21~30)
- thinkphp6 生成Barcode条形码和Qrcode二维码的方法
- 谷歌Chrome浏览器v101稳定版发布 支持FedCM和优先级提示等新功能
- DevOps已向业务进阶,如何实现项目研发效率的提升?
- 用ECharts的getDataURL方法自动下载Chart图到服务器