Appcelerator CKeditor android WebView答案

【问题标题】：Appcelerator CKeditor android WebViewAppcelerator CKeditor android WebView
【发布时间】：2016-08-04 07:56:06
【问题描述】：

我正在尝试通过 Android 上的 WebView 在我的应用中使用 ckeditor。

在 iOS 上，ckeditor 完美显示，但在 android 上出现此错误：

I/TiWebChromeClient.console: (main) [49519,49519] Uncaught TypeError: Cannot set property 'dir' of undefined (4466:file:///android_asset/Resources/lib/ckeditor/ckeditor.js)

在 ckeditor 文档中出现 this 但它无论如何都不起作用。

我在想这是否可能是 Titanium 的错误，因为在 iOS 上一切正常。

这是我的html代码：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <script>
        var CKEDITOR_BASEPATH = '/lib/ckeditor/';
        window.CKEDITOR_BASEPATH='/lib/ckeditor/'; 
    </script>
    <script src="../ckeditor.js"></script>
    <script src="js/sample.js"></script>
    <style>
        body{
            margin: 0px;
        }
    </style>
</head>

<body id="main">

    <div class="adjoined-bottom">
        <div class="grid-container">
            <div class="grid-width-100">
                <div id="editor">
                    <h1>Hello world!</h1>
                    <p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        initSample();
    </script>
</body>
</html>

【问题讨论】：

它可以在 iOS 上运行的事实并不意味着它可以在 Android 上运行——Titanium 提供了本机 webview 组件——并且 iOS 中 webview 的行为可能与 Android 中的不同。如果可以加载编辑器，请尝试检查 Android 浏览器应用程序。

标签： webview ckeditor appcelerator titanium-android

【解决方案1】：

Titanium 支持 CKEDITOR。

ckeditor.js 调用 config.js、styles.js 等等。在 html 文件中，提供那些缺少的依赖文件的路径。

1] 包含 ckeditor 的依赖文件

    <script src="lib/javascript/ckeditor/ckeditor.js"></script>
    <script src="lib/javascript/ckeditor/config.js"></script>
    <script src="lib/javascript/ckeditor/styles.js"></script>
    <script src="lib/javascript/ckeditor/lang/en-gb.js"></script>
    <script src="lib/javascript/ckeditor/plugins/panelbutton/plugin.js"></script>
    <script src="lib/javascript/ckeditor/plugins/colorbutton/plugin.js"></script>
    <script src="lib/javascript/ckeditor/plugins/colorbutton/lang/en.js"></script>
    <script src="lib/javascript/ckeditor/plugins/colorbutton/lang/en-gb.js"></script>

2] 对于移动应用程序，必须设置 ckeditor isCompatible。

<script type="text/javascript">
    CKEDITOR.env.isCompatible = true;
</script>

移动应用不需要设置CKEDITOR.basepath。

【讨论】：