精华内容
下载资源
问答
  • TinyMce中文文档电子书

    2019-03-06 01:35:28
    博文链接:https://dreamit.iteye.com/blog/214773
  • 此页更新时间:2019-03-03 20:55该插件提供自动调整编辑器大小的方法以适应内容。plugins: "autoresize"启用该插件会增加数个配置选项,以帮助开发者按需调整大小。autoresize_bottom_margin指定编辑器body初始化时...

    此页更新时间:2019-03-03 20:55

    该插件提供自动调整编辑器大小的方法以适应内容。

    plugins: "autoresize"

    启用该插件会增加数个配置选项,以帮助开发者按需调整大小。

    autoresize_bottom_margin

    指定编辑器body初始化时底边距,也就是加一个margin-bottom。

    取值:Number

    autoresize_bottom_margin: 50

    max_height

    限定编辑器的最大高度,当内容不断增长达到此高度时,编辑器将停止增加高度。

    取值:Number

    max_height: 500

    min_height

    限定编辑器的最小高度。

    取值:Number

    min_height: 350

    autoresize_on_init

    是否在初始化时就尝试自动调整大小。默认true启用此功能。

    取值:true / false

    默认:true

    autoresize_on_init: false

    autoresize_overflow_padding

    指定编辑器body初始化时两侧的距离,相当于padding-left加padding-right

    取值:Number

    autoresize_overflow_padding: 50

    展开全文
  • TinyMce 帮助文档

    2009-10-19 20:35:00
    TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器,它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的,比如在Intranets、CMS、LMS等系统中应用。
  • TinyMCE CHM中文文档

    2008-10-05 13:48:05
    TinyMCE的CHM版中文文档,根据HTML版的中文文档制作得来,整理了文档目录和索引,CHM版搜索、查找更方便。
  • tinyMCE 详细文档

    2012-03-28 10:57:26
    http://www.iwms.net/n2065c17.aspx
    http://www.iwms.net/n2065c17.aspx
    展开全文
  • TinyMce 中文手册 在线手册与下载
  • Tinymce plugins [Tinymce扩展插件集合]

    千次阅读 热门讨论 2020-12-27 17:16:59
    tinymce 中文文档 本插件集合地址 简述 This is tinymce plugins 该项目主要为 tinymce 富文本编译器的扩展插件,或增强优化插件 目前整理完成的插件列表如下: imagetools [增强优化]: 图片编辑工具插件, 对...

    tinymce-plugins

    This is tinymce plugins

    前言

    因为项目需要用到富文本编辑器众多富文本编辑器中,选择了 Tinymce,根据项目需要对Tinymce 进行扩展和增强插件,记录一下,并同时分享给需要帮助的人。

    tinymce 官方文档

    tinymce 中文文档

    插件下载地址

    项目demo地址

    CSDN 博客

    个人博客

    QQ邮箱: fivecc@qq.com

    简述

    This is tinymce plugins
    该项目主要为 tinymce 富文本编译器的扩展插件,或增强优化插件
    目前整理完成插件列表如下:

    • imagetools [增强优化]: 图片编辑工具插件, 对图片进行处理。优化跨域,功能更丰富;
    • table [增强优化]:表格插件,处理表格。 增强优化表格控制,增加表格转图片功能,便捷布局按钮;
    • indent2em[增强优化]:首行缩进插件。提供中文段落排版的首行缩进2个字符的功能。增强优化 加入字间距非默认情况,也能实现准确首行缩进2字符;
    • letterspacing:设置间距插件。可以设置文档中的文字间距;
    • layout: 一键布局插件。可以给文档段落进行一键快速排版布局;
    • importword: 导入word插件。可以直接导入word ,并且保证word中图片不会丢失,自动转为base64;
    • upfile: 文件上传。可以点击导入文件,可自定义编辑文件名;
    • bdmap: 百度地图。 支持更改尺寸,自定义标签,开启导航功能,支持vue;
    • axupimgs: 多图上传。可同时上传多组图片,支持vue;
    • attachment: 附件上传。拥有附件类型对应图标,支持vue;

    下载

     npm i @npkg/tinymce-plugins 或 cnpm i @npkg/tinymce-plugins -D
    

    使用说明

    未使用过 tinymce ,可以查看莫若卿大佬的 tinymce 中文文档

    imagetools 使用方法:

    增强效果:
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1R6Xv8K-1621387811879)(https://s3.ax1x.com/2020/12/28/ro4Lng.png)]

      tinymce.init({
        selector: '#tinydemo',
        plugins: "image imagetools",
        toolbar: "image",
       });
    

    点击下载 更多下载
    更多配置 见 插件 / imagetools

    table 使用方法:

    增强效果:
    在这里插入图片描述

    提供一个配置项目 table_icons 自定义图标配置【Object】可配置icon 对象为

    1. align-left-table: 表格居左
    2. align-center-table: 表格居中
    3. align-right-table: 表格居右
    4. table-to-img: 表格转图片
    tinymce.init({
        selector: '#tinydemo',
        plugins: "table",
        toolbar: "table"
        table_icons: {// 以下下为默认配置
            'align-right-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm6 4h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm-6-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>',
            'align-left-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 4h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2zm0-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>',
            'align-center-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm3 4h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 0 1 0-2zm-3-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>'
        }
    });
    

    点击下载 更多下载
    更多配置 见 插件 / table

    indent2em 使用方法:

    当使用 本项目 letterspacing 插件,如需使用首行缩进 请替换原有indent2em,使用该项目indent2em插件。

    tinymce.init({
        selector: '#tinydemo',
        plugins: "indent2em",
        toolbar: "indent2em"
    });
    

    点击下载 更多下载
    更多配置 见 插件 / indent2em

    letterspacing 使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "letterspacing",
        toolbar: "letterspacing"
    });
    

    点击下载 更多下载

    更多配置(选配) :

    提供字段 letterspacing 配置参数【String类型】,空格隔开;

    tinymce.init({
       selector: '#tinydemo',
       plugins: "letterspacing",
       toolbar: "letterspacing",
       letterspacing: "0px 2px 4px 6px 24px"
    });
    

    layout 使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "layout",
        toolbar: "layout"
    });
    

    点击下载 更多下载

    更多配置 (选配):

    提供 一键布局 默认参数字段 layout_options 配置参数【Object类型】目前一共4个属性:

    1. style : 一键布局默认样式参数【Object】
    2. filterTags: 【Array】过滤标签,该数组中的标签,一键布局中将会被忽略(默认忽略 ‘table’,‘tbody’,‘td’,‘tr’)
    3. tagsStyle: 单独标签样式处理【Object】
    4. clearStyle: 【Array】清除样式 ,一键布局后 ,数组中的样式将会清除掉。

    配置优先级从低到高: style < filterTags < tagsStyle < clearStyle

    tinymce.init({
        selector: '#tinydemo',
        plugins: "layout",
        toolbar: "layout",
        layout_options: {
                    style: {
                       'text-align':'justify',
                       'text-indent':'2em',
                       'line-height': 1.5
                    },
                    filterTags:['table>*','tbody'], //'table,'tbody','td','tr' 将会忽略掉 同时 table>*,忽略table 标签 以及所有子标签
                    clearStyle: ['text-indent'],//text-indent 将会被清除掉
                    tagsStyle: {
                       'table': {
                           'line-height': 3,
                           'text-align': 'center'
                       },
                      'table,tbody,tr,td': { //支持并集选择
                        'line-height': 2
                       },
                       'tr>td,table>tbody': { //支持, 精准定位 通过 ' > '
                        'line-height': 3,
                        'text-align': 'center'
                       }
                   }
        }
    });
    

    importword 使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "importword",
        toolbar: "importword"
    });
    

    点击下载 更多下载

    更多配置(选配) :

    提供 导入word 插件
    预处理函数 importword_handler 配置参数【Function类型】传入3个参数

    1. editor : editor 编辑器实列【object】
    2. files : 导入的文件 【object】
    3. next : 下一步骤回调函数 传入files标签字符串【Function】

    过滤函数 importword_filter 配置参数【Function类型】传入3个参数

    1. result : 导入word 生成的 html标签字符串【String】
    2. insert : 插入回调函数 传入 html标签字符串【String】
    3. message: 转换过程中产生的错误信息集【Array】
    tinymce.init({
        selector: '#tinydemo',
        plugins: "importword",
        toolbar: "importword",
        importword_handler: function(editor,files,next){
                    var file_name = files[0].name
                    if(file_name.substr(file_name.lastIndexOf(".")+1)=='docx'){
                        editor.notificationManager.open({
                            text: '正在转换中...',
                            type: 'info',
                            closeButton: false,
                        });
                         next(files);
                    }else{
                        editor.notificationManager.open({
                            text: '目前仅支持docx文件格式,若为doc111,请将扩展名改为docx',
                            type: 'warning',
                        });
                    }
                    // next(files);
        }
        importword_filter: function(result,insert,message){ 
           // 自定义操作部分
          insert(result) //回插函数
        }
    });
    

    upfile 使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "upfile",
        toolbar: "upfile"
    });
    

    点击下载 更多下载

    更多配置(选配) :

    提供 upfile 插件 过滤函数 file_callback 配置参数【Function类型】传入2个参数

    1. file : 文件对象【file】
    2. succFun : 成功回调函数 传入 html标签字符串【Function类型】(url|string,obj)
    tinymce.init({
        selector: '#tinydemo',
        plugins: "upfile",
        toolbar: "upfile",
        file_callback: function (file, succFun) {
           // 自定义处理文件操作部分
          succFun(url,{text: 'xx.pdf'}) //成功回调函数 text 显示的文本
        }
    });
    

    bdmap 使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "bdmap",
        toolbar: "bdmap"
    });
    

    点击下载 更多下载

    更多配置(选配) :

    提供 bdmap 插件 bdmap_options 配置参数【object】 传入 4 个参数

    1. width: 百度地图默认宽度 默认 560
    2. height: 百度地图默认高度 默认 360
    3. outputIframe: 百度地图输出iframe路径, 默认 ‘.’ (当前路径) Vue 默认 ‘https://unpkg.com/@npkg/tinymce-plugins/plugins/bdmap/bd.html’
    4. apiKey: 自定义百度地图apiKey Vue 中有效
    tinymce.init({
        selector: '#tinydemo',
        plugins: "bdmap",
        toolbar: "bdmap",
        bdmap_options: {
            width: 560,
            height: 360,
            outputIframe: 'https://unpkg.com/@npkg/tinymce-plugins',
            apiKey: 'ONXXXXXXXXXXXXXXnP'
        }
    });
    

    axupimgs(Vue)使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "axupimgs",
        toolbar: "axupimgs"
    });
    

    点击下载 更多下载

    更多配置 见 插件 / axupimgs

    attachment 使用方法:

    tinymce.init({
        selector: '#tinydemo',
        plugins: "attachment",
        toolbar: "attachment"
    });
    

    点击下载 更多下载

    更多配置(选配) :

    提供 attachment 插件 提供 attachment_max_sizeattachment_style,attachment_icons_path,attachment_upload_handler 配置参数
    attachment_max_size: 附件大小限制 默认 209715200 (200M)【number】
    attachment_style: 附件的样式,主要为保存数据后可以直接在其他页面展示。 【string】
    attachment_icons_path: 附件的 图标的路径 icons , 默认 当前路径 Vue 默认 ‘https://unpkg.com/@npkg/tinymce-plugins/plugins/attachment/icons’
    attachment_upload_handler: 附件上传处理函数 【function】 function(file, succFun, failFun, progressCallback)

    1. file : 文件对象【file】
    2. succFun : 成功回调函数 传入 (url|string)
    3. failFun : 失败回调函数 传入 (string)
    4. progressCallback: 进程回调函数 传入 (string)
    
    var xhrOnProgress = function (fun) {
        xhrOnProgress.onprogress = fun;
        return function () {
            var xhr = $.ajaxSettings.xhr();
            if (typeof xhrOnProgress.onprogress !== 'function')
                return xhr;
            if (xhrOnProgress.onprogress && xhr.upload) {
                xhr.upload.onprogress = xhrOnProgress.onprogress;
            }
            return xhr;
        }
      }
    
    tinymce.init({
        selector: '#tinydemo',
        plugins: "attachment",
        toolbar: "attachment",
        attachment_max_size: 209715200,
        attachment_style:'.attachment>img{display:inline-block!important;max-width:30px!important;}'
        attachment_icons_path: 'https://unpkg.com/@npkg/tinymce-plugins/plugins/attachment/icons',
        attachment_upload_handler: function (file, succFun, failFun, progressCallback) {
                var data = new FormData();
                data.append("file", file);
                $.ajax({
                    data: data,
                    type: 'GET',
                    url: './api/file.json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    header:{'Content-Type':'multipart/form-data'},
                    dataType: 'json',
                    xhr: xhrOnProgress(function (e) {
                        const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
                        progressCallback(percent);
                    }),
                }).then(function (data) {
                    if ( data.code== 200) {
                        succFun(data.data);
                    } else {
                        failFun('上传失败:' + data.data);
                    }
                }).fail(function (error) {
                    failFun('上传失败:' + error.message)
                });
            },
    
            
    });
    

    在vue当中使用

    只需将插件下载后引用到安装目录中

    
    |-- node_modules
    | ...
    |   |-- tinymce
    |   | .
    |   |-- |-- plugins
    |   |   |   |-- letterspacing
    |   |   |   |-- layout
    |   |   |   |-- indent2em
    |   |   |   |-- importword
    |   |   |   |-- imagetools
    |   |   |   |-- table
    |   |   |   |-- bdmap
    |   |   |   |-- axupimgs
    |   |   |   |-- attachment
    | ...
    
    

    引入

    可以全部引入

     import '@npkg/tinymce-plugins'
    

    也可以按需引入

    import '@npkg/tinymce-plugins/importword' 
    import '@npkg/tinymce-plugins/lineheight' 
    import '@npkg/tinymce-plugins/layout' 
    import '@npkg/tinymce-plugins/letterspacing' 
    import '@npkg/tinymce-plugins/indent2em' 
    import '@npkg/tinymce-plugins/upfile' 
    import '@npkg/tinymce-plugins/imagetools'
    import '@npkg/tinymce-plugins/attachment'
    
    

    欢迎提出建议,动手点赞 ,或提pr

    展开全文
  • TinyMCE在线编辑器,中文文档及压缩包
    TinyMCE在线编辑器,中文文档及压缩包
    展开全文
  • Vue引入TinyMCE

    2021-04-01 10:09:30
    推荐大佬整理的中文站:TinyMCE中文文档 引入方式: 1、按照上面文档的方式自行引入,注意版本问题!注意版本问题!注意版本问题! 2、在自己的Vue项目的components文件夹下新建tinymce文件夹,把下面链接的文件全部...
  • tinymce中文文档 默认ng-alain 已经内置了tinymc 查看共享模块是否加载了tinymce import {NgxTinymceModule} from 'ngx-tinymce'; const THIRDMODULES = [ NgxTinymceModule]; 在appmodule中注册 import { ...
  • tinymce4 中文语言包

    2018-10-09 13:04:40
    tinymce4官方版本的简体中文语言包,亲测版本到4.8.3可用
  • 真正的chm版tinymce中文帮助手册,别人卖5积分,我收1分钱就给你用了,而你只要回复一个就有了。 其实免费是最好的,不过我免费,我就没积分下了,555555
  • react 使用富文本(TinyMCE)

    千次阅读 2020-06-28 14:53:58
    TinyMCE中文文档 TinyMCE官方文档 Ant design 二:使用步骤 1.安装插件 npm install --save @tinymce/tinymce-react 1.页面中使用 import { Editor } from '@tinymce/tinymce-react'; // 富文本 const ...
  • TinyMCE

    2010-03-03 11:14:00
    现在好像就没有那么方便了,需要在网页的在线编辑器中先将每一张图片上传,然后才能放在文档相关位置。 我猜想应该是在线编辑器换了,我做项目时只用过FCKEditor,在使用时就需要先上传每一张图片才能显示。最近和...
  • TinyMce富文本编辑器配置说明

    千次阅读 2020-09-24 10:40:29
    Tinymce中文文档 Tinymce官方文档 Tinymce github地址 tinymce版本为5.30+ 相关配置请参考src/components/tinymce目录,本文项目github地址 tinymce 配置说明 { width: '100%', // 设置富文本编辑器宽度 height: '100...
  • tinymce插件使用

    2020-04-09 23:31:42
    今天在做项目的时候,涉及到要做一个类似于文章上传的功能,因为毕竟以前没有特地研究过,反正肯定直接使用默认的textarea感觉不是那么好,就想到我们csdn上写文章,...打开TinyMCE中文文档(去官网也可以,推荐有英...
  • TinyMce2中文手册.rar

    2007-06-04 12:21:06
    功能强大的TinyMce网页编辑器的中文文档
  • Vue中使用Tinymce-edtio

    2019-12-22 17:59:32
    Tinymce中文文档 一、资源下载 tinymce 官方为 vue 项目提供了一个组件 tinymce-vue 使用npm安装 npm install @tinymce/tinymce-vue -S npm install tinymce -S 或 使用yarn安装 yarn add @tin...
  • 未使用过 tinymce ,可以查看莫若卿大佬的 tinymce 中文文档 imagetools 使用方法: 增强效果: tinymce.init({ selector: '#tinydemo', plugins: "image imagetools", toolbar: "image", }); 点击下载 更多...
  • 发现这方面的资料的真的很少,我自己初步配置了一个中文的,供大家快速调用。图片集成ajax是老外弄的,解压后放在网站根目录下,访问tinymce_test.php就可以了看到效果了。js比较庞大,有点慢,测试的话要关闭服务器...
  • 如果您需要有关TinyMCE的详细文档,请参阅: 。 有关TinyMCE React快速入门,请参阅: 。 有关TinyMCE React技术参考,请参阅: 。 对于我们的快速演示,请查看TinyMCE React 。 问题 您是否发现了tinymce-react...
  • TinyMCE中文文档地址 安装tinymce npm install tinymce -S npm install @tinymce/tinymce-vue -S npm install --save @packy-tang/vue-tinymce 挪动文件 tinymce-vue是tinymce官方提供的一个vue组件,可以直接拿...
  • TinyMCE 中文文档地址:http://tinymce.ax-z.cn/configure/editor-appearance.php TinyMCE 源码存储地址:https://github.com/tinymce/tinymce-vue 其他使用心得参照: https://www.jb51.net/web/78618.html ...
  • [转] TinyMCE 中文参考

    2010-07-06 10:28:00
    初始化在初始化TinyMCE的时候,需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置,所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块,我们将在后面详细讲述。注意以上红色部分是tiny_...
  • tinymce插件开发

    2013-04-01 10:24:33
    tinyMCE插件开发基础! 提供tinyMCE插件开发的基本方法。
  • 最新在写tinymce富文本,这里特别记录一下,以便于以后方便使用...[tinymce中文文档](http://tinymce.ax-z.cn/) 1.安装 npm install tinymce npm install @tinymce/tinymce-vue 2.在官网下载语言包 https://www.tiny.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 855
精华内容 342
关键字:

tinymce中文文档