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

2024-03-10

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

我试过这个

$('#redactor').redactor({
    focus: true,
    plugins: ['fontcolor', 'fontsize'],
    formatting: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
});

有什么帮助吗?


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

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

See the 文档 http://imperavi.com/redactor/examples/formatting-add/或以下示例了解更多信息!

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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我可以在编辑器编辑器中自定义标题标签(h1,h2,h3 ...)吗? 的相关文章

随机推荐

  • 如何从 pandas groupby 对象创建多个数据框

    我正在尝试在多索引数据帧 df 上使用 groupby 创建新的数据帧 级别 0 是字符串标识符 级别 1 是日期时间索引 最终我想确定每个 vsl 与每个 DIV 和 DIS 关联的总时间 这是 df 的片段 DIV DIS vsl Be
  • 派生类中的 sizeof(*this) 和 decltype(*this)

    假设有类 struct A int a virtual size t GetMemoryUsage const return sizeof this struct B public A int b 而且可能还有更深层次的传承 我想要的是有一
  • 下面的 for 循环语法在 C 中意味着什么?

    我遇到了这个语法 不知道它意味着什么 for do stuff like read from a handle etc 我仍然处于 C 语言的学习曲线上 所以如果你愿意的话 如果这是一个蹩脚的问题 请投票否决 这是一个无限循环 与 一样wh
  • Jersey:禁用默认 JSON 提供程序

    我正在使用 Jersey 2 17 JSON 和自动功能发现 我有我的自定义 JSON Provider 扩展JacksonJsonProvider 它的注释是 Provider并自动注册 与附带的默认注册相同
  • React - 单个组件的动画安装和卸载

    这么简单的事情应该很容易完成 但我却对它的复杂程度感到抓狂 我想做的就是为 React 组件的安装和卸载设置动画 仅此而已 以下是我迄今为止尝试过的方法以及每个解决方案不起作用的原因 ReactCSSTransitionGroup 我根本没
  • 类型“HttpRequestMessage”在未引用的程序集中定义

    当我在本地构建时它可以工作 但我的 VSTS 托管 2017 实例构建失败并显示以下消息 error apps Ascend Identity AccountController cs 126 17 Error CS0012 The typ
  • 将多个图包裹在一个图像中

    我试图将许多图包装在一起 因为它们密切相关 使用 1 个连续变量和 1 个分类变量显示密度 按一周中的某一天细分 其中每一天都是不同的图 在 R 中 我可以使用grid arrange from gridExtra or facet wra
  • 如何在普通的
    中使用 而不是

    我有一个使用标准 HTML 的搜索表单
  • 制定紧凑的隐私政策

    我正在研究使用 cookie 进行跟踪的想法 并注意到我当前的网站没有紧凑的隐私政策 我用谷歌搜索了一下 有很多方法可以创建它们 但要付出一定的代价 只是想知道是否有一种方法可以在不付费的情况下做到这一点 有任何想法吗 我正忙着同样的事情
  • Angular 2+ 中的 Azure Graph / Microsoft Graph 查询

    我想在 Angular 5 Web 应用程序中从 Azure Active Directory 查询应用程序角色和组声明 我想授予管理员对页面的特殊权限 访问权限 我在 Azure 中注册了一个 B2C 应用程序 在以下地址注册了一个 Mi
  • 如何获取redis中的所有集合?

    我知道 KEYS 命令 但它只返回键 我猜测所有类型为 String 的键 并且显然集合不被视为键 有没有获取数据库中所有集合的命令 其他数据类型 散列 列表 排序集 怎么样 http redis io topics data types
  • 如何保持 RTSP 会话存活?

    我尝试在 Google Nexus S 2 3 7 HTC Desire 2 3 3 和 Samsung Galaxy 3 2 上进行流式传输 只有 Google Nexus 存在 RTSP 会话超时问题 我阅读了一些关于这个问题的帖子 似
  • 将 GeoDataFrame 多边形转换为 kml 文件

    我有一个 geopandas GeoDataFrame 其中包含各种多边形和颜色 我用它来绘制气象数据 我问的另一个问题here https stackoverflow com questions 35516318 plot colored
  • JS 代理 HTML5 画布上下文

    我希望代理画布 API 这样我就可以测试抽象方法是否确实绘制到画布上 但是我遇到了代理后出现错误的问题 strokeStyle setter called on an object that does not implement inter
  • 相对于页面滚动背景

    这是我第一次使用 Stack Overflow 所以如果我的问题有点冗长 我深表歉意 我有点为难 我想创建这种视差滚动效果 其中背景图像 其高度大于窗口的高度 始终与页面上的进度直接相关地滚动 例如 当您向下滚动页面 25 时 背景图像应该
  • 如何使用 JavaScript 在 IE 6 7 8 9 中分离事件

    这是部分代码 不是完整版本 我有一个荧光笔 可以在以下情况下突出显示特定的 html 元素 鼠标悬停 我也有一个点击事件和监听器 我的问题是 荧光笔事件 侦听器使用 Internet Explorer v6 v7 v8 v9 时不分离 我究
  • 始终在非视网膜显示屏上使用的图像的视网膜版本

    In Cocoa application I ve got 16x16 and 32x32 2x version of an image When the image is displayed in NSImageView Mac OS X
  • MongoDb:避免过多的磁盘空间

    我有一个已分配85GB空间的数据库 我使用 show dbs 命令获得了这个大小 但是当我使用 db stats 时 我得到的存储大小为 63GB 查看文档后 我发现 dat mongo db 为创建的数据库分配了一个大小 然后填充了实际数
  • 使用 Play 核心库验证非 Google Play 应用安装

    一些背景 我们大多数人可能都遇到过这样的情况ResourceNotFoundException当我们迁移到安卓应用程序包释放方法 很明显 问题是由于侧面加载应用程序造成的 参考这里 https stackoverflow com quest
  • 我可以在编辑器编辑器中自定义标题标签(h1,h2,h3 ...)吗?

    我使用了 redactor 编辑器的插件来更改文本的字体大小和字体颜色 除了标题之外 它在其他标签中工作正常 不明白为什么 我试过这个 redactor redactor focus true plugins fontcolor fonts