TinyMCE 富文本编辑器的使用实例指导
程序员文章站
2024-02-26 13:06:40
...
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 为定义的上传路径,查看 “application\cms\view\layouts\cms.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>
实际效果截图:
推荐阅读
-
TinyMCE 富文本编辑器的使用实例指导
-
关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
-
小程序的四次元口袋:editor富文本编辑器的使用、渲染,以及rich-text进行解析
-
Vue中Quill富文本编辑器的使用教程
-
(转)java Springboot富文本编辑器ueditor的内容使用itext5导出为pdf文件
-
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
-
使用富文本编辑器上传图片实例详解
-
Vue-Quill-Editor富文本编辑器的使用教程
-
微信小程序整合使用富文本编辑器的方法详解
-
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码