我想使用羽毛笔表情符号和ng羽毛笔自动将文本转换为表情符号(如facebook或asana):) :(:'(<3以上
我试图安装它,但似乎不起作用
你能用棱角分明的js羽毛笔告诉我正确的方法吗?
提前致谢
以下是使用ng-quill让quill-emoji工作的示例。
https://github.com/contentco/quill-emoji/blob/master/demo/angular.html
简而言之,你可以在你的html中包含ng-quill后包含quill-emoji:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.quilljs.com/1.3.1/quill.js"></script>
<script type="text/javascript" src="ng-quill.js"></script>
<script src="quill-emoji.js"></script>
在您的angularjs代码中,您只需将其添加到模块列表中:
angular.module('quillTest', ['ngQuill']).controller('AppCtrl', ['$scope', AppCtrl]);
function AppCtrl($scope) {
$scope.title = 'Quill works'
$scope.customModules = {
toolbar: [
['emoji'],
],
"emoji-toolbar": true,
"emoji-shortname": true,
"emoji-textarea": true
}
}
回到你的html然后你可以添加:
<ng-quill-editor ng-model="title" modules="customModules"></ng-quill-editor>
首先,你必须在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"
],
``然后在你的组件顶部你应该导入这行代码import 'quill-emoji/dist/quill-emoji.js';
如果您将导入angular.json
,您将收到错误,因为表情符号插件需要下面的模块,如果您在组件中导入js文件,您可以访问它们
“emoji-toolbar”:true,“emoji-shortname”:true,“emoji-textarea”: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']
]
}
};
之后你可以传递给你的角度羽毛笔编辑器
<quill-editor theme="bubble"
[placeholder]="editorPlacehorder"
[modules]="moduleConfig"
[(ngModel)]="feedPost.content">
这是100%的工作,所以如果你有任何问题随时可以问