2010-06-21 15 views
5

Estoy tratando de usar contenteditable y styleWithCss.webkit stylewithcss contenteditable no funciona?

Parece que no funciona en webkit.

Cada vez que uso hacer un comando exec, genera un <b> en lugar de la extensión que esperaba.

He aquí una demostración: http://jsbin.com/izomo/2/edit

Seleccione parte del texto, haga clic en el botón de negrita, y ver la salida html.

¿Esto es un error o estoy haciendo algo mal?

Muchas gracias.

Respuesta

2

Parece que todo está funcionando según lo previsto. Ver Bug 13490 en WebKit BugZilla.

EDIT: Soporte para styleWithCSS se añadió a la fuente de WebKit en changeset 40560, 03 de febrero de 2009.

Dicho esto, parece que desde entonces, no importa qué, styleWithCSS siempre está a false, mientras antes del cambio, los comandos de estilo siempre se aplicaban con CSS, como si hubiera styleWithCSS pero siempre se configuró en true.

Incluso he intentado reescribir su línea document.execCommand de la siguiente manera, de acuerdo con la Mozilla documentation:

document.execCommand("styleWithCSS", true, null); 
document.execCommand("bold", false, null); 

Estos comandos modificados siguen trabajando en Firefox, pero no en cualquiera de Chrome 5 o Safari 5 (tanto en Windows e instalado hoy).

Parece que es un error de WebKit.

+0

Eso es para stylewithcss falsa, yo estoy tratando de hacer stylewithcss cierto. – Mark

+0

D'oh! Bueno. Voy a bucear. –

+0

Mismo error que el original, ¿pero ahora en dirección opuesta? Actualicé mi respuesta después de más investigación.Creo que se suponía que la adición del soporte 'styleWithCSS' lo haría configurable, pero está atorado en su estado predeterminado, que es' falso'. (Consulte [Editor.cpp: 940] (http://trac.webkit.org/browser/trunk/WebCore/editing/Editor.cpp?rev=61418#L940). –

1
document.execCommand("styleWithCSS", true, null); 
document.execCommand("bold", false, null); 
10

No he podido hacer que esto funcione con los comandos en las dos respuestas aquí. Para aquellos que todavía están golpeando sus cabezas con el problema, esta es la forma de hacerlo funcionar.

Podemos pasar tres valores a ExecCommand

document.execCommand(command, uiElement, value) 

detalles del excelente respuesta de Christopher el valor de "styleWithCSS" se establece en false por defecto solo tratamos:

alert(document.queryCommandState("styleWithCss")); 

para establecerlo en cierto que necesita pasar el tercer argumento, "valor" como verdadero. De esta manera:

document.execCommand("styleWithCSS", null, true); 

Esto funciona tanto en Firefox y Chrome

Cuestiones relacionadas