我可以在编辑器编辑器中自定义标头标签(h1,h2,h3 ......)吗?

时间:2015-08-19 06:52:22

标签: jquery html5 css3 redactor redactor.js

我使用了编辑器编辑器的插件来更改文本的字体大小和字体颜色。除了标题之外,它在其他标签中工作正常。不明白为什么......

我试过这个

String strSDCardPath = System.getenv("SECONDARY_STORAGE");

if ((strSDCardPath == null) || (strSDCardPath.length() == 0)) {
    strSDCardPath = System.getenv("EXTERNAL_SDCARD_STORAGE");
}

//If may get a full path that is not the right one, even if we don't have the SD Card there. 
//We just need the "/mnt/extSdCard/" i.e and check if it's writable
if(strSDCardPath != null) {
    if (strSDCardPath.contains(":")) {
        strSDCardPath = strSDCardPath.substring(0,strSDCardPath.indexOf(":"));
    }
    File externalFilePath = new File(strSDCardPath);

    if (externalFilePath.exists() && externalFilePath.canWrite()) {
        //do what you need here
    } 
}

任何帮助?

2 个答案:

答案 0 :(得分:1)

您可以通过添加CSS来格式化文本!

通过向元素添加类,您可以将它们设置为您想要的样式

有关详情,请参阅documentation或以下示例!

HTML:

<textarea id="redactor" name="content">...</textarea>

JS:

<script type="text/javascript">
$(function()
{
    $('#redactor').redactor({
        focus: true,
        formatting: ['p', 'blockquote', 'h1', 'h2'],
        formattingAdd: [
        {
            tag: 'p',
            title: 'Red Block',
            class: 'red-styled'
        },
        {
            tag: 'p',
            title: 'Blue Styled Block',
            class: 'blue-styled'
        },
        {
            tag: 'p',
            title: 'P Attr Title',
            attr: {
                name: 'title',
                value: 'Hello World!'
            },
            class: 'p-attr-title'
        },
        {
            tag: 'p',
            title: 'P Data Set',
            data: {
                name: 'data-name',
                value: 'true'
            },
            class: 'p-data-set'
        },
        {
            tag: 'span',
            title: 'Big Red',
            style: 'font-size: 20px; color: red;',
            class: 'span-big-red'
        },
        {
            tag: 'span',
            title: 'Font Size 20px',
            style: 'font-size: 20px;',
            class: 'font-size-20'
        },
        {
            tag: 'span',
            title: 'Font Georgia',
            style: 'font-family: Georgia;',
            class: 'font-family-georgia'
        },
        {
            tag: 'code',
            title: 'Code'
        },
        {
            tag: 'mark',
            title: 'Marked Tag'
        },
        {
            tag: 'span',
            title: 'Marked Span',
            class: 'marked-span'
        }]
    });
});
</script>

CSS:

.red-styled {
    color: red;
}
.blue-styled {
    color: blue;
    font-weight: bold;
}
.marked-span {
    background: yellow;
    font-family: monospace;
}


.redactor-dropdown .redactor-formatting-span-font-size-20 {
    font-size: 20px;
}
.redactor-dropdown .redactor-formatting-span-font-family-georgia {
    font-family: Georgia;
}
.redactor-dropdown .redactor-formatting-span-big-red {
    font-size: 20px;
    color: red;
}
.redactor-dropdown .redactor-formatting-code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background: #f4f4f4;
}
.redactor-dropdown .redactor-formatting-mark {
    background-color: #ffc800;
    color: #0f0f0f;
}
.redactor-dropdown .redactor-formatting-span-marked-span {
    background: yellow;
    font-family: monospace;
}

答案 1 :(得分:0)

或者您可以修改该行,使其仅影响headings。通过此更改,您现在可以bolditalicstrike-throughheadings

//if (this.utils.isCurrentOrParent('PRE') || this.utils.isCurrentOrParentHeader()) return;
if (this.utils.isCurrentOrParent('PRE')) return;

我写了一篇博客文章,介绍如何应用补丁来实现这一目标,而不是改变源代码。

http://blog.justinleveck.com/2015/12/21/patch-redactor-to-allow-header-formatting/