中文版tinymce结合cms或者博客程序的使用教程

技术控 Loading... 阅读

很多人选择的程序一大纠结点我相信就是编辑了,因为好的编辑器用的顺手才会一直坚持发布内容。我个人就是比较喜欢wordpress自带的编辑器(不是古腾堡),除此之外还有zblogphp的插件:Neditor编辑器,至于其他的cms使用的编辑器我是比较抗拒的,因为太老了,虽然说编辑内容的时候没什么区别,但ui不爽也是比较难受的。

今天发现了不错的编辑器,在测试classcms这个程序的时候发现它的后台有很多的编辑器,我一眼就看中了这个tinymce编辑器了,之后找到中文文档,下载了中文的翻译文件,安装到我之前做的cms中,也算是终于有一个比较喜欢用的编辑器了。

以后自己写程序可能就选择了tinymce编辑器了,在本地试了试,确实属于我喜欢的那种。

看一下我后台的截图:

中文版tinymce结合cms或者博客程序的使用教程

不过第一次使用这个编辑器,安装的时候还是出现了点问题,由于安装的这个系统使用是ajax提交数据的,所以修改的内容没有同步到 textarea ,而提交却是直接获取name标签就提交了。之后又查了一下资料,发现已经有解决办法了,直接添加同步配置项就能同步到 textarea ,之后获取 name 标签也有内容,直接提交也没有问题了。

中文版tinymce结合cms或者博客程序的使用教程

目前使用没有发现什么问题,由于我目前这个程序是针对于文字站点的,图片上传和代码高亮以及富媒体上传之类的都没有配置,暂时用不到这些内容。

图片上传我已经有思路了,(我的习惯性做法是上传到api之后返回图片url就行), tinymce应该是不支持类似wordpress默认编辑器之类的直接获取返回值插入的,但是可以参考上传实例来获取插入的代码来自己构造一个ajax请求api返回url的方法,还没有去测试,但想来应该是可以的。实在不行还可以直接利用上传模块,改php代码去请求api一样可行。

富媒体上传也是一样的办法。但通常用不到富媒体,我从不上传媒体文件到自己的服务器,最多是用api上传到ftp空间。

代码高亮官方已经有合适的插件了,但是我不太喜欢它提供的高亮插件,之后还要找找资料能不能换成其他的。比如,我就喜欢本站用的这个高亮。简单高效又大气。

如果你也有同样的需求,可以参考本文来实现安装 tinymce 编辑器,下载本站提供的zip压缩包,解压完了放到你的程序下的某一个目录(注意一下路径),之后复制我的代码放到你的文章编辑页面就行了。

代码:

<script src="/static/plugs/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#content',
        //skin:'oxide-dark',
        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 bdmap indent2em autoresize formatpainter axupimgs autosave',
        toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs restoredraft',
        height: 650, //编辑器高度
        min_height: 400,
        /*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,
        // 图片最大允许100%
        content_style: "img {max-width:100%;}",
        //自定义文件选择器的回调内容
        // file_picker_callback: function (callback, value, meta) {
        //     if (meta.filetype === 'file') {
        //         callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
        //     }
        //     if (meta.filetype === 'image') {
        //         callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
        //     }
        //     if (meta.filetype === 'media') {
        //         callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
        //     }
        // },
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
        // 自动同步数据
        setup: function(editor){
            editor.on('change',function(){ editor.save(); });
        },
    });
</script>

提示:这段代码中,我已经配置了自动保存,自动同步数据(如果你不是ajax提交数据可以去掉),基本功能正常,但是关闭网页没有提示,误操作之后可以返回该页面进行恢复操作。

编辑器下载地址:

蓝奏云下载

已经附带了中文文件包,所以按照上面的代码配置 language:'zh_CN', 就是中文的,不配置依然是英文。

有不懂的可以参考一下翻译作者搭建的说明:TinyMce中文文档

Tags:

版权声明:若无特殊注明,本文皆为《书蓝画青》原创,转载务必保留文章来源。

本文链接:中文版tinymce结合cms或者博客程序的使用教程 & https://boke.slhq.cn/1392.html

推荐阅读
发表评论 取消回复
表情 图片 链接 代码

分享