Tinymce 增加字体字号设置

最新推荐文章于 2024-05-06 15:16:12 发布

＊且听风吟

最新推荐文章于 2024-05-06 15:16:12 发布

阅读量6.5k

点赞数 1

分类专栏： # Vue 2.x 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/123336253

版权

本文介绍了如何在Tinymce编辑器中添加字体和字号的设置选项。通过更新toolbar.js文件并引入相关属性，实现了编辑器的功能增强。完成配置后，用户可在编辑器中自由选择字体大小和类型，提升编辑体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toolbar字段增加 fontsizeselect 和 fontselect 。
toolbar.js：

// toolbar.js文件存的是TinyMCE初始化时加载的工具栏控件, 设置的顺序即代表着在编辑器工具栏上出现的顺序
const toolbar = [
  'styleselect fontselect fontsizeselect formatselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript',
  'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table emoticons forecolor backcolor  code codesample fullscreen'
]

export default toolbar

然后，添加fontsize_formats和font_formats属性：

fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt",
        font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",

比较完整的信息：

    initTinymce () {
   
      /**由于TinyMCE允许通过CSS选择器来标识可替换的元素，所以只需要将包含选择器的对象传递给TinyMCE.init()，
       * 这样就将textarea替换为TinyMCE编辑器实例, 做完了最简单的初始化 */
      const _this = this
      window.tinymce.init({
   
        selector: `#${
     this.tinymceId}`,
        language: this.languageTypeList['zh'],
        branding: false,    // 隐藏tinymce右下角水印
        height: this.height,
        body_class:

最低0.47元/天解锁文章