contenteditable

Contenteditable div with bold option

由 安稳与你 提交于 2020-02-28 03:08:17
问题 I want to make contenteditable div with bold and italic options to display content in another div on keyup with the same options. I managed to display text, but not options. Please help html: <button onclick="document.execCommand('bold');">B</button> <button onclick="document.execCommand('italic');">I</button> <div id="textarea" contenteditable></div> <div id="textarea-show"></div> jquery: $('#textarea').keyup(function() { $('#textarea-show').html($(this).text()); }); css: #textarea {

Contenteditable div with bold option

由 妖精的绣舞 提交于 2020-02-28 03:06:28
问题 I want to make contenteditable div with bold and italic options to display content in another div on keyup with the same options. I managed to display text, but not options. Please help html: <button onclick="document.execCommand('bold');">B</button> <button onclick="document.execCommand('italic');">I</button> <div id="textarea" contenteditable></div> <div id="textarea-show"></div> jquery: $('#textarea').keyup(function() { $('#textarea-show').html($(this).text()); }); css: #textarea {

Listen to undo/redo event in contenteditable div

由 依然范特西╮ 提交于 2020-02-21 13:21:27
问题 Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo. I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior. 回答1: Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part. $(document).keydown(function (e) { var thisKey = e.which; if (e.ctrlKey) { if

Listen to undo/redo event in contenteditable div

由 心不动则不痛 提交于 2020-02-21 13:10:34
问题 Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo. I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior. 回答1: Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part. $(document).keydown(function (e) { var thisKey = e.which; if (e.ctrlKey) { if

Listen to undo/redo event in contenteditable div

由 安稳与你 提交于 2020-02-21 13:04:49
问题 Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo. I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior. 回答1: Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part. $(document).keydown(function (e) { var thisKey = e.which; if (e.ctrlKey) { if

contenteditable click anywhere around element and it's selected in Chrome

由 ↘锁芯ラ 提交于 2020-01-24 20:39:10
问题 In Chrome I have a simple contenteditable="true" span , and if the user clicks anywhere around it, the cursor shows up and he/she can start editing. This is annoying b/c I only want the cursor to show up when the user clicks on the span itself, not outside of it. Example: http://jsbin.com/oyamab/edit#javascript,html,live Html below... <body> <span id="hello" contenteditable="true">Hello World</span> </body> If you visit that link in Chrome, click anywhere in the rendered html box (the far

JavaScript - Add span to each letter written in contenteditable div

由 假如想象 提交于 2020-01-24 13:13:29
问题 I want to create script which add <span> to each letter of contenteditable div. For example: If you write something in contenteditable div , in HTML code, you will see: <div contenteditable="true"> SomeText </div> What I have to do to see something like this: <div contenteditable="true"> <span>S</span> <span>o</span> <span>m</span> <span>e</span> <span>T</span> <span>e</span> <span>x</span> <span>t</span> </div> I wrote some code (using Rangy), but it doesn't work. You can see that code below

JavaScript - Add span to each letter written in contenteditable div

由 99封情书 提交于 2020-01-24 13:12:08
问题 I want to create script which add <span> to each letter of contenteditable div. For example: If you write something in contenteditable div , in HTML code, you will see: <div contenteditable="true"> SomeText </div> What I have to do to see something like this: <div contenteditable="true"> <span>S</span> <span>o</span> <span>m</span> <span>e</span> <span>T</span> <span>e</span> <span>x</span> <span>t</span> </div> I wrote some code (using Rangy), but it doesn't work. You can see that code below

How to inactivate contentEditable

由 落爺英雄遲暮 提交于 2020-01-24 09:11:11
问题 I have a webpage with an img . Each time the user clicks on the img , it will generate a span tag with the contentEditable attribute set to true . My problem is that if the user clicks on the img to add a span , clicks on the span (thus activating the editable zone), then clicks back on the img , it will add another editable span (desired effect) but it will also leave the first span in edit mode. How can I change back the editable span into a normal span ? 回答1: You can remove the

How to insert vue component into contenteditable div

由 左心房为你撑大大i 提交于 2020-01-23 16:58:11
问题 I want to create simple wysiwyg editor with vue. I have found only one real wysiwyg editor created on vue.js. Here it is __https://quasar.dev/vue-components/editor (But I didn't find there ability to insert image). Others vue wysiwyg editors is only wrappers to tinymce or ckeditor etc. I am planning to create SIMPLE vue-editor using base commands from example from mozilla developer site. Here it is https://codepen.io/chrisdavidmills/pen/gzYjag . At first I want to know how to insert vue
订阅 contenteditable