TinyMCE 富文本编辑器的使用实例指导
时间:2022-07-24
本文章向大家介绍TinyMCE 富文本编辑器的使用实例指导,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
html 核心源码
<div class="layui-input-block div-article-content">
<textarea id="mz-tinymce" name="content"></textarea>
</div>
js 源码:
<!-- 引入TinyMCE脚本 -->
<script type="text/javascript" src="__TINYMCE__/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#mz-tinymce',
language:'zh_CN', //调用放在langs文件夹内的语言包
height: 300,
//plugins: ['table','preview' ], //选择需加载的插件
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap indent2em autoresize lineheight formatpainter axupimgs',
toolbar1: 'code undo redo| forecolor backcolor bold italic underline strikethrough hr|' +
'|alignleft aligncenter alignright alignjustify|table image media| insertdatetime preview fullscreen',
min_height: 400,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
importcss_append: true,
autosave_ask_before_unload: false,
convert_urls:false,
//图片上传操作
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
// image_upload_url 为定义的上传路径,查看 “applicationcmsviewlayoutscms.html”
xhr.open('POST', image_upload_url);
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || json.status != 1) {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
var fullImgUrl = json.data.full_url;
succFun(fullImgUrl);
};
formData = new FormData();
formData.append('file', file, file.name );//此处与源文档不一样
xhr.send(formData);
},
//处理表单ajax提交不保存信息的情况
setup: function(editor){
editor.on('change',function(){ editor.save(); });
},
});
</script>
实际效果截图:
- 设置输出延迟
- 设置输入延时约束
- MySQL 死锁与日志二三事
- 一千个不用 Null 的理由
- TensorFlow强化学习入门(1.5)——上下文赌博机
- 以太坊·代币开发详解
- JSON Web Token - 在Web应用间安全地传递信息
- TensorFlow强化学习入门(2)——基于策略的Agents
- 用ABAP 生成二维码 QR Code
- CDS view注解解析 - @Environment.systemField
- Document flow API in SAP CRM and C4C
- Python基础知识4:文件操作
- Python基础知识6:格式化字符、颜色
- 给自定义控件(Web Control)添加事件的几种方法。前两种方法可以不实现IPostBackEventHandler
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 系统学习Stream
- Java回调的四种写法(反射、直接调用、接口调用、Lamda表达式)
- 避开NullPointerException的10条建议
- REST服务,使用Dubbo还是SpringMVC?
- Linux系统下Anaconda的安装和使用教程
- Flutter Dojo设计之道——利用Github打造完善的开源项目
- 最强 Redis 客户端 lettuce 已支持 Redis6客户端
- 还在手动整理数据库文档?试试这个工具
- Elasticsearch 常见的 8 种错误及最佳实践
- Spark流式状态管理
- Scala中的IO操作及ArrayBuffer线程安全问题
- 设计模式之单例模式
- Roslyn 理解 msbuild 的清理过程
- gorm聚合查询group结合join和count
- 潘石屹用Python解决100个问题 | 集合