文章/答案/技术大牛

发布

社区首页 >问答首页 >Froala 3.1.1 + Angular 9插件未加载

问Froala 3.1.1 + Angular 9插件未加载
EN

Stack Overflow用户

提问于 2020-06-03 15:48:04

回答 3查看 1.3K关注 0票数 2

根据(https://github.com/froala/angular-froala-wysiwyg)上的文档，安装过程非常简单，基本编辑器工作良好。

不幸的是，没有一个插件被加载或运行。

从我所看到的，下面的导入需要添加到app.module.ts中，并且应该导入所有可用的插件。

// Import all Froala Editor plugins.
import 'froala-editor/js/plugins.pkgd.min.js';

我还可以看到，在更改默认的toolbarButtons选项时，它是有效的，但是编辑器中没有显示任何"moreRich“选项。

toolbarButtons: {
        'moreText': {
          'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
        },
        'moreParagraph': {
          'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreRich': {
          'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
        },
        'moreMisc': {
          'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
          'align': 'right',
          'buttonsVisible': 2
        }

如果你有Froala3.1.1+ Angular 9使用插件(例如table，insertImage)，请分享你的见解。

谢谢。

angular

angular9

froala

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-06-30 13:12:47

使用^3.1.0版本解决了此问题：

"angular-froala-wysiwyg": "^3.1.0",
"froala-editor": "^3.1.0"

https://github.com/froala/angular-froala-wysiwyg/issues/399#issuecomment-641843910

票数 -1

Stack Overflow用户

发布于 2020-06-17 03:38:01

似乎是组件的问题。我找到了一种解决方法：

只需导入到组件文件中：

import "froala-editor/js/plugins/align.min.js";
import "froala-editor/js/plugins/char_counter.min.js";
import "froala-editor/js/plugins/code_beautifier.min.js";
import "froala-editor/js/plugins/code_view.min.js";
import "froala-editor/js/plugins/draggable.min.js";
import "froala-editor/js/plugins/emoticons.min.js";
import "froala-editor/js/plugins/file.min.js";
import "froala-editor/js/plugins/font_size.min.js";
import "froala-editor/js/plugins/fullscreen.min.js";
import "froala-editor/js/plugins/image.min.js";
import "froala-editor/js/plugins/image_manager.min.js";
import "froala-editor/js/third_party/image_tui.min.js";
import "froala-editor/js/plugins/inline_class.min.js";
import "froala-editor/js/plugins/line_breaker.min.js";
import "froala-editor/js/plugins/link.min.js";
import "froala-editor/js/plugins/lists.min.js";
import "froala-editor/js/plugins/paragraph_style.min.js";
import "froala-editor/js/plugins/paragraph_format.min.js"
import "froala-editor/js/plugins/print.min.js";
import "froala-editor/js/plugins/quick_insert.min.js";
import "froala-editor/js/plugins/quote.min.js";
import "froala-editor/js/plugins/table.min.js";
import "froala-editor/js/plugins/url.min.js";
import "froala-editor/js/plugins/video.min.js";
import "froala-editor/js/plugins/word_paste.min.js";
import "src/assets/js/html2pdf.bundle.min.js";

你可以像往常一样激活插件：

...
froalaOptions = {
    heightMin: this.minWinHeight,
    charCounterMax: 1000000,
    dragInline: false,
    listAdvancedTypes: true,
    pastePlain: true,
    placeholderText: 'Write something, anything...',
    videoResponsive: true,
    events: {},

    pluginsEnabled: [
      "align", "charCounter", "codeBeautifier", "codeView", "draggable", "emoticons", "file",   "fontSize", 
      "fullscreen", "image", "imageTUI", "imageManager", "inlineClass", "lineBreaker", "link", "lists", 
      "paragraphStyle", "quickInsert", "quote", "table", "url", "video", "wordPaste", 
      "paragraphFormat"
    ],
...

票数 1

Stack Overflow用户

发布于 2020-07-17 22:45:36

现在尽量避免^符号，因为它指的是最新版本(3.1.1-1 vs 3.1.1-2)。确保使用相同版本的编辑器和angular包装器：

"angular-froala-wysiwyg": "^3.1.1",
"froala-editor": "^3.1.1"

3.1.1和3.1.0之间的差异-全屏命令错误和字体大小和字体系列的中断html输出已在v3.1.1中修复。干杯

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62167744

复制

相似问题

问Froala 3.1.1 + Angular 9插件未加载
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Froala 3.1.1 + Angular 9插件未加载EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Froala 3.1.1 + Angular 9插件未加载
EN