Setting up line-height via TinyMCE

时间秒杀一切 提交于 2020-01-27 08:29:04

问题


Is there a way to give user possibility to easily changing line-height attribute of paragraph in tinyMCE editor? Something like its native "Font size" or "Format" <select> or anything else. I know I can use "edit CSS" functionality and set it up there. I'm looking for something more user-friendly.

I can't find it anywhere.


回答1:


As per my comment,

Someone else was experiencing an issue similar to yours and a member of the TinyMCE forums provided a solution:

http://www.tinymce.com/forum/viewtopic.php?id=28774




回答2:


I found this PlugIn for TinyMCE version 4.1.5 (2014-09-09)

https://github.com/castler/tinymce-line-height-plugin

Setting up like this:

tinymce.init({
    plugins: 'lineheight',
    toolbar: 'lineheightselect' 
});

Also you could configure the different heights like that:

tinymce.init({
    lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt",
});

I tested this and it works great.




回答3:


With TinyMCE 4 you can use "style_formats" option

http://www.tinymce.com/wiki.php/Configuration:style_formats




回答4:


I have found a good way for adding custom line-height to tinymce but this is a trick. I am using tinymce v5 and with these codes i can use line height with a nice select option.

you have to add these lines to init codes of tiny mce:

 tinymce.init({
            selector: 'textarea',
            height: 500,
            plugins: 'table wordcount',
            toolbar: '  styleselect ',

            content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '//www.tiny.cloud/css/codepen.min.css'
            ],
    toolbar: 'styleselect'
 content_style: '.lineheight20px { line-height: 20px; }' +
                '.lineheight22px { line-height: 22px; }' +
                '.lineheight24px { line-height: 24px; }' +
                '.lineheight26px { line-height: 26px; }' +
                '.lineheight28px { line-height: 28px; }' +
                '.lineheight30px { line-height: 30px; }' +
                '.lineheight32px { line-height: 32px; }' +
                '.lineheight34px { line-height: 34px; }' +
                '.lineheight36px { line-height: 36px; }' +
                '.lineheight38px { line-height: 38px; }' +
                '.lineheight40px { line-height: 40px; }' +
                '.tablerow1 { background-color: #D3D3D3; }',
            formats: {
                lineheight20px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' },
                lineheight22px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight22px' },
                lineheight24px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight24px' },
                lineheight26px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight26px' },
                lineheight28px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' },
                lineheight30px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight30px' },
                lineheight32px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight32px' },
                lineheight34px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight34px' },
                lineheight36px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight36px' },
                lineheight38px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight38px' },
                lineheight40px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight40px' }
            },
            style_formats: [
                { title: 'lineheight20px',format: 'lineheight20px' },
                { title: 'lineheight22px', format: 'lineheight22px' },
                { title: 'lineheight24px', format: 'lineheight24px' },
                { title: 'lineheight26px', format: 'lineheight26px' },
                { title: 'lineheight28px', format: 'lineheight28px' },
                { title: 'lineheight30px', format: 'lineheight30px' },
                { title: 'lineheight32px', format: 'lineheight32px' },
                { title: 'lineheight34px', format: 'lineheight34px' },
                { title: 'lineheight36px', format: 'lineheight36px' },
                { title: 'lineheight38px', format: 'lineheight38px' },
                { title: 'lineheight40px', format: 'lineheight40px' }



]
    });

and at the end i have to say you need to find a "paragraph" word in the file of tinymce/themes/silver/theme.min.js and change it to "line-height" if you want to see the line-height name instead of paragraph name. this word is in line of 290855 of that file. and this job is called custom format in tinymce that if you want to find it check this link: https://www.tiny.cloud/docs/demo/format-custom/ and I have to say you need to add this css codes to your css file:

.lineheight22px{
line-height: 22px;
}
.lineheight24px{
    line-height: 24px;
}
.lineheight26px{
    line-height: 26px;
}
.lineheight28px{
    line-height: 28px;
}
.lineheight30px{
    line-height: 30px;
}
.lineheight32px{
    line-height: 32px;
}
.lineheight34px{
    line-height: 34px;
}
.lineheight36px{
    line-height: 36px;
}
.lineheight38px{
    line-height: 38px;
}
.lineheight40px{
    line-height: 40px;
}


来源:https://stackoverflow.com/questions/11595702/setting-up-line-height-via-tinymce

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!