前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TinyMCE 富文本编辑器的使用实例指导

TinyMCE 富文本编辑器的使用实例指导

作者头像
泥豆芽儿 MT
发布2020-09-07 15:51:01
1.8K0
发布2020-09-07 15:51:01
举报

html 核心源码

代码语言:javascript
复制
		<div class="layui-input-block div-article-content">
            <textarea id="mz-tinymce" name="content"></textarea>
        </div>

js 源码:

代码语言:javascript
复制
<!-- 引入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>

实际效果截图:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档