代码之家 › 专栏 › 技术社区 › Phil Sturgeon

jquery+innovastudio所见即所得编辑器

wysiwyg jquery javascript

-1

Phil Sturgeon · 技术社区 · 14 年前

我试图避免对这个所见即所得编辑器的每个实例进行硬编码,所以我使用jquery基于函数名创建一个each()循环。当我尝试的时候,令人恼火的innovastudio似乎爆炸了。

尝试1

<script type="text/javascript">

            /*
            id = $(this).attr('id');
            if(id.length == 0)
            {
                id = 'wysiwyg-' + wysiwyg_count;
                 $(this).attr('id', id);
            }

            WYSIWYG[wysiwyg_count] = new InnovaEditor('WYSIWYG[' + wysiwyg_count + ']');
            WYSIWYG[wysiwyg_count].REPLACE(id);
            */

            var demo = new InnovaEditor('demo');
            demo.REPLACE('wysiwyg-1');

            console.log('loop');

 </script>

效果

工作正常,但当然只适用于编辑器的单个实例。如果我想要多个实例,我需要使用每个实例。

尝试2:

<script type="text/javascript">

var wysiwyg_count = 1;
//var WYSIWYG = [];
var demo;

(function($) {
    $(function() {

        $('.wysiwyg-simple').each(function(){

            /*
            id = $(this).attr('id');
            if(id.length == 0)
            {
                id = 'wysiwyg-' + wysiwyg_count;
                 $(this).attr('id', id);
            }

            WYSIWYG[wysiwyg_count] = new InnovaEditor('WYSIWYG[' + wysiwyg_count + ']');
            WYSIWYG[wysiwyg_count].REPLACE(id);
            */

            demo = new InnovaEditor('demo');
            demo.REPLACE('wysiwyg-1');

            console.log('loop');
        });

    });
})(jQuery);
 </script>

效果

用所见即所得的相关代码替换我页面的整个html正文,并抱怨没有js可用(甚至没有firebug,因此无法调试)。

注意,我还在硬编码这个名字。我在测试页面上只有一个实例,所以当我使用这个硬编码名称时,我会让注释出来的代码沿着相同的行工作。

有人知道这到底是怎么回事吗?

3 回复 | 直到 14 年前

Plippie 14 年前

为什么不使用他们自己的初始化代码,因为版本4.3:

    <textarea class="innovaeditor">
content here...
</textarea>


<script>
oUtil.initializeEditor("innovaeditor", 
{width:"700px", height:"450px"}
);
</script>

方法是outil.initializeditor(选择器,选项)。第一个参数是选择器,第二个是json格式的编辑器属性。

选择器可以是:

css类名,如果指定了类名,则具有指定类名的所有文本区域都将替换为editor。文本区域ID。如果它是一个ID,则必须添加前缀“35;”,例如outil.initializeeditor(“mytextarea”)。文本区域对象。第二个参数是编辑器的属性。可以在此处指定所有有效编辑器属性,例如width、height、cmdAssetManager、toolbarMode等。

注意,这个方法可以从page onload或document ready事件调用,也可以在page load期间调用(只要选择器引用的对象已经呈现)。此方法在页面包含编辑器脚本时自动可用。

Phil Sturgeon 14 年前

解决方案:不用费心尝试使用innovastudio,改为使用ckeditor。

Niklas 14 年前

即使你选择了ckeditor,你也可能对解决方案感兴趣。您可以为replace函数提供第二个参数。第二个参数还应该是一个id,id,来自一个能够接受html输出的元素(比如div、span、p)。

demo = new InnovaEditor('demo');
demo.REPLACE('wysiwyg-1', 'wysiwyg-1-replaceDiv');

当省略第二个参数innovastudio时,只需使用以下命令即可将html输出写入文档:

document.write();

希望这有帮助!