Knockout JS问题与tinymce文本区域
Knockout JS issue with tinymce textarea
Javascript
var tiny_options = {
height: 120,
width: 300,
mode: 'textareas',
theme: 'advanced',
theme_advanced_buttons1: 'bold,italic,underline',
theme_advanced_buttons2: '',
theme_advanced_fonts: 'Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align: 'left'
};
//tinymce.init(tiny_options); // Please, remove comment to activate the tinymce
var initData = function (d) {
this.id = ko.observable(d.id);
this.text = ko.observable(d.text);
};
var viewModel = function () {
var self = this,
data = [{
id: 1,
text: 'some text 1'
}, {
id: 2,
text: 'some text 2'
}];
self.dataSet = ko.observableArray([]);
$.each(data, function (i, d) {
self.dataSet.push(new initData(d));
});
};
var model = new viewModel();
ko.applyBindings(model);
用户界面
<!-- ko foreach : dataSet -->
<br>
<textarea data-bind="value: text, valueUpdate : 'change'"></textarea>
<br>
<!-- /ko -->
链接到演示
上面,代码工作正常,即模型数据在没有绑定的情况下更新得很好tinymce
但是当我激活tinymce
时,视图模型可观察没有更新。我也试过这个,但没有结果。
那么,请帮我配置,如何使用tinymce
绑定更新视图模型可观察量?
看起来您需要一个自定义绑定来绑定值并将 TinyMCE 编辑器应用于您的<textarea>
。 最终结果看起来像这样;
<textarea data-bind="wysiwyg: text"></textarea>
试试我在Github上整理的那个 https://github.com/michaelpapworth/tinymce-knockout-binding
这是一个用于更新可观察量的简单自定义绑定:
ko.bindingHandlers.richTextEditor = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
window.tinymce.init({
target: element,
skin: "lightgray",
menubar: false,
statusbar: false,
forced_root_block: false,
browser_spellcheck: true,
toolbar: "bold italic underline",
valid_elements: "strong,br,em,span[style|class|id|data],i[class]",
formats: {
bold: { inline: "strong" },
italic: { inline: "em" },
underline: { inline: "span", styles: { "text-decoration": "underline" } }
},
plugins: "paste",
resize: false,
setup: function (editor) {
editor.on("change", function () {
var textInputBinding = allBindings().textInput;
var content = this.getContent();
textInputBinding && textInputBinding(content);
});
}
});
}
};
textarea
的绑定应该是data-bind="textInput: yourObservable"
的。
相关文章:
- onkeyup无法动态创建多个文本区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 在文本区域POST后解码JSON
- 在文本区域中使用jQuery.text()保持换行符
- ng在下拉列表和文本区域提交
- 将文本插入光标所在的文本区域
- 离开页面导航后保留文本区域内容
- Javascript-在文本区域中断,但不在段落中中断
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 测试文本区域中的特定文本格式
- 文本编辑后,append函数不适用于文本区域
- 如何在ReactJs中链接下拉列表和文本区域
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- 使用JSON文件中的变量(字符串)填充文本区域
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 延迟高亮显示文本区域中的文本
- 将字母添加到文本区域的末尾
- TinyMCE在新添加的文本区域