问题描述
我正在尝试将Trix编辑器用于我的角度应用程序.但是,我没有任何资源/npm软件包在angular 2应用中安装trix编辑器.您能为我提供所需的资源/步骤吗?
I am trying to use trix editor for my angular app. However, I am not getting any resources/npm packages to install trix editor in an angular 2 app. Can you help me with the resources/steps to do so?
推荐答案
我也找不到关于angular2 +的任何内容.只需进行设置即可.
I also can not find any for angular2+.Just set it up.
-
angular.json
在下面添加
angular.json
add below
"styles": [
"node_modules/trix/dist/trix.css"
],
"scripts": [
"node_modules/trix/dist/trix.js"
]
要在HTML上附加附件编辑器.
将角度用作选择器,将trix用作编辑器的目标位置.
发生冲突.所以需要一些技巧.
attach editor at HTML you want to put it.
angular using as selector and trix using as target location of editor.
It conflict. so need some trick.
<form>
<input id="x" type="hidden" name="content">
<trix-editor #trixEditor class="trix-content" input="x"
[editor]="trixEditor"></trix-editor>
</form>
为子html制作trixComponent
对于技巧,需要制作组件.从母HTML接收编辑"元素.
make trixComponent for child html
for trick, need to make component.receivce 'editor' element from mother html.
@Component({
// tslint:disable-next-line:component-selector
selector: 'trix-editor',
templateUrl: './trix.component.html'
})
export class TrixComponent implements OnInit {
@Input() editor: any;
constructor() {
}
ngOnInit() {
const element: any = document.querySelector('trix-editor');
console.log(element.editor.getDocument());
element.addEventListener('trix-attachment-add', (event) => {
if (event.attachment.file) {
console.log(event);
}
});
}
}
这篇关于如何在Triangle 2应用程序中集成Trix编辑器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!