Question

我有一个jquery脚本，可以检测页面上任何表单输入元素的任何更改，并为它们应用自定义CSS样式，以向用户显示他已编辑的字段。对于tinyMCE，我不得不稍微改变代码，使用setup：intialisation参数，它似乎或多或少都有效，但它似乎也打破了我的tinyMCE编辑器。

我正在使用此初始化代码：

<script>
tinymce.init({
selector: "textarea",
plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
,setup : function(ed){
    //save original value to check later if content is changed or not
    ed.on('init',function(){
        this.OrigVal = this.getContent();
    });
    //on change compare content against orignal value
    ed.on('change', function(){
        if(this.getContent() !== this.OrigVal)
        {
            //Content changed, add 'Edited' wrapper style
            if($(this.getContainer()).parent().hasClass('ChangedInput') === false)
            {
                $(this.getContainer()).wrap("<span class='ChangedInput'></span>");
                $(this.getContainer()).addClass('ChangedInput');
            }
            FormUnsaved++;
        }
        else
        {
            //the current value is the same as the original, remove the class from this element and deduct one from the FormUnsaved counter
            $(this).parent().removeClass('ChangedInput');
            $(this).removeClass('ChangedInput');
            FormUnsaved--;
        }
    });
}
 });
 </script>

我应用的自定义样式将tinyMCE编辑器包装在span元素中，然后应用＆＃39; ChangedInput＆＃39;这个范围的风格。这会在周围放置绿色边框，并在元素后面放置一个漂亮的图标。这适用于tinyMCE编辑器（编辑后出现绿色边框和图标），但编辑器中的内容消失了，无法再次编辑。在编辑器再次运行之前，需要重新加载页面。

点击此处查看示例： http://fiddle.tinymce.com/Nceaab

我接近这个错误，还是用tinyMCE这是不可能的？请注意，我想将此代码应用于许多现有表单，因此我正在寻找可以在头文件中集中应用的解决方案。

将自定义样式的包装器应用于tinyMCE元素

0 个答案: