问题描述
我正在尝试使用媒体编辑器 (https://github.com/yabwe/medium-editor) 构建协作文本编辑器。 我想要做的是在我的编辑器中实现这个功能:
https://github.com/convergencelabs/html-text-collab-ext
我并不是真正的 Javascript 专家,我正面临一些问题。 到目前为止,我创建了一个媒体编辑器扩展,它监听外部用户的输入,接收外部更改的插入位置(使用编辑器的 exportSelection() 功能)。我现在要做的是在进行更改的位置插入假插入符(类似于在 html-text-collab-ext 上看到的那个),但当然不接触真正的插入符。
我的代码:
export const CollabAnchorPreview = MediumEditor.Extension.extend({
name: 'collab-anchor-preview',init: function () {
this.anchorPreview = this.createPreview();
this.getEditorOption('elementsContainer').appendChild(this.anchorPreview);
this.subscribe('externalWriting',this.showPreview.bind(this));
},createPreview: function () {
var el = this.document.createElement('div');
el.id = 'medium-editor-anchor-preview-' + this.getEditorId();
el.className = 'medium-editor-anchor-preview';
el.innerHTML = this.getTemplate();
return el;
},getTemplate: function () {
return '<div class="medium-editor-toolbar-anchor-preview" id="medium-editor-toolbar-anchor-preview">' +
' <a class="medium-editor-toolbar-anchor-preview-inner"></a>' +
'</div>';
},destroy: function () {
if (this.anchorPreview) {
if (this.anchorPreview.parentNode) {
this.anchorPreview.parentNode.removeChild(this.anchorPreview);
}
delete this.anchorPreview;
}
},hidePreview: function () {
if (this.anchorPreview) {
this.anchorPreview.classList.remove('medium-editor-anchor-preview-active');
}
this.activeAnchor = null;
},showPreview: function(external_caret_position,editable) {
console.log('Event');
console.log(external_caret_position);
// Here I don't kNow well how to go ahead.
非常感谢您。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)