根据在(https:/github.comfroalaangular-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
}
如果你有Froala 3.1.1 + Angular 9的插件工作(如table,insertImage),请分享你的见解。
谢谢你。
好像是组件的问题。我找到了一个变通的办法。
只要导入到组件文件中
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"
],
...