Problem with Long Press

Matthew Hawley

Well-known member
This doesn't exactly relate to XenForo but it kind of does.

I want to integrate Long Press into the XenForo text editor.

You can see what it does here http://toki-woki.net/lab/long-press/. Just go into the editor and hold down "a" or another letter.

This is my editor template here:
Code:
<script src="js/longpress/js/jquery.mousewheel.js"></script>
<script src="js/longpress/js/plugins.js"></script>
<script src="js/longpress/js/jquery.longpress.js"></script>
<script src="js/longpress/js/app.js"></script>

<xen:hook name="editor" params="{xen:array 'editorId={$editorId}'}">
<div>
    <xen:if is="{$showWysiwyg}">
        <textarea name="{$formCtrlNameHtml}" id="{$editorId}_html" class="textCtrl MessageEditor BbCodeWysiwygEditor long-press {$editorOptions.extraClass}" style="display:none; {xen:if $height, 'height: {$height};'}" data-css-url="css.php?style={xen:urlencode $visitorStyle.style_id}&amp;css=editor_contents&amp;d={xen:urlencode $visitorStyle.last_modified_date}" data-dialog-url="index.php?editor/dialog&style={$visitorStyle.style_id}" {xen:if $editorOptions.autoSaveUrl, 'data-auto-save-url="{$editorOptions.autoSaveUrl}"'} {xen:if $editorOptions.json, 'data-options="{xen:escape {xen:helper json, $editorOptions.json}}"'}>{$messageHtml}</textarea>
        <noscript><textarea name="{$formCtrlName}" id="{$editorId}" class="textCtrl MessageEditor long-press {$editorOptions.extraClass}" style="{xen:if $height, 'height: {$height};'}">{$message}</textarea></noscript>

    <xen:else />
        <textarea name="{$formCtrlName}" id="{$editorId}" class="textCtrl MessageEditor long-press {$editorOptions.extraClass}" style="{xen:if $height, 'height: {$height};'}">{$message}</textarea>
    </xen:if>
    <input type="hidden" name="_xfRelativeResolver" value="{$requestPaths.fullUri}" />
  
    <xen:if is="{$showWysiwyg}">
        <xen:include template="editor_js_setup" />
    </xen:if>
</div>
</xen:hook>

I added in long-press in the classes. I also noticed in inspect element that all classes get redactor_ added to the front of them. So I went into app.js and changed it from:
Code:
$(function(){
    $('.long-press').first().longPress();
});

To:
Code:
$(function(){
    $('.redactor_long-press').first().longPress();
});

Still can't get it to work. Am I editing the wrong template?
 
Just tried that here and it does the same as the demo link provided. see attached.

Screen Shot 2014-02-10 at 4.55.36 PM.webp

Edit:

Ah you mean it adds that black selection of letters at the bottom.
 
Top Bottom