javascript - 如何将鹅毛笔表情符号与 ng quill 一起使用

Question

我想将羽毛笔表情符号与 ng 羽毛笔一起使用自动将文本转换为笑脸(如 facebook 或 asana):) :( :'( <3 及更多

我尝试安装它，但似乎不起作用

你能告诉我使用 Angular js quill 做到这一点的正确方法吗？

谢谢，提前

Answer 1

您好，首先您必须将 angular.json 中的表情符号样式添加到样式数组中``

"styles": [
    "node_modules/quill/dist/quill.core.css",
    "node_modules/quill/dist/quill.bubble.css",
    "node_modules/quill/dist/quill.snow.css",
    "node_modules/quill-emoji/dist/quill-emoji.css",
    "node_modules/q`enter code here`uill-mention/dist/quill.mention.min.css"
],

然后在顶部的组件中您应该导入这行代码
导入 'quill-emoji/dist/quill-emoji.js';


如果您在 angular.json 中导入，您会收到错误，因为表情符号插件需要以下模块，并且如果您在组件中导入 js 文件，您就可以访问它们
“表情符号工具栏”:正确，
“表情符号短名称”:正确，
“表情符号文本区域”:true
然后创建一个配置变量

  const config = {
      'emoji-toolbar': true,
      'emoji-textarea': true,
      'emoji-shortname': true,
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'], // toggled buttons
          ['code-block'],
          // [{header: 1}, {header: 2}], // custom button values
          [{list: 'ordered'}, {list: 'bullet'}],
          // [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
          [{indent: '-1'}, {indent: '+1'}], // outdent/indent
          [{direction: 'rtl'}], // text direction
          [{size: ['small', false, 'large', 'huge']}], // custom dropdown
          [{header: [1, 2, 3, 4, 5, 6, false]}],
          ['image'],                                    // image
          ['code-block'], // code block
          [{align: []}],
          ['emoji'],
          ['clean'], // remove formatting button
          ['link', 'image', 'video']['emoji']
        ]
      }
    };

之后你可以传递给你的 Angular 鹅毛笔编辑器

 <quill-editor theme="bubble"
    [placeholder]="editorPlacehorder"
    [modules]="moduleConfig"
    [(ngModel)]="feedPost.content">

这 100% 有效，因此如果您有任何问题，请随时询问