TinyMCE编辑器使用

一、引入TinyMCE

（1）、下载tinyMCE资源包文件 : http://download.tiny.cloud/tinymce/community/tinymce_5.10.0.zip 放入项目(测试发现最新5.11.版本展示有点问题，建议下载10)

（2）、下载中文包文件：http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js 放入资源包的langs中

（3）、页面引入

<#--引入tinymce    --><script type="text/javascript" src="${base}/js/tinymce/tinymce.min.js"></script>

二、使用

1、初始化

// html中 创建一个textarea
<textarea id="content" style="width:100%;" class="ued-textarea"></textarea>//js中
//tinyMce初始化var editor = tinymce.init({selector: '#content',language:'zh_CN',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 help emoticons autosave autoresize ',toolbar: 'code undo redo restoredraft | cut copy paste pastetext |formatselect fontselect fontsizeselect | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \bullist numlist | blockquote subscript superscript removeformat | \image charmap emoticons hr pagebreak insertdatetime preview | fullscreen | lineheight',height: 450, //编辑器高度min_height: 300,/*content_css: [ //可设置编辑区内容展示的css，谨慎使用'/static/reset.css','/static/ax.css','/static/css.css',],*/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,//tinyMce自定义图片上传images_upload_handler: function(blobInfo, success, failure) {var form = new FormData();form.append('files', blobInfo.blob(), blobInfo.filename());$.ajax({url: url,type: "post",data: form,processData: false,contentType: false,success: function(data) {success(data.location);},error: function(e) {alert("图片上传失败");}});},file_picker_callback: function(callback, value, meta) {var input = document.createElement('input');input.setAttribute('type', 'file');input.onchange = function() {var file = this.files[0];var form = new FormData();form.append("files", file);$.ajax({url: url,type: "post",data: form,processData: false,contentType: false,success: function(data) {callback(data.location);},error: function(e) {alert("图片上传失败");}});};input.click();},autosave_ask_before_unload: false,});}

给编辑器赋内容方式：tinyMCE.activeEditor.setContent(‘内容’)

获取编辑器内容：tinyMCE.activeEditor.getContent()

参考tinyMCE中文文档： http://tinymce.ax-z.cn/

TinyMCE编辑器使用相关推荐

Flask博客开发——Tinymce编辑器
之前Flask博客的文本编辑器比较简陋,这里为博客添加个优雅易用的Tinymce文本编辑器. github见:https://github.com/ikheu/my_flasky 1 项目中添加Tin ...
WordPress自带TinyMCE编辑器增强技巧大全
原文地址: http://www.cmhello.com/wordpress-tinymce-custom-methods.html 有朋友反馈说,Hcms主题使用短代码时,总是需要复制短代码样式,然 ...
xiuno开发文档_大白 · TinyMCE编辑器v1.9_Xiuno Plugin_奇狐插件商店_奇狐网
功能强大,所见即所得的富文本编辑器,本地部署速度快,附带Prism代码高亮插件,支持截图粘贴和手动上传图片,还可以编辑源代码. 版本说明版本内容更新时间 1.0 版本初始化版本2020-03-14 ...
获取tinyMCE编辑器中的内容
有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空) 就需要获取里面的内容. 1.如果当前页面只有一个编辑器: 获取内容:tinyMCE.activeEditor.getContent() ...
vue3使用tinymce编辑器
1.npm安装tinymce编辑器 npm install tinymce@^5.10.2 npm install @tinymce/tinymce-vue@^4.0.5 2.在public下面创建t ...
tinymce编辑器上传本地视频预览
小白一枚,最近搞搞tinymce编辑器上传视频预览,视频标签变成了图片标签问题,看看之前其他博主的说明,感jio好麻烦,官网的也没整明白,所以自己瞎整整.勿喷!勿喷!勿喷!重要事情说三遍首先是在ti ...
tinymce编辑器实现视频上传功能
1.思路:上传后把上传后的得到的地址追加到富文本. (注:我是用的是laui,原生js同理) 效果图: 2.具体代码: div代码部分 <div cla ...
Tinymce 编辑器中字数统计问题，统计所有字符（包括数字，字母。。。）
问题:测试人员发现在使用 tinymce 编辑器中字数统计不准确问题,只统计了中文字的字数,数字和字母被忽略了.... 具体通过复现发现,的确有这个问题,但是我们通过切换右下角发现是可以切换统计所有 ...
tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
html中编辑器制作goole图标,TinyMCE 编辑器添加 FontAwesome 自定义图标按钮
一为博客后台一直使用传统编辑器,就是 TinyMCE 编辑器,那个古腾堡用不惯然后想到主题编辑器添加一些段代码的按钮,而默认的 TinyMCE 编辑器图标就只有几个,完全不满足我折腾的心,就谷歌 ...

TinyMCE编辑器使用

一、引入TinyMCE

二、使用

TinyMCE编辑器使用相关推荐

最新文章

热门文章